jQuery-mobile >>加載表單提交頁面

這應該是一個簡單的任務。我想提交一個表單並將結果顯示在「#responsediv」div中，但無論我嘗試什麼，它都會重新加載整個頁面。jQuery-mobile >>加載表單提交頁面

我是jquery-mobile的新手;有人可以幫忙嗎？在此先感謝！ :-)

<div data-role="page" id="page1" data-theme="a"> 
    <div data-role="content" id="content1" name="content1"> 
    <form id="form1" > 
     <div id="text1" data-role="fieldcontain"> 
     <label for="text1">Text1:</label> 
     <input id="text1" name="text1" type="text" /> 
     </div> 
     <div id="text2" data-role="fieldcontain"> 
     <label for="text2">Text2:</label> 
     <input id="text2" name="text2" type="text" /> 
     </div> 
     <div id="submitDiv" data-role="fieldcontain"> 
     <button name="submitbtn" type="submit" id="submitbtn" />submit</button> 
     </div> 
    </form> 
    <div id="responsediv"></div> 
    </div> 
    </div> 
</div> 

<script> 
    $('#form1').submit(function() { 
     $.mobile.loadPage("response.php",{ 
      type: "post", 
      data: $("#form1").serialize(), 
      pageContainer: $("#responsediv") 
      }); 
    }); 
    </script>

仍然沒有工作，但這裏是我的最新嘗試：

$('#form1').on("submit", function(e){ 
       e.preventDefault(); 
       $.mobile.loadPage("result.php",{ 
        type: "post", 
        data: $("#form1").serialize(), 
        pageContainer: $("#responsediv") 
        }); 
     return false; 
});

來源

2012-07-19 Elvis

嘗試添加preventDefault您submit處理程序中。

編輯：調用perventDefault和stopPropogation似乎按照您的預期工作。

$('#form1').submit(function(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    $.mobile.loadPage("/echo/html",{ 
     type: "post", 
     data: $("#form1").serialize(), 
     pageContainer: $("#responsediv") 
    }); 
});

看到這個樣品jsfiddle。

注意JQueryMobile loadPage插入響應接收到由pageContainer包裹在一個div指定的目標與data-role=page

---編輯2 --- 我覺得this example from JQueryMobile是你想達到什麼目的。

來源

2012-07-19 09:37:35

感謝您的提示，但在這種情況下，該行爲似乎仍然不起作用。 – Elvis 2012-07-19 12:30:44

你能顯示你的最新代碼嗎？ – 2012-07-19 14:49:36

我已經更新了我目前正在搞的代碼。 – Elvis 2012-07-19 15:23:42

當使用jquerymobile而不是使用.submit()時，應該使用.on()來綁定提交事件。查看jquerymobile活動文檔。

$('#form1').on('submit',function(e) { 
       e.preventDefault(); 
       $.mobile.loadPage("response.php",{ 
        type: "post", 
        data: $("#form1").serialize(), 
        pageContainer: $("#responsediv") 
        });  
     });

來源

2012-07-19 09:38:41 root

感謝您的努力，但「on（'submit'...）」也沒有解決問題。雖然「submit（）」導致頁面本身重新加載，但「on（）」似乎沒有任何作用。 :-( – Elvis 2012-07-19 12:28:26

jQuery-mobile >>加載表單提交頁面

回答

相關問題