JQuery Mobile DateBox - more than 1 instance

Question

I am using JQuery Mobile Datebox as I am having the following problem.

I have page A and page B.

If I go to page B and open the date picker called "date2", then close it and click the Home page link, which goes to page A.

Now, I'm in page a and I hit the button to open up date picker A, called "date" ...

The problem is that I'm getting both opening ... it's like they are both opened or something.

How can I kill the instance of the date pickers once closed please?

Here's the relevant code for page A:

In the head:

<script type="text/javascript">
        $( document ).bind( "mobileinit", function(){
            $.mobile.page.prototype.options.degradeInputs.date = 'text';
        }); 
    </script>

Then the form / date picker 1:

<form action="#" method="POST">
        <div data-role="fieldcontain" style="visibility:hidden;">
          <input value="" name="date" type="date" data-role="datebox" id="date" data-theme="a" data-options='{"mode": "calbox", "pickPageTheme": "a", "pickPageHighButtonTheme": "e", "setDateButtonLabel": "Calendar", "useDialogForceTrue": false, "useDialogForceFalse": true }'/>   


          </div>
          </form>

Now the relevant code for page B

in the page head:

<script type="text/javascript">
        $( document ).bind( "mobileinit", function(){
            $.mobile.page.prototype.options.degradeInputs.date = 'text';
        }); 
    </script>

<script language="javascript">
    $(document).ready(function() {

       var queryDate = $.url.param("mydate");
       $('#date2').val(queryDate);


    });

</script>

And the form part:

<form action="save.php" method="POST">

          <label for="date2" style="margin:10px 0px;">Event Date:</label>
          <input value="1/1/2011" name="date2" type="date" data-role="datebox" id="date2" data-theme="a" data-options='{"pickPageTheme": "a", "pickPageHighButtonTheme": "e", "setDateButtonLabel": "Add Date", "dateFormat": "dd/mm/YYYY"}'/>  

          <label for="textarea">Add:</label>
                <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
                <input type="submit" value="Save" data-theme="a" />


          </form>

Anyone has any clues please?

Thanks

Answer 1

If you're using jquery mobile do not use document.ready() for jqm. it will not work. use something like this instead. check out the jqm demo for the full list of events. Demo

 $(document).live('pageshow',function() {

       var queryDate = $.url.param("mydate");
       $('#date2').val(queryDate);


    });

Also all js should be in the first html that is loaded. in your case it's page A. Simply because the subsequent page is loaded via ajax and js that is written inside will not be executed.