Question

I am building a web app with jquery mobile. On one page I have a little form to make a room reservation. I have two input boxes. In these boxes comes the start DateTime and in the other one the end DateTime.

Now what I do is the following, when I click on the input box there comes an popup box where you can insert a DateTime. The plugin is called mobiscroll.

I am opening it like this in my JS.

  $('[data-role=page]').live('pageinit', function(event){
        $("#DATUM_BEGIN").scroller({ preset: 'datetime',theme: 'jqm', mode: 'mixed',display:'modal'});

        $("#DATUM_EINDE").scroller({ preset: 'datetime',theme: 'jqm', mode: 'mixed',display:'modal'});
});

The first time it does is correctly. But If I for example forget to enter the end date and submit my form with the submit button. It shows the error messages on the screen. But whenI then want to enter a date. The popup box won’t show.

Does anybody know how I can solve this on a correct way?

EDIT: SOLUTION

Ok I found the solution, you just need to disable the ajax with and it will work.
You can disable your ajax on a form by using the attribute data-ajax=false

Answer 1

You should use

$(page).live('pageinit', function(event){
    // Your code
    // 'page' is a selector for the jquery mobile page you want to work on
});

instead of:

$(document).ready(function(){});

You can see why here http://jquerymobile.com/demos/1.1.0/docs/api/events.html
I think it might be this problem, but even if it’s not, I would work that way, it will avoid several headaches.