views:

400

answers:

4

I have a calendar built using PHP, with events on it.

I'm using jQuery UI to enable drag and drop to move the events around. The .droppable() function has a callback function attached that updates the database with the new information. But the calendar needs to refresh so that it reads from the new database values.

Can you force a page refresh with jQuery? Or is there a better way to do this?

A: 

You could make an ajax call to a php function that re-builds the calendar after updating the database.

.droppable(function(){

  $('#calendar').load('scriptname.php', {variable1: 'var1', etc...});

});
jeerose
using .load() ?
Jason Rhodes
Yes, and you can use the .load callback to do something else after the calendar div is loaded.
jeerose
A: 

location.reload(true) is the call you're looking for.

$('.selector').droppable({
   drop: function(event, ui) { location.reload(true); }
});
Steven Xu
A: 

If you're modifying the database without refreshing, it means you're making an HTTPXmlRequest somewhere along the way... why not find out if you can have that request return the changes, and update it in-browser?

... because if you wanted a page refresh, you should have used a <form> submission, no? And since you didn't, it makes me feel like you want some Sweet Rich-UI Ajax Action, and at the root of the principles of Sweet Rich-UI Ajax Action is "no refresh."

LeguRi
9 times out of 10 this is right, but in this case I'm using jQuery to drive drag and drop, and then I want a page refresh at that moment only, just to show the changes from the database that the drag and drop created. It's a little rare, but I knew there was a way to do it without page refresh, as seen by other answers here. Thanks! (I prefer Hot Rich-UI Ajax Action, though.)
Jason Rhodes
A: 

Maybe this is what you want?

$("div.myCalendarCell").droppable({
    addClasses: false,
    accept: "div.myEvents",
    activeClass: "active",
    hoverClass: "hover",
    drop: function(event,ui) {  
        var myFormData = $(this).find("form.myEventFormData").serialize();
        $(this).load("php/myEventManager.php",{"myFormData":myFormData},function(e){
            alert("updated");
        });
    }
});
Jabes88
This is close, though I don't want the alert. I'll play with those droppable options a bit more. Thanks.
Jason Rhodes
The alert is just one way to show the user the ajax has finished. There are many non-obstructing ways to alert the user when something has finished. I would suggest dumping an ajax spinner inside the calendar cell just before the ajax call and once complete, it will get replaced with the loaded content.
Jabes88