CODEWITHSUNDEEP
phpjqueryjquery-mobile
attentionjay
attentionjay

Reputation: 55

Jquery Mobile passing unknown parameter to page

I have found an issue with my site and I have isolated it to Jquery Mobile components. I am simply clicking a href link that calls another PHP page. On the second page I have set up a form and a Jquery form validation that checks to see if the SKU button has been selected and if so it should return an alert and cancel the form submission. The problem is that when I link to the second page from the first page the form validation code is not working.

If I refresh the page it works just fine. I isolated out the link to Jquery Mobile and the page works just fine. There is something that is being passed by Jquery Mobile that is keeping the page from loading in its entirety. Or, more likely there is some carry-over from the first page that disables the validation code on the second page.

I can add that if I get rid of the links to Jquery Mobile entirely on the second page (no styling at all) and I link to the second page from the first page, The Jquery Mobile formatting still carries to the second page. I have investigated this extensively and I can't find any previous mention of this problem. I have set up test pages to sort this out.

Page 1: 

<html lang="en">
<head>
  <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1" >
  <title>Customer Maintenance</title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js">     </script>

 </head>
 <body> 

Test 1 page
<p><a href="test1.html">Home Page</a></p><hr>
  <footer>Created by: attentionjay</footer>
 </body>
 </html>

<a href="test2.php" >Test Inventory</a>

Page 2:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1" >
  <title>Customer Maintenance</title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

  <script>
  $(function () {
          $('#custalert').bind('submit', function (e) {
              if($("input:first").val() == "") {
              alert("You must enter a Customer Alert");
              return false;
             }
        });
    });
  $(function () {
          $('#queryinv').bind('submit', function (e) {
              if($('#sku_checkbox').is(':checked') == true) {
             alert("You must enter a SKU");
             return false;
            }
        });
    });    

</script>
 </head>
 <body> 
 <div data-theme='a' > 
    <div style="padding:10px 20px;">
        <form action="inventory_inquiry.php" method="get" id="queryinv" >           
         <h3>Enter SKU</h3>
         <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
          <legend>Choose Input Type:</legend>
          <input type="radio" data-theme="a" name="input" id="sku_checkbox" />
          <label for="sku_checkbox">SKU</label>
          <input type="radio" data-theme="a" name="input" id="entire_checkbox" />
          <label for="entire_checkbox">Entire Inventory</label>
         </fieldset>

            <label for="sku" class="ui-hidden-accessible">SKU:</label>
            <input type="text" name="sku" id="sku" value="" placeholder="Item SKU" data-theme="a">
            <input name="customer_id" type="hidden" value='<?php echo $customer_id; ?>'/>
            <button type="submit" data-theme="b">Submit</button>
        </form>    
    </div>
</div> 
  <br>
 <p><a href="test1.html">Home Page</a></p><hr>
  <footer>Created by: attentionjay</footer>
 </body>
 </html>

Any help I could get would be great. This is a mystery to me.

EDIT: 7-1-2013 I thought that it would be worth updating what I found while solving this problem. Disabling the AJAX data works, but only for links. I had difficulty getting it to work on a form submission. I ended up disabling AJAX globally with the following script:

<script>$(document).bind("mobileinit", function(){
  $.mobile.ajaxEnabled = false;
 });</script>

This script must be placed before the Jquery Mobile script on the page. This will disable the AJAX functionality for the entire page. AJAX is great and it should be used when possible. I had already set up the layout of my site before I discovered my problem. A site could more easily be retrofitted to make use of the Jquery Mobile functionality.

Upvotes: 0

Views: 536

Answers (2)

user2805663
user2805663

Reputation:

adding rel = "external" works for me

Upvotes: 0

zachmagic73
zachmagic73

Reputation: 64

Try adding data-ajax="false" to your <a> tag whenever you are linking to a seperate php or html page.

jQuery mobile is designed for developers to put multiple pages int he same html or php file. So it uses ajax to link between those 'pages' which are really just divs. The issue with this is that, by default, jQuery mobile uses ajax for every link unless you state otherwise. This can create some cooky problems and it took me a while to understand when I first started with jQuery mobile. I think there's a pretty good doc about this topic in the JQM documentation.

Upvotes: 1

Related Questions