0

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

Steaphann
  • 2,797
  • 6
  • 50
  • 109
  • You need to find the offending code and post it. It's impossible for us to know what the problem is if we don't have the relevant code. – Jeroen May 14 '12 at 06:58

1 Answers1

0

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.

davids
  • 6,259
  • 3
  • 29
  • 50
  • Sorry come again, what should page be in this example ? – Steaphann May 14 '12 at 07:06
  • You should use on() or delegate() (delegate in older jquery versions) instead of live() method – Malyo May 14 '12 at 07:09
  • I'm assuming you are using jquery mobile (because of the tag of your post) and you are structuring your html by jquery mobile pages (http://jquerymobile.com/demos/1.1.0/docs/pages/page-anatomy.html). So, 'page', in this case, is a selector for the page your form is in. Let's suppose your form is wrapped by
    ...
    . A valid selector for this page would be $('#myPage')     – davids May 14 '12 at 07:14
  • Mm no, I am using external pages. Not one big HTML – Steaphann May 14 '12 at 07:17
  • Even so, aren't you wrapping the contents of every page you are displaying with
    ? Because that's the way to go, if you don't do it, jquery mobile will create that div
     – davids May 14 '12 at 08:52
  • Yes it creates a div, but not with an id in it. – Steaphann May 14 '12 at 09:41
  • Yep, so, if you don't wanna create it yourself in your html for some reason, another valid selector would be $('[data-role=page]'), but just if you are sure the document you want to work on has only a page (in case you yourself are not creating more, there's just one of them), otherwise every page of the document would be attached the handler function. – davids May 14 '12 at 10:36
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/11229/discussion-between-stef-geelen-and-davids) – Steaphann May 14 '12 at 11:14