This is my first stackoverflow post after about two years of using the site, so please don't release the hounds.
I am attempting to create the "edit my profile photos" section of a website, where a user can (1) add profile photos; (2) delete profile photos; and (3) reorder her profile photos.
From a database perspective, each user is limited to five profile pictures. Therefore, my users table has fields for image0, image1, image2, image3, and image4.
Adding photos is straightforward, but I have run into a curious issue when deleting and reordering photos.
To reorder the photos, I have made use of the prototype/scriptaculous "sortable.create()" method. Specifically, I display each photo within a list element of an unordered list.
Reordering any list element will then make an ajax call, and in the corresponding php script I reorder the images appropriately (e.g., what used to be image0 will now be written in the database to image2, etc.).
I then recreate as HTML the updated unordered list of images.
Finally, in the handling ajax javascript function (i.e., if the ajax.status == 200 and ajax.readyState == 4), I call the sortable.create method to once again make the new unordered list of images sortable.
The aforementioned works absolutely fine. Now here's the brainteaser:
Each list element in the unordered list also contains a link to delete the particular image in question.
So imagine a list of photos, each with a "delete this photo" link under every photo in the unordered list.
Here's a rough sketch of what the HTML looks like:
<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>
Note that clicking the "delete this photo" link will call the delete_photo function, but will NOT implicate the reorder_photos function because of the call to the stopPropagation() function.
The delete_photo function makes an AJAX call to a PHP script that (1) deletes the photo in question, (2) makes the appropriate database adjustments, and (3) recreates the unordered list. The ajax handling function then calls sortable.create() to make this new unordered list sortable.
The problem is that the new unordered list IS NOT SORTABLE.
What makes the issue more bizarre and confounding is that when I call another scriptaculous method like "$('profile_pics').fade({ duration: 2.5 });" in the ajax handling function, that DOES work.
Why? Why? Why?
Any help would be infinitely appreciated. If sample code would help, I can post that -- I just didn't want to make this post more encyclopedic than it already is.
When content is replaced on a page, the event handlers go with them. You need to re-initialize your sortable after your AJAX call.