Это моя первая публикация на стеке после двух лет использования сайта, поэтому, пожалуйста, не выпускайте гончих.
Я пытаюсь создать раздел «Редактировать мои фотографии профиля» на веб-сайте, где пользователь может (1) добавить фотографии профиля; (2) удалить фотографии профиля; и (3) изменить порядок ее фотографий.
С точки зрения базы данных, каждый пользователь ограничен пятью изображениями профиля. Поэтому в моей таблице пользователей есть поля для изображений image0, image1, image2, image3 и image4.
Добавление фотографий довольно просто, но у меня возникла любопытная проблема при удалении и изменении порядка фотографий.
Чтобы изменить порядок фотографий, я использовал метод prototype / scriptaculous "sortable.create ()". В частности, я отображаю каждую фотографию в элементе списка
неупорядоченный список.
После переупорядочения любого элемента списка будет выполнен вызов ajax, и в соответствующем php-скрипте я переставлю изображения соответствующим образом (например, то, что раньше было image0, будет
теперь записываться в базу данных на image2 и т. д.).
Затем я воссоздаю в виде HTML обновленный неупорядоченный список изображений.
Наконец, в обработке javascript-функции ajax (то есть, если ajax.status == 200 и ajax.readyState == 4),
Я вызываю метод sortable.create, чтобы снова сделать новый неупорядоченный список изображений сортируемыми.
Вышеупомянутое работает абсолютно нормально. Теперь вот головоломка:
Каждый элемент списка в неупорядоченном списке также содержит ссылку для удаления конкретного изображения, о котором идет речь.
Итак, представьте список фотографий, каждая со ссылкой «удалить это фото» под каждой фотографией в неупорядоченном списке.
Вот примерный пример того, как выглядит HTML:
<ul id="profile_pics" onmouseup="reorder_photos();">
<li id="0"><img src="images/image0.jpg"><a href="?delete_id=0" onclick="return false;" onmouseup="stopPropagation(event); delete_photo('image0');">delete this photo</a></li>
<li id="1"><img src="images/image1.jpg"><a href="?delete_id=1" onclick="return false;" onmouseup="stopPropagation(event); delete_photo('image1');">delete this photo</a></li>
<li id="2"><img src="images/image2.jpg"><a href="?delete_id=2" onclick="return false;" onmouseup="stopPropagation(event); delete_photo('image2');">delete this photo</a></li>
</ul>
Обратите внимание, что нажатие на ссылку "удалить это фото" вызовет функцию delete_photo, но НЕ повлияет на функцию reorder_photos из-за вызова функции stopPropagation ().
Функция delete_photo вызывает AJAX-скрипт PHP, который (1) удаляет интересующую фотографию, (2) вносит соответствующие изменения в базу данных и (3) воссоздает неупорядоченный список. Затем функция обработки ajax вызывает sortable.create ()
сделать этот новый неупорядоченный список сортируемым.
Проблема в том, что новый неупорядоченный список НЕ Сортируется.
Что делает проблему еще более странной и запутанной, так это то, что когда я вызываю другой сценарийный метод, такой как "$ ('profile_pics'). Fade ({duration: 2.5});" в функции обработки AJAX, которая работает.
Почему? Зачем? Почему?
Любая помощь будет бесконечно цениться. Если пример кода поможет, я могу опубликовать это - я просто не хотел делать этот пост более энциклопедическим, чем он есть.