Solved

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

Posted on 2011-03-14
10
1,098 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
  • 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
 
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 6

Accepted Solution

by:
blueghozt earned 500 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…

705 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now