0

これは簡単な作業です。フォームを送信して、結果を "#responsediv" div 内に表示したいのですが、何を試してもページ全体をリロードするだけです。

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;
});
4

2 に答える 2

1

ハンドラーpreventDefault内にを追加してみてください。submit

perventDefault編集：両方を呼び出すとstopPropogation、期待どおりに機能するようです。

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

このサンプルjsfiddleを参照してください。

JQueryMobileloadPageは、受信した応答を、でラップされて指定されたターゲットに挿入することに注意pageContainerしてください。divdata-role=page

---編集2--- JQueryMobileのこの例は、あなたが達成しようとしているものだと思います。

于 2012-07-19T09:37:35.267 に答える
0

.on()速記を使用する代わりにjquerymobileを使用する場合は、送信イベントをバインドするために使用する必要があります.submit()。jquerymobileイベントドキュメントを確認してください。

$('#form1').on('submit',function(e) {
                e.preventDefault();
                $.mobile.loadPage("response.php",{
                    type: "post",
                    data: $("#form1").serialize(),
                    pageContainer: $("#responsediv")
                  });       
        });
于 2012-07-19T09:38:41.150 に答える