6

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
Community
  • 1
  • 1
Nagama Inamdar
  • 2,851
  • 22
  • 39
  • 48

1 Answers1

3

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.

Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • 2
    Yes and thats where I did it wrong.Now I included my js file just after when the page starts and now its working perfectly.Thanks lot for the answer.I spent 3 hours dealing with this issue and now it is solved. :) – Nagama Inamdar Jun 03 '13 at 07:16