In the following page, begins an element that enables user to crop and save an image. It only works for the first item in the loop however, for all the sql rows that follow, clicking the image doesn't open up the modal-dialog box.
I don't have any overlapping tags, I've checked thoroughly. I've moved around the js script tags and don't get any change either. Is there a common cause for this? where would be the first place to troubleshoot? Would using a different type of loop in PHP be preferable?
<?php
ob_start();
session_start();
require_once ('verify.php');
?>
<head>
<title>Edit Listings</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="../css/cropper.min.css" rel="stylesheet">
<link href="../css/crop-avatar.css" rel="stylesheet">
</head>
<body>
<div id="container">
<div id="head">
<ul id="menu">
</ul>
</div>
<div id="area"></div>
<div id="main_listings">
<h1 align="left">Edit listings page</h1>
<?php
include ("../dbcon2.php");
$conn = new mysqli($servername, $username, $password, $dbname);
$sql="SELECT * FROM listings ORDER BY date_added DESC";
$result = $conn->query($sql);
?>
<?php while ($data=mysqli_fetch_assoc($result)):
$id = $data['id'];
$id = $data['title'];
$listing_img = $data['listing_img'];
?>
<div id="edit_listing">
<div id="edit_left">
<div class="container" id="crop-avatar">
<div class="avatar-view" title="Change the avatar"> <img src="<?php echo $listing_img; ?>" alt="<?php echo $title; ?>"> </div>
<div class="modal fade" id="avatar-modal" tabindex="-1" role="dialog" aria-labelledby="avatar-modal-label" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form class="avatar-form" method="post" action="edit-avatar.php" enctype="multipart/form-data">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="avatar-modal-label">Listing Main Image</h4>
</div>
<div class="modal-body">
<div class="avatar-body">
<div class="avatar-upload">
<input class="avatar-src" name="avatar_src" type="hidden">
<input class="avatar-data" name="avatar_data" type="hidden">
<input name="avatar_id" type="hidden" value="<?php echo $id; ?>">
<label for="avatarInput">Local upload</label>
<input class="avatar-input" id="avatarInput" name="avatar_file" type="file">
</div>
<div class="row">
<div class="col-md-9">
<div class="avatar-wrapper"></div>
</div>
<div class="col-md-3">
<div class="avatar-preview preview-lg"></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" data-dismiss="modal">Close</button>
<button class="btn btn-primary avatar-save" type="submit">Save</button>
</div>
</form>
</div>
</div>
</div>
<div class="loading" tabindex="-1" role="img" aria-label="Loading"></div>
</div>
</div>
<div id="edit_right">
<form name="edit_date" action="edit_list.php" method="post" id="edit_list_data">
<input name="title" type="text" id="title" tabindex="1" value="<?php echo $title; ?>" size="60" maxlength="57"/>
<input type="hidden" name="id" value="<?php echo $id; ?>" />
<input type="submit" formaction="edit_list.php" value="Submit" />
</form>
</div>
</div>
<?php endwhile;$conn->close();?>
<div class="spacer"></div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="../js/cropper.min.js"></script>
<script src="../js/crop-avatar.js"></script>
</body>
</html><?php // Flush the buffered output.
ob_end_flush();
?>
js js
// Events
EVENT_MOUSE_DOWN = "mousedown touchstart",
EVENT_MOUSE_MOVE = "mousemove touchmove",
EVENT_MOUSE_UP = "mouseup mouseleave touchend touchleave touchcancel",
EVENT_WHEEL = "wheel mousewheel DOMMouseScroll",
EVENT_RESIZE = "resize" + CROPPER_NAMESPACE, // Bind to window with namespace
EVENT_DBLCLICK = "dblclick",
EVENT_BUILD = "build" + CROPPER_NAMESPACE,
EVENT_BUILT = "built" + CROPPER_NAMESPACE,
EVENT_DRAG_START = "dragstart" + CROPPER_NAMESPACE,
EVENT_DRAG_MOVE = "dragmove" + CROPPER_NAMESPACE,
EVENT_DRAG_END = "dragend" + CROPPER_NAMESPACE,
build: function () {
var $this = this.$element,
defaults = this.defaults,
buildEvent,
$cropper;
if (!this.ready) {
return;
}
if (this.built) {
this.unbuild();
}
$this.one(EVENT_BUILD, defaults.build); // Only trigger once
buildEvent = $.Event(EVENT_BUILD);
$this.trigger(buildEvent);
if (buildEvent.isDefaultPrevented()) {
return;
}
// Create cropper elements
this.$cropper = ($cropper = $(Cropper.TEMPLATE));
// Hide the original image
$this.addClass(CLASS_HIDDEN);
// Show and prepend the clone iamge to the cropper
this.$clone.removeClass(CLASS_INVISIBLE).prependTo($cropper);
// Save original image for rotation
if (!this.rotated) {
this.$original = this.$clone.clone();
// Append the image to document to avoid "NS_ERROR_NOT_AVAILABLE" error on Firefox when call the "drawImage" method.
this.$original.addClass(CLASS_INVISIBLE).prependTo(this.$cropper);
this.originalImage = $.extend({}, this.image);
}
this.$container = $this.parent();
this.$container.append($cropper);
this.$canvas = $cropper.find(".cropper-canvas");
this.$dragger = $cropper.find(".cropper-dragger");
this.$viewer = $cropper.find(".cropper-viewer");
defaults.autoCrop ? (this.cropped = TRUE) : this.$dragger.addClass(CLASS_HIDDEN);
defaults.dragCrop && this.setDragMode("crop");
defaults.modal && this.$canvas.addClass(CLASS_MODAL);
!defaults.dashed && this.$dragger.find(".cropper-dashed").addClass(CLASS_HIDDEN);
!defaults.movable && this.$dragger.find(".cropper-face").data(STRING_DIRECTIVE, "move");
!defaults.resizable && this.$dragger.find(".cropper-line, .cropper-point").addClass(CLASS_HIDDEN);
this.$scope = defaults.multiple ? this.$cropper : $document;
this.addListeners();
this.initPreview();
this.built = TRUE;
this.update();
$this.one(EVENT_BUILT, defaults.built); // Only trigger once
$this.trigger(EVENT_BUILT);
},
