I'm working on creating a bottling calendar that updates a database. But I'm having some problems with the draggable and droppable functionality. I want the screen to reload after I drag a bottling from one date to another, but whenever I put in location.reload(true) this stops the dropped function from working, if I take location.reload(true) out, and then refresh manually after dragging and dropping then it works fine.
http://hq.terravant.com/calendar/calendar.php
$(function() {
$( ".draggable" ).draggable();
$( ".droppable" ).droppable({
drop: function( event, ui ) {
// $( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
var droppableId = $( this).attr("id");
var draggableId = ui.draggable.attr("id");
var objText = ui.draggable.text();
$.post("update_bottling.inc.php",
{
dbID:draggableId,
newDate:droppableId,
prodId:objText
},
function(data,status){
// alert("Data: " + data + "\nStatus: " + status);
});
location.reload(true); // reloads the screen this isn't working
} // ends the drop function
}); // ends the droppable function
$(".draggable").click(function(){
var dragId = $(this).attr('id');
var prodId = $(this).text();
$.post("details.inc.php",
{
date:dragId,
productId:prodId
},
function(data){
$('#details').html(data);
});
}); // end the draggable click function
}); // ends the on ready function
Your code is working on chrome v36.0.1985.143. After dragging a product into a .droppable zone the page refreshes as expected.
Anyway try updating your code into: window.location = ""; instead of
window.location.reload(true);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.