I have problem with my simple form using jquery mobile. My script works normally on classic website, but it is not working on jquery mobile. I tried several tutorials, but still the same :( the paramteres of posting form in Firebug are OK, but the respone back from PHP is not the right and in the respone tab i can see HTML of the whole page.
Forms are a little tricky with ajax on. To get them to work, you may have to set data-ajax=false this way
Sorry, but this isn't really sound advice. If you have to turn off AJAX navigation on a form just to get it to work then there's more than likely another problem. Turning off AJAX would just be addressing the symptom and not the root cause of the issue. I've used lots of forms with jQuery Mobile and have never had to turn off AJAX just "to get them to work"
You may be quite right because I just double-checked my notes and I have confirmed the trickiness comes in when you have an input type="file" in the form. My bad. You are absolutely right, the problem has be elsewhere.
In the submit handle event.preventDefault() and return false is an attempt to prevent the form from submitting the conventional way. I believe jQM ignores those two lines and submits the form any way via ajax and injects the response into the DOM.
SO i would rather build a new page somewhere on another address and i will try it with clear jquery mobile site. The same problem i have if we use search form input.. we use ajax request for searching.. if i don't have data-ajax="false".. jquery mobile doesn't send the ajax request.
I have to test it.. what is not clear for me in the Jquery mobile documentation is how the PHP script looks like their php that works with the submited data..
As I said earlier my experience has been, when using input type="file", I have had to turn off ajax for obvious reasons.
Your situation - you want to handle the ajax yourself via $.post() or $.get() or $.ajax(), rather than have jQM do it for you - the solution is the same. Otherwise jQM will ignore your event.preventDefault() and return false and do it's own ajax submission. You intention of creating a page on another server is basically so that the form is not submitted by ajax; you do not need to do that at all. Just add data-ajax="false" to the form element.
You do need both data-ajax="false" and the event.preventDefault(). Pretty common JQM pattern.
- data-ajax="false" prevents JQM from performing the submission via it's own AJAX mechanism. This would expect a page in return which it would then insert into the DOM, which, of course, you want to prevent.
- event.preventDefault(), then, prevents the standard browser action, which is to submit the form and replace the document with the response.
- This leave you with no form submission. So, you need to manually serialize and submit the form using $.post().
it will do the ajax request and send some data. It works now.
I MADE 2 MISTAKES:
1) I haven't got the ajax request function in my bind page event (used in case of document.ready) and the second - my relative path to AJAX script was wrong, because i use .htaccess mod_rewrite URLs so if i had the script in root of portal www.myportal.com/ajax.phtml and i was testing it inside section www.myportal.com/3/ the script was looking for the ajax.phtml inside folder "3" and not inside the root folder of portal. That was why the script returned me the FULL HTML page as data.
Now it is clear. Thanks for your help!
Leave a comment on tom_thak's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic