[SOLVED] order of jquery mobile vs jquery in codeigniter

order of jquery mobile vs jquery in codeigniter - page wont load submitted view

I have been scratching my head for a while on this one and finally decided to isolate the problem.

So I have a controller that displays a view. the view is very basic with an input and submit button. on clicking submit, the URL changes to the next view being called however the actual view is not loaded in the browser. pressing f5 corrects this but without manual intervention the view is never loaded.

it seems to be an issue with jquery / jquery ui and jquery mobile more than codeigniter.

here is my first view:

<html>
   <head>
      <title>
        Link Orders
      </title>

     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

   </head>
<body>

    <form action="/sales/order_linking_complete"  method="post">

      <input type="text" id="ordernumber" name="ordernumber" />      
      <input type="submit" value="Link Orders">

</form>
</body>
</html>

here is the controller:

function order_linking_complete() 
  {
      $this->load->view('sales/link_order_summary');
  }

and here is the second view:

<?php
  echo "test";
?>

<script type="text/javascript">
alert('test');
</script>

If I take the below two lines

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

and swap them

it then works but I am not sure why. any explanation.

Problem is that I have the below in my complete page header:

 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> 
 <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
 <link rel="stylesheet" href="/css/sales.css" />

if I put jquery mobile on top in this situation, not all the correct formatting and layout is loaded.

how can I get this to work correctly, hope I have explained this sufficiently. please ask for more info if needed.

Thanks as always...

Solution

To successfully submit a form in jQuery Mobile in a normal way you will need to add additional attribute data-ajax="false", only and only then will form submit to another page, otherwise it will use ajax for form sumbition.

In your case it would be:

<form action="/sales/order_linking_complete"  method="post" data-ajax="false>
    <input type="text" id="ordernumber" name="ordernumber" />      
    <input type="submit" value="Link Orders">
</form>

Also don't use jQuery Mobile unless you are going to use its fully potential. It will case problems if mixed with normal pages.