Link to home
Start Free TrialLog in
Avatar of musickmann
musickmann

asked on

JQuery date picker no longer loads when form is refreshed with .load()

I have a form that is part of a page, the user fills it out, submits the form, the form is submitted using AJAX, when the AJAX completes, the form section of the page is reloaded using
$("#request_form").load("scheduler.php #request_form");

When this happens, the datepicker widget no longer functions, as it's tied to the loading of the entire page. I've tried using
<script type="text/javascript">$( ".datepicker" ).datepicker(refresh);</script>
Inside the section that is being reloaded with .load, but that isn't working.

I'm looking for either a solution that allows the datepicker widget to be refreshed on the reload, or a way of clearing the form fields after the form is submitted.
Avatar of blueghozt
blueghozt
Flag of United Kingdom of Great Britain and Northern Ireland image

have you tried using the onComplete call for .load()?

$('#request_form').load('scheduler.php #request_form', function() {
  $( ".datepicker" ).datepicker(refresh);
});

---

as best practice I always put all of my page load events inside a standalone function e.g.

init = function(){
$( ".datepicker" ).datepicker(refresh);
//add all other functions and settings you need for a new page
}

and on page load load I call this:

$(document).ready(function() {

  init();

});


now whenever I do something like ajax or load I ensure that onComplete I call init() to fire everything back up again

hope this helps
blueghozt told you what to do.

The why:
When a form is reloaded with .load the events tied to the DOM elements are no longer attached because those elements are destroyed and new ones are added.   Even if they meet the same criteria.  

When you bind a datepicker it builds an array inside the plugin of the elements that match.  Anything that is loaded into the DOM after that is not in the array.

Avatar of musickmann
musickmann

ASKER

I'm not sure I'm following 100%
I understand the concept of putting all events needed on page load into a single function that is called, and I do that for the most part. As I'm building this small program I haven't done that yet, I usually do that in the cleanup phase (I'm not a full time programmer, so I'm sure my process isn't the norm, it's just what seems to mostly work for me)

Below is the function I call once the AJAX piece is complete. It adds a response to the div and then reloads several part of the page. The whole program is built on javascript slider panels, so there is only one file, which is why instead of reloading the whole page, I started reloading just the pieces that change, which are tables from a database.

I think I'm confused at the part of, I get that the datepicker array is built on page load, so does that mean I will not be able to refresh only the div containing the form and have the datepicker fucntion in that form again?

In the code below I'm reloading several portions of the page. I tried using the code suggested above and commenting out the other pieces, the form refreshes, but no datepicker...


Thanks for the help guys!
function insertReply() {
if(http.readyState == 4){
var response = http.responseText;
// else if login is ok show a message: "Site added+ site URL".
document.getElementById('insert_response').innerHTML = '<h2>Record added</h2>';
//$("#request_form").load("scheduler.php #request_form");
//$("#schedule").load("schedule.php");
//$("#meeting_list").load("meetings.php");
//$( "#datepicker" ).datepicker(refresh);

$('#request_form').load('scheduler.php #request_form', function() {
  $( ".datepicker" ).datepicker(refresh);
});

}
}

Open in new window

maybe try:

$('#request_form').load('scheduler.php #request_form', function() {
  $( ".datepicker" ).datepicker("refresh");
});

(quotes around "refresh")
No luck. Not getting any errors from firebug either.

My other thought was if there was a way to clear the form inputs without refreshing the form div?
ASKER CERTIFIED SOLUTION
Avatar of blueghozt
blueghozt
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Well that was easy enough
Just did this to clear the forms, and ran the function in place of the .load when AJAX finished.

I still need to refresh the other parts of the page because they contain tables that are affected by this form.
function clearForms()
{
  var i;
  for (i = 0; (i < document.forms.length); i++) {
    document.forms[i].reset();
  }
}

Open in new window

HA! Yes, true to my form I over complicate. That worked just fine, and yes I'm using the JQuery UI version
If you don't need to return data from the server to display in the page clearing the form will probably run faster than inserting new elements into the dom and attaching events to them.

Thanks for that point, I'll have to consider the implications as I go forward. This is a rather small project, so in this specific instance, I don't think the time will be an issue, but I'm considering packaging this to distribute to others  (which I've never done before) as I wasn't able to find something through sourceforge that was simplistic enough for scheduling meetings/appointments, and if I do that I'll have to do a lot of cleanup and consider those things.