Jquery validations not working without page refresh in jquery mobile

Question

I am using jquery validate.js for validating my contact form in my jquery mobile application. When I load the page through url or page refresh the validations seems to work perfectly. But when I return to the contact form from another page link which is refreshed then the validation stops working.

It works when I refresh the page. I've tried the following :

1) including the contact.js before jquery mobile js.

2) data-ajax="false";

3) using bind

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

4) refresh form page with jQuery Mobile

5) using window.onload

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

5) Jquery-Mobile: How to reload/refresh the internal page

6) One time page refresh after first page load Javascript working only on page refresh in jQuery mobile

But these did not work.What I need to do is refresh the page once when I navigate to it. Here is my contact form code with 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>

Here is the JS code lying in "contact us" form.

$(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

Answer 1

You didn't try the right thing.To understand this situation you need to understand how jQuery Mobile works. It uses ajax to load other pages.

First page is loaded normally. Its HEAD and BODY is loaded into the DOM, and they are there to await other content. When second page is loaded, only its BODY content is loaded into the DOM. And When I say only BODY content I mean only a page DIV (with attribute data-role="page") and nothing else. There are several solutions to this problem and here is a list.