0

I am creating a dynamic HTML page in main.js using jquery mobile. I want to use the date picker for one of my dynamically created HTML input element. When i click the text box against the Target Release field, I want a date picker to be displayed.

My dynamic page (main.js):

var newPage=$("<label for='date'>Target Release</label><input type='text' name='date' id='rel' value='' /> rest of my HTML elements goes here");
newPage.appendTo($.mobile.pageContainer);

$.mobile.navigate("#newPage1");

I have added the below code snippet in main.js

$(function () { 

    $( "#rel" ).datepicker(
    {dateFormat: 'MM yy'}
    );
    });

I have even tried writing the code as below. 

`var newPage=$("<label for='date'>Target Release</label><input type='text' name='date' id='rel' value='' />"+

    $( "#rel" ).datepicker(
    {dateFormat: 'MM yy'}
    );

+"rest of my HTML elements goes here");

newPage.appendTo($.mobile.pageContainer);

    $.mobile.navigate("#newPage1");`

But I am not getting the calendar widget.

I have tried the same code logic in index.html. It is working fine. Please let me know the reason why it is not working in main.js. Datepicker widget cant be used while creating pages dynamically?

Thanks in Advance!!

maxspan
  • 13,326
  • 15
  • 75
  • 104
Gayathri Kuppusamy
  • 33
  • 3

1 Answers1

0

You are not getting the widget because you apply the datepicker before the content appear. When adding new content you have to apply the datepicker again.

Check out this answer for better explanation.

Event binding on dynamically created elements?

Community
  • 1
  • 1
Ideal Bakija
  • 629
  • 5
  • 14