jQuery Mobile and Form Submission

Question

I have decided to jump into the jQuery Mobile framework for a Wordpress enabled mobile theme.

I am now running into the issue of submitting forms with the hash tag in the url and trying to do validation and ajax posting. Basically it does not work.

ex: website.com/contact/ <- works website.com/#/contact/ <- does not work

I am aware of the rel="external" tag for href's which eliminate the # from the url. But I have blog posts with a custom plugin that renders sign up forms that I will not be able to use the rel="external" for. I guess I could use it for all links but that would eliminate the smooth transitions.

What are my options to try and get this to work? I am trying to bind the .submit to the form, do some validation and then ajax post it.

Update--

<form id="myform" action="myfile.php" method="post">
<input type="text" id="mytext" name="mytext" />
<input type="submit" id="myform_submit" value="Submit">
</form>

and my script:

jQuery(document).ready(function() { 
 jQuery("#contact_submit").submit(function(){
        alert('WTF');
        }); 
 });

Changed that to:

<form id="myform" action="myfile.php" method="post">
<input type="text" id="mytext" name="mytext" />
<input type="button" id="myform_submit" value="Submit">
</form>

and my script:

jQuery(document).ready(function() { 
 jQuery("#contact_submit").click(function(){
        alert('WTF');
        }); 
 });

Both do not work with the # in the url.

I also added this BEFORE the jquery.mobile.js file:

<script type="text/javascript">
jQuery(document).bind(
   "mobileinit", function(){
   jQuery.extend( jQuery.mobile, { ajaxFormsEnabled: false });
   });
</script>

Still no go.

(FYI the jQuery instead of $ is because of WordPress)

--another update.

Since I am using Wordpress some of the functions are acting weird. Like is_home(). No matter what 'page' I am on the function comes back as true. I think this has to do with the ajax calls for each page.

Answer 1

I'm not entirely sure where you are calling your jQuery.ready function but the recommended way to register handlers is by binding to the pagecreate event for your specific pages. The pagecreate events should be handled by jQuery.ready in the first page only. I recently built a site using jQuery mobile and I ran into exactly this problem. The following code should get you where you want to be:

jQuery(document).ready(function() {
    $("#id_of_page").live('pagecreate', function() {
        $("form").submit(function(event) {
            event.stopPropagation();
            event.preventDefault();

            // Do stuff here (usually AJAX);

            return false;
        });
    });
});

Unfortunately, I didn't experiment enough to determine if all of that is necessary. I do know that this did the trick for me. I almost instincively add the return false to all of my form submits that are handled by AJAX. Hope this help!

Answer 2

You can switch off AJAX wrapping. Read here: http://jquerymobile.com/demos/1.0a3/#docs/api/globalconfig.html

Also - I've seen something about problems with slashes, but now I can't find it, so be sure to use alpha3 version of JQM

[edit]

This was mentioned a few times before - in some other threads. If you go to a page and JQM loads it with AJAX, then only body is taken AND NO document.ready fires, as the dom is ready already ;) (I'm quoting myself here)