jQuery - Live initialization of AnyTime Picker on appended element

Question

http://www.ama3.com/anytime/

$(".pick_date").AnyTime_picker({ format: "%W, %M %D, %z" });

This is code to initialize AnyTime picker on .pick_date element. But if I append element then AnyTime doesn't work on it. Is there a way to make it work.

I tried this:

$('#submit-buton').live("click", function() {

    $.ajax({
        type: "POST",
        url: '/AddTask',
        dataType: 'html',
        success: function(data) { 
            $("#taskModule").append(data);              

            $(".pick_date").AnyTime_picker({ format: "%W, %M %D, %z" });
        }
    });

});

But no effect...

Any idea?

EDIT:

This works:

<div id="mydatepicker">
</div>

<input type="button" id="MyButton"  value="Append" />

<script type="text/javascript">

    $(function() {

        var mydatepickerHtml = 'English: <input type="text" id="field1" size="50" value="Sunday, July 30th in the Year 1967 CE" /><br/>Español: <input type="text" id="field2" value="12:34" />';
        $("#mydatepicker").append(mydatepickerHtml);

        $('#MyButton').live("click", function() {            
            // ...
        });

        AnyTime.picker( "field1",       { format: "%W, %M %D in the Year %z %E", firstDOW: 1 } );
          $("#field2").AnyTime_picker( 
              { format: "%H:%i", labelTitle: "Hora",
                labelHour: "Hora", labelMinute: "Minuto" } );

    });
</script>

But this doesn't...

<div id="mydatepicker">
</div>

<input type="button" id="MyButton"  value="Append" />

<script type="text/javascript">

    $(function() {  
        $('#MyButton').live("click", function() {
            var mydatepickerHtml = 'English: <input type="text" id="field1" size="50" value="Sunday, July 30th in the Year 1967 CE" /><br/>Español: <input type="text" id="field2" value="12:34" />';
            $("#mydatepicker").append(mydatepickerHtml);
        });

        AnyTime.picker( "field1",       { format: "%W, %M %D in the Year %z %E", firstDOW: 1 } );
          $("#field2").AnyTime_picker( 
              { format: "%H:%i", labelTitle: "Hora",
                labelHour: "Hora", labelMinute: "Minuto" } );
    });
</script>

It looks like the problem with this code is that you're creating the input on the click event but you're creating the picker outside of the event handler. This would mean that you are trying to create the picker before the input exists (the input must be on the page before you try to create the picker for it!). See my other answer for more assistance (I am the author of AnyTime.picker so your best bet is to come to me directly for assistance!) — Andrew M. Andrews III, Jul 03 '10 at 02:22

Krunal · Accepted Answer · 2010-07-02T11:07:31.740

EDIT:

This works.

<div id="mydatepicker"> 
</div> 

<input type="button" id="MyButton"  value="Append" /> 

<script type="text/javascript"> 

    $(function() {   
        $('#MyButton').live("click", function() { 
            var mydatepickerHtml = 'English: <input type="text" id="field1" size="50" value="Sunday, July 30th in the Year 1967 CE" /><br/>Español: <input type="text" id="field2" value="12:34" />'; 
            $("#mydatepicker").append(mydatepickerHtml); 

            AnyTime.picker( "field1",       { format: "%W, %M %D in the Year %z %E", firstDOW: 1 } ); 
          $("#field2").AnyTime_picker(  
              { format: "%H:%i", labelTitle: "Hora", 
                labelHour: "Hora", labelMinute: "Minuto" } ); 
        }); 


    }); 
</script>

I tried out this plugin in sample page on appended html. It works.

I think you should check the html data returned on ajax request. Does it contain pick_date element?

You can also check the $(".pick_date").length to verify that you are getting element.

Checkout my sample.

<html>
<head>

<link rel="stylesheet" type="text/css" href="anytimec.css" />
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script>                        
<script type="text/javascript" src="anytimec.js"></script>

</head>
<body>
<div id="mydatepicker">
</div>

<script type="text/javascript">

var mydatepickerHtml = 'English: <input type="text" id="field1" size="50" value="Sunday, July 30th in the Year 1967 CE" /><br/>Español: <input type="text" id="field2" value="12:34" />';

$(function()
{
$("#mydatepicker").append(mydatepickerHtml);

AnyTime.picker( "field1",       { format: "%W, %M %D in the Year %z %E", firstDOW: 1 } );
  $("#field2").AnyTime_picker( 
      { format: "%H:%i", labelTitle: "Hora",
        labelHour: "Hora", labelMinute: "Minuto" } );

});

</script>
</body>
</html>

Please, check my edited question. I tried what you suggested but your example is not good. — ilija veselica, Jul 02 '10 at 11:00
I found where I was mistaking. I also tried what you suggested, but it looks like I have to use id for initialization, not class. AnyTime.picker( "field1", { format: "%W, %M %D in the Year %z %E", firstDOW: 1 } ); - this is good, but $(".date_picker")AnyTime.picker({ format: "%W, %M %D in the Year %z %E", firstDOW: 1 } ); will not work on appended elements. — ilija veselica, Jul 02 '10 at 11:44

score 0 · Answer 2 · edited Mar 24 '12 at 09:55

0

$.AnyTime_picker() should work on classes as well as appended elements. Please post the URL here where I can debug the problem, or send me a message via http://www.ama3.com/doorkeeper/ and I will whitelist your email address, so you can email me the relevant HTML/CSS/JS files and I can attempt to reproduce the problem on my computer. Thanks!

edited Mar 24 '12 at 09:55

Chuck Norris

15,207
15
92
123

answered Jul 02 '10 at 14:20

Andrew M. Andrews III

1,989
18
23

Hi Andrew I am using this in asp.net control inside an update panel. and i am getting the error "Error: uncaught exception: Cannot create another AnyTime.picker for "ctl00_cphDashBoard_tabContainOwners_TabPanel2_txtCalender" ", which I think because of update panel – Raghurocks May 18 '13 at 06:46
error persists only if I go to code behind on selection of date – Raghurocks May 18 '13 at 06:48

jQuery - Live initialization of AnyTime Picker on appended element

2 Answers2