Refreshing the information inside a div using jquery

Question

I have researched and researched and I am trying to use jquery to refresh the information inside a div but so far to no avail..

I have a div.... its display is hidden.... I use jquery to click on an anchor tag that fades this div in, inside this div I have a pp calender for a customer to choose a date, when they choose a date they are navigated to another page however I have two drop down menus so they can change the month and year view of the calender (that was a terrifying php experience for me!). When they change the month view the 'action' of the form sends them to the same page but with the calender month view as selected.. the problem is that when the form sends us back to the calander page, the div is hidden again and we must click the unfade div anchor tag.

I can only think of the following way of doing this; when the drop down menu form is clicked instead of the page reloading with the updated calender, just reload the div (as i store the php for the calender (all of it) inside the div to try and do this).

but I can only find code to reload an a page inside the div.

Any ideas... because the question could be seen as a little generic i am not sure what code I can give to help....

lets say the div in question is called... #terms9 and the anchor tag is called #showcalender. Any code that you need please request.

Thanks for reading

Answer 1

Let's say your action url is calendar.php .

When you change your drop down menu, you want the handler to make a request for the same page and then load the calendar div from that request into the current calendar div:

$('#mydropdown').on('change', function() {
      $.get('calendar.php', { month: $(this).val() }, function(data) {
           $('#mycalendar').replaceWith( $(data).filter('#mycalendar') );
      });
});

.get() is a shorthand method that requests the url, with the parameters ( { month: ... } ), and calls the provided callback function with the returned data. Here, I parse that data for the correct selector and replace the existing one.

I clearly make a lot of assumptions about your code here, but this is the basic idea. You could also use .load() or any of the other ajax functions depending on your needs.

Here is a (slightly convoluted) example using .post() :

http://jsfiddle.net/SHwtr/1/

In this case, /echo/html/ would be your php url, and instead of html: ... , you would put your php parameters.

Answer 2

You can have a look at jquery's load function if you would like to just re-load the div.

If you want to reload the whole page, you simply need to set the div to not be hidden in the back-end code when it is a reload. You can probably detect this based on whether or not a value from your dropdowns has been passed in the request.