Функциональность jQuery теряется во всех элементах, кроме первого, при использовании цикла
На следующей странице начинается элемент, который позволяет пользователю обрезать и сохранить изображение. Это работает только для первого элемента в цикле, однако, для всех последующих строк sql, щелчок по изображению не открывает модальное диалоговое окно.
У меня нет перекрывающихся тегов, я тщательно проверил. Я перемещался по тегам js-скрипта и не получил никаких изменений. Есть ли для этого общая причина? где будет первое место для устранения неполадок? Было бы предпочтительнее использовать цикл другого типа в PHP?
<?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);
},
Решение
Корень вашей проблемы двоякий (и за этим могут быть другие проблемы).
Первый, у вас есть тонны повторяющихся значений идентификатора в вашем HTML.
Вот некоторые из дупов: edit_listing, container, edit_left, crop-avatar, avatar-modal, так далее…
Данный идентификатор может быть использован только один раз во всем документе HTML. Все эти значения идентификаторов должны быть изменены на имена классов (которые могут использоваться столько раз, сколько вы хотите), а затем любой код или CSS, который ссылается на них, должен быть изменен для ссылки на имя класса, а не на значение идентификатора.
Это вступает в игру в вашем коде, когда вы делаете:
new CropAvatar($("#crop-avatar"));
Поскольку это ссылка на идентификатор, он выберет только первый элемент на вашей странице с этим идентификатором. Таким образом, активен только первый листинг. Если вы измените HTML на:
<div class="container crop-avatar">
Затем вы можете выбрать все из них с помощью селектора класса .crop-avatar,
второй, ваш CropAvatar() Конструктор вызывается только один раз, но написано так, как будто он будет работать только с одним аватаром. Итак, либо нужно позвонить CropAvatar() отдельно для каждого списка ИЛИ вам нужно переписать CropAvatar() и обработчики событий работают для всех списков, а не только для одного.
Вы могли бы, вероятно, сделать существующий CropAvatar() Конструктор работает, если вы исправите все повторяющиеся значения идентификатора, а затем измените это:
var example = new CropAvatar($("#crop-avatar"));
к этому:
$(".crop-avatar").each(function() {
new CropAvatar($(this));
});
Это назовет CropAvatar() конструктор для каждого листинга.
Это первые две основные проблемы, которые я вижу. Я не могу обещать, что нет и других вещей, которые нужно исправить, но эти проблемы нельзя увидеть, пока эти первые два не будут устранены.
Другие решения
Других решений пока нет …