?
Solved

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

Posted on 2011-03-14
10
Medium Priority
?
1,436 Views
Last Modified: 2012-05-11
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
Comment
Question by:musickmann
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
  • 2
10 Comments
 
LVL 6

Expert Comment

by:blueghozt
ID: 35137878
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
 
LVL 15

Expert Comment

by:SRigney
ID: 35137926
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
 
LVL 2

Author Comment

by:musickmann
ID: 35138149
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 6

Expert Comment

by:blueghozt
ID: 35138234
maybe try:

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

(quotes around "refresh")
0
 
LVL 2

Author Comment

by:musickmann
ID: 35138300
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
 
LVL 6

Accepted Solution

by:
blueghozt earned 2000 total points
ID: 35138345
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
 
LVL 2

Author Comment

by:musickmann
ID: 35138357
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
 
LVL 2

Author Closing Comment

by:musickmann
ID: 35138374
HA! Yes, true to my form I over complicate. That worked just fine, and yes I'm using the JQuery UI version
0
 
LVL 15

Expert Comment

by:SRigney
ID: 35138380
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
 
LVL 2

Author Comment

by:musickmann
ID: 35138419
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: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

719 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question