6

jqueryモバイルアプリケーションで連絡先フォームを検証するためにjquery validate.jsを使用しています。URLまたはページの更新によってページをロードすると、検証は完全に機能しているようです。しかし、更新された別のページリンクから連絡先フォームに戻ると、検証が機能しなくなります。

ページを更新すると機能します。私は次のことを試しました：

1) jquery モバイル js の前に contact.js を含めます。

2) data-ajax="false";

3) 使用bind 

$(document).bind("mobileinit", function(){
      $.extend(  $.mobile , { ajaxEnabled: false });
});

4) jQuery Mobile でフォーム ページを更新する

5) 使用window.onload

window.onload = function() {
   if(!window.location.hash) {
    window.location = window.location + '#loaded';
    window.location.reload();
 }
}

5) Jquery-Mobile: 内部ページをリロード/更新する方法

6)最初のページ読み込み後に一度 だけページを更新する Javascript は、jQuery モバイルのページ更新でのみ機能します

しかし、これらは機能しませんでした。私がする必要があるのは、ページに移動したときに一度ページを更新することです。これは、jquery mobile を使用したお問い合わせフォームのコードです。

<form method="post" action="" id="feedback" name="feedback">
     <input type="text" name="user_name" data-role="none" id="name" value="" placeholder= "Your name*" />
     <br />
     <input class="email" required="true" type="text" name="user_email" data-role="none" id="email" value="" placeholder="Your Email*" />
    <br />
    <textarea cols="70" rows="12" class="required" name="user_message" id="c_message" data-role="none" placeholder="Your message*">
   </textarea>
   <br />
   <input type="submit" value="Send" data-mini="true" data-role="none" data-inline="true" class="green_like" id="send" />
</form>

これは、「お問い合わせ」フォームにある JS コードです。

$(document).bind("pageinit",function(){

  $("#feedback").validate({

    submitHandler : function() {
        $.ajax({
            type:'POST',
            url :'/some/url',
            data: $('#feedback').serialize(),
            success: function(resp) {
                if(resp==1)
                {   
                    $("#success_post_contact").html('<label style="color:green;margin-left: 6px;" >Thank you for contacting us.</label>');

                }

            }
        });//end of ajax

     }//end of submit handler
   });//end of validate
});//end of document.bind
4

1 に答える 1

3

この状況を理解するには、jQuery Mobile の仕組みを理解する必要があります。ajax を使用して他のページをロードします。

最初のページは正常に読み込まれます。その HEAD と BODY は DOM にロードされ、他のコンテンツを待機します。2 番目のページが読み込まれると、その BODY コンテンツのみが DOM に読み込まれます。また、BODY コンテンツのみと言うときは、ページ DIV (属性 data-role="page" を持つ) のみを意味し、それ以外は何も意味しません。この問題にはいくつかの解決策があり、その一覧を次に示します。

于 2013-06-03T06:41:15.183 に答える