Refreshing the page while closing the modal popup using jquery

Question

My Problem :

I have a modal form which pops up when I click on a submit button . The modal form allows the user to fill in a set of fields and request for a demo from an organization . The form data is then inserted into a mysql database using codeigniter . When the user submits the validated form , the modal popup simply displays a success message and a dynamically generated button (replacing the previous form ), which allows the user to close the modal form .

When I click on the dynamically generated close button , the modal form closes and refreshes the page .

However , I am unable to do the same (refresh the page) when I click on the close icon on the top right corner on the modal form .

I have tried using the following code , but I am not able to refresh the page on the close event of the modal popup.

$('#mymodal').on("hidden", function() {
          location.reload();;
         });

I have also tried using the following code :

$('#mymodal').on("hidden.bs.modal", function() {
              location.reload();;
             });

I have used jquery.mask.js and jquery.validate.min.js for form validation for the modal form.

My research :

I have gone through the following questions on Stack Overflow :

My modal form :




  
  
  
  
    
        
      
      
              
         
          
          Request a Demo
        
                                 
             
             
             FIRST NAME
             
             
             
             LAST NAME
                         
                        
                          
             
             EMAIL
             
             (Please enter your email id in block letters)
                          
             
             COMPANY
             
                          
             
             PHONE
                          
             
            
             MODE OF CONTACT

My Jquery Form validation Code :

// Wait for the DOM to be ready
$(function() {  

    $('#mymodal').on("hidden", function() {
          location.reload();;
         });    

    $('#idphone').mask('(000) 000-0000');

    // Initialize form validation on the registration form.
  // It has the name attribute "frmdemo"
  $("form[name='frmdemo']").validate({
    // Specify validation rules 
      rules: {
      // The key name on the left side is the name attribute
      // of an input field. Validation rules are defined
      // on the right side
      "txtfirstname": {required:true,firstnameval:true},
      "txtlastname": {required:true,lastnameval:true},
      "txtemail": {
        required: true,        
        // Specify that email should be validated
        // by the built-in "email" rule
        email: true,
        emailval:true 
      },
      "txtcompany": {
          required: true,
          companyval:false    
      },

      "txtphone" : {
         required : true,
         usphoneval:true 
      },   

      "selmode" :{
         required : true 
      } 
    },
    // Specify validation error messages
    messages: {
      txtfirstname: {
          required:"Please enter your first name" ,
          firstnameval:"Enter proper first name"
          //firstnameval:"Enter only alphabets ",         
            },
     txtlastname: {
                  required:"Please enter your last name " ,
                  lastnameval:"Enter proper last name"
                  //firstnameval:"Enter only alphabets ",         
                    },    
      txtemail: {
                  required : "Please enter a valid email address",     
                  emailval : "Please enter your corporate email id"       
      },     
      txtcompany: {
          required :"Please enter the name of your company",
          companyval:"Enter a proper company name"
      },         
      txtphone: {
          required :"Please enter your phone number",
          usphoneval :"Please enter a valid phone number"  
      },
         selmode:"Please select the mode in which we should contact you"
    },

    // Make sure the form is submitted to the destination defined
    // in the "action" attribute of the form when valid  

    submitHandler: function(form) {
       // form.submit();
      $('#idmodalcontent').html('Form submitted successfully');

      var input = $('').attr({ type: 'button', name:'btnsubmit', value:'Close', id:'idclose',"class":"btn btn-warning"});    

      //"data-dismiss":'modal',

      $(".modal-footer").html(input);

      $("#idclose").on("click",function(){
         location.reload();
        });              

      /*$('#idmodalcontent').modal({
              onClose: function(dialog){
                location.reload(true);
            }
        }); 
      */
      return false;        
    }        
  });


//add your own custom validation rule

  //US phone format
    $.validator.addMethod("usphoneval", function(value,element)
    {       
        //^$?([d]{3})$?[. ]?([d]{3})[. ]?([d]{4})$

        if (/^$?([0-9]{3})$?[ ]?([0-9]{3})[-]?([0-9]{4})$/.test(value)) 
        {
            return true;

        } else {

            return false;           
        }       

    },function() 
    { 
    });


    //first name : only alphabets
    $.validator.addMethod("firstnameval", function(value,element)
            {       
                //^$?([d]{3})$?[. ]?([d]{3})[. ]?([d]{4})$

                if (/^[a-zA-Z]{1,256}$/.test(value)) 
                {
                    return true;

                } else {

                    return false;           
                }       

            },function() 
            { 
            });

    $.validator.addMethod("lastnameval", function(value,element)
            {       

                //first character alphabet - rest alphanumeric
                if (/^[a-zA-Z][a-zA-Z0-9]{0,256}$/.test(value)) 
                {

                    return true;


                } else {

                    return false;
                }       

            },function() 
            {           
            });

    //validate company - first character alphabet,rest only alphabet,dot,spaces
    $.validator.addMethod("companyval", function(value,element)
            {       
                if (/^[a-zA-Z][a-zA-Z. ]{1,256}$/.test(value)) 
                {
                    return true;                    

                } else {

                    return false;
                }       

            },function() 
            { 
            });     

    $.validator.addMethod("emailval", function(value,element)
            {       

            var n = value.lastIndexOf('@');
            var extension = value.substring(n+1).toLowerCase();
            if (extension == "gmail.com" || extension=="aol.com"|| extension=="facebook.com"|| extension=="googlemail.com"                  
            || extension=="hotmail.com" || extension=="hotmail.co.uk" || extension=="yahoo.com" || extension=="yahoo.co.uk"
            || extension=="live.com"    || extension=="att.net" || extension=="comcast.net" || extension=="gmx.com"     
            || extension=="mac.com" || extension=="me.com" || extension=="sbcglobal.net" || extension=="verizon.net"                
            || extension=="msn.com" || extension=="mail.com"|| extension=="email.com" || extension=="games.com"
            || extension=="gmx.net" || extension=="hush.com" ) {

                return false ;

            } else {

                return true;

            }

            },function() 
            { 
            }); 
});

Ashish Patel · Accepted Answer

Plz try this code: you have just wrong #mymodel id name in your code.

$('#myModal').on('hidden.bs.modal', function () {
 location.reload();
})

Refreshing the page while closing the modal popup using jquery

Answers (2)

Related Questions