sKunKbad Posted March 19, 2011 Share Posted March 19, 2011 I'm working on an image management page, and everything seems to be working, except the confirmation that should come up after every event (changed order or deleted image) only comes up the first time. alert() on line 28 always shows the response, but for whatever reason, the message doesn't get applied to #content after the first time. <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery Dynamic Drag'n Drop</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(function(){ // make the list of images sortable $("#image-ul").sortable({ // allow dragging into the trash can connectWith: '#trash_can', item: 'li', // revert causes bugginess in IE, so left out even though cool //revert: 200, opacity: 0.6, cursor: 'move', // apply this css class to available places to drop within list placeholder: 'placeholder-border', // drop available once mouse has touched droppable area tolerance: 'pointer', update: function(){ var order = $(this).sortable("serialize"); $.post("/drag_drop/update", order, function(theResponse){ // show the confirmation and fade it away after 2.5 seconds alert(theResponse); $("#content").html(theResponse).delay(2500).fadeOut('slow'); }); } }); // allow for deleting images by sending them to the trash can $("#trash_can").droppable({ accept: '#image-ul > li', // when the trash can is hovered on by a draggable, set the css class hoverClass: 'delete-border', drop: function(event, ui) { // setTimeout takes care of IE bug where deleted item remains setTimeout(function() { ui.draggable.remove(); }, 1); deleteImage(ui.draggable,ui.helper); } }); // what to do when an image is dropped into the trash can function deleteImage($draggable,$helper){ // strip out "image_data_" so that only the actual image ID is sent to delete query var id = $draggable.attr('id'); id = id.replace('image_data_',''); params = { 'id': id, 'path': $draggable.find("img").attr("src") } $.ajax({ url: '/drag_drop/delete', type: 'POST', data: params }); // provides a css class to an image that was just dropped // which I think looks crappy, so I'll just comment it out $helper.effect('transfer', { to: '#trash_can', className: 'purple' },500); } }); }); </script> <style> #image-list { float:left; width:500px; } ul#image-ul {margin:0;padding:0;} #image-ul li {float:left; list-style:none; margin-right:10px;margin-bottom:10px;} #outer-shell {float:left; width:100%; height:100px;} #content p {padding:10px;background-color:yellow;} .sortable-element{width:100px; height:100px;border:solid 2px #fff;} .placeholder-border{width:100px;height:100px;border:dashed 2px #999;-moz-border-radius:10px;border-radius:10px;} .purple{border:dashed 6px red;-moz-border-radius:10px;border-radius:10px;} #trash_can{float:left;width:100px;height:100px;} .unhovered {background:url(/img/trash-can.jpg)} .delete-border{background-image:url('/img/trash-can-hovered.jpg');} </style> </head> <body> <div id="outer-shell"> <div id="content"> </div> </div> <div id="image-list"> <ul id="image-ul"> <?php if($images !== FALSE) { foreach ($images as $k => $v ) { echo '<li class="sortable-element" id="image_data_' . $v['id'] . '"><img src="' . $v['path'] . '" width="100" height="100" /></li>' . "\n"; } } else { echo '<li>NO IMAGES TO LIST</li>'; echo '<li>Go <a href="/">Home</a></li>'; } ?> </ul> </div> <div id="trash_can" class="unhovered"> </div> </body> </html> Any advice? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.