2013-06-21 58 views
0

我發現我的網站存在問題,我已將它隔離到Jquery Mobile組件。我只需點擊一個調用另一個PHP頁面的href鏈接。在第二頁上,我設置了一個表單和一個Jquery表單驗證,用於檢查SKU按鈕是否被選中,如果是,它應該返回一個警報並取消表單提交。問題是,當我從第一頁鏈接到第二頁時,表單驗證代碼不起作用。Jquery Mobile將未知參數傳遞給頁面

如果我刷新頁面,它工作得很好。我隔離了Jquery Mobile的鏈接,該頁面運行良好。 Jquery Mobile正在傳遞一些信息,使頁面無法完全加載。或者,更有可能在第一頁有一些結轉禁用第二頁上的驗證代碼。

我可以補充說,如果我完全在第二頁(完全沒有樣式)擺脫到Jquery Mobile的鏈接,並且從第一頁鏈接到第二頁,那麼Jquery Mobile格式化仍然會進行到第二個頁。我已經廣泛調查了這一點,我找不到任何此前提到的這個問題。我已經設置了測試頁面來對此進行分類。

第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> 

第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> 

任何幫助,我能得到將是巨大的。這對我來說是個謎。

編輯:7-1-2013 我認爲這將是值得更新我在解決這個問題時發現的。禁用AJAX數據工作,但僅限於鏈接。我很難讓它在表單提交上工作。我最終通過以下腳本全局禁用AJAX:

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

此腳本必須放在頁面上的Jquery Mobile腳本之前。這將禁用整個頁面的AJAX功能。 AJAX很棒,應儘可能使用AJAX。在發現我的問題之前,我已經設置了我的網站的佈局。使用Jquery Mobile功能可以更輕鬆地對網站進行改造。

回答

1

嘗試將data-ajax="false"添加到您的<a>標記中,無論何時鏈接到單獨的php或html頁面。

jQuery手機是專爲開發人員將多個頁面放在同一個html或php文件中。所以它使用ajax鏈接那些真的只是div的'頁面'。與此相關的問題是,默認情況下,除非另有說明,否則jQuery mobile會爲每個鏈接使用ajax。這可能會造成一些困難的問題,我花了一段時間才瞭解我什麼時候開始使用jQuery mobile。我認爲在JQM文檔中有關於此主題的相當不錯的文檔。

+0

要添加,我經常看到有'rel = 「外部」'在jQuery Mobile的'href's。這也可能是一個問題,但不是100%肯定的。 –

+0

添加data-ajax =「false」似乎工作。可以添加到表單嗎?我通常從窗體調用第二頁。我把這個例子作爲一個測試。不過,您的解決方案確實有效。 – attentionjay

+0

我相信它可以添加到表單中,但我不積極。我知道我曾經嘗試過,但不記得它是否完美。我也看到人們使用一個小的jQuery腳本,如果他們從不在同一個文件中使用多個頁面,那麼它將爲每個鏈接添加data-ajax屬性。我不會推薦,但是因爲那樣你就限制了你使用其他jqm特性,比如Panels。 – zachmagic73

0

加入 相對= 「外部」 作品對我來說