jquery mobile is ruining my POST
jquery-mobile, php, post
Solution
Just add this attribute to your form:
data-ajax="false"
It will prevent jQuery Mobile from hijacking form submit logic.
Your form should look like this:
<form method="POST" action="prologin.php" data-ajax="false">
Problem
I have a HTML file (index.html) containing a HEAD section and a BODY section. In the BODy section I have a form with a POST action pointing to a php file. If I add to the HEAD section the CDN of jQueryMobile... then the POST stops working. How is this possible, and how to avoid this? So my Head looks like this: ``` <head> <title>My Mobile App</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <link rel="apple-touch-icon" href="images/icon57.png" /> <link rel="apple-touch-icon" sizes="72x72" href="images/icon72.png" /> <link rel="apple-touch-icon" sizes="114x114" href="images/icon114.png" /> <link rel="apple-touch-startup-image" href="images/icon320.png" /> <link rel="apple-touch-startup-image" sizes="768x1004" href="images/icon320.png" /> </head> ** if I comment the jquery.mobile script line the POST works ** ``` And the BODY with the POST looks like this: ``` <body> <div data-role="page" id="index"> <header data-role="header" data-position="fixed"> <h1>Mobile APP</h1> </header> <div data-role="content"> <b>Login</b> <form method="POST" action="prologin.php"> Name: <input type="text" name="name"><br> Password: <input type="password" name="pass"><br> <input type="submit" value="Login" data-inline="true" data-icon="gear"> </form> </div> <footer data-role="footer" data-position="fixed"> <h1>bla bla</h1> </footer> </div> </body> ``` Now my PHP file prologin.php is more complicated but for debugging purposes I reduced it to: ``` <?php echo 'name='.$_POST['name'].' and pass='.$_POST['pass']; ?> ``` So, when I use the jQuery.mobile scripts, the result of clicking the Login button is an undefined page where if I view the page source... It's empty, I mean it looks like : ``` name= and pass= ``` , so nothing was POSTED If I comment the script line with jQuery.mobile, the result shows what it should, I mean: ``` name=myusername and pass=mypassword ``` (of course myusername and mypassword are the values I enter in the input boxes) What am I doing wrong? This same pages and code worked just fine on another server. But now it does not work anymore. What could be wrong? The original host was also a CENTOS system, same configuration mostly. On the working server I had PHP Version 5.3.3 and on this one (not working) I have PHP Version 5.1.6 How can using jquery mobile affect the HTML POST in such way that it would stop working? I mean, how can i fix it? I would try to update my PHP but on this server there are other apps that rely on this version and I would avoid updating.