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 >>加载表单提交页面

回答

相关问题