jQuery datepicker not appearing, race condition?
-
21-09-2019 - |
Question
I formerly had my datepicker appearing when I was applying it to a static element, but for some reason I can't get it to work dynamically. Under certain configurations, it works if I pop up an alert box first. What is wrong?
div.load(url, function() {
div.children().each( function(){this.datepicker({dateFormat:"yy-m-d"}});
div.appendTo("div#foos_container");
});
Here is some more context:
Javascript:
add_foo = function(url) {
// Clickable
var numfoos = $("div#foos_container > div.foo").length + 1;
var foo_id = numfoos + "-foo";
var div = $("<div></div>").attr("id",foo_id).addClass("foo");
div.load(url, function() {
div.children().each(function(){
// what do expect this to be below?
// this will be a child element here, so need
// to wrap to get a jQuery object
$(this).datepicker({dateFormat:"yy-m-d"});
});
div.appendTo("div#foos_container");
});
HTML:
<a id="add_foo" onclick="add_foo('{% url add-foo %}')" class="ajax_link">Add Foo</a>
<div id="foos_container">
</div>
Thank you!
EDIT: Added context. I should note that the HTML is a django template.
Solution
try
div.load(url, function() {
div.children().each(function(){
// what do expect this to be below?
// this will be a child element here, so need
// to wrap to get a jQuery object
$(this).datepicker({dateFormat:"yy-m-d"});
});
div.appendTo("#foos_container");
});
In light of your edit, try the following.
add_foo = function(url) {
// Clickable
var numfoos = $("#foos_container > div.foo").length + 1;
var foo_id = numfoos + "-foo";
var div = $("<div></div>").attr("id",foo_id).addClass("foo");
div.appendTo("#foos_container").load(url, function() {
div.children().each(function(){
// what do expect this to be below?
// this will be a child element here, so need
// to wrap to get a jQuery object
$(this).datepicker({dateFormat:"yy-m-d"});
});
};
What do you expect the this
to be in div.children().each( ...)
?
EDIT:
Here's a Working Demo which simulates what I believe you are trying to achieve. Add /edit to the URL to see the code and play with it (example below).
<a id="add">Click me to add a div via AJAX Load</a>
<div id="foos_container"></div>
$(function() {
$('#add').click(function() {
var numfoos = $("#foos_container > div.foo").length + 1;
var foo_id = numfoos + "-foo";
var div = $("<div></div>").attr("id",foo_id).addClass("foo");
div.appendTo("#foos_container").load("http://jsbin.com/ejalo", function() {
div.children().each(function(){
$(this).datepicker({dateFormat:"yy-m-d"});
});
});
});
});
OTHER TIPS
try this in your $(function(){});
:
$('input').filter('.datepicker').datepicker();
i don't think you need any of that other garbage, eg each
, load
and all that. just the filter
in your doc.ready function.