views:

164

answers:

2

Hello everyone,

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.

+1  A: 

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"}); 
            });                
        });                 
    });

});
Russ Cam
Hmm it still doesn't work. I'm just attaching it to a div that contains a bunch of these forms that need a date attached to them.
SapphireSun
Is this code running before the datepicker script is declared or before the `document` is ready (finished loading) i.e. is this code either at the bottom of `<body>` or inside of `$(document).ready(function() { /* code here */ });` ?
Russ Cam
No it's an Ajax call initiated by clicking a link. I very much appreciate your efforts!
SapphireSun
I added some more context. The div is newly created. Should I change that? I think I'll try it.
SapphireSun
That did it! Thank you Russ Cam.
SapphireSun
+1  A: 

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.

Jason
Thank you, you both had part of the solution!
SapphireSun