Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1525
  • Last Modified:

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.
0
musickmann
Asked:
musickmann
  • 5
  • 3
  • 2
1 Solution
 
blueghoztCommented:
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
0
 
SRigneyCommented:
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.

0
 
musickmannAuthor Commented:
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

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
blueghoztCommented:
maybe try:

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

(quotes around "refresh")
0
 
musickmannAuthor Commented:
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?
0
 
blueghoztCommented:
actually as you are loading in a new datepicker then refresh might be the wrong method (not 100% with datepicker - is it the jquery ui one?) - maybe just initialise it:

$('#request_form').load('scheduler.php #request_form', function() {
  $( ".datepicker" ).datepicker();
});
0
 
musickmannAuthor Commented:
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

0
 
musickmannAuthor Commented:
HA! Yes, true to my form I over complicate. That worked just fine, and yes I'm using the JQuery UI version
0
 
SRigneyCommented:
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.

0
 
musickmannAuthor Commented:
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.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now