Menu icon Foundation
close reveal modal dialog after clicking submit using ajax

I have problem with  reveal modal from zurb-foundation.

 

the modal dialog doesn't disappear after I click the submit button .

 

so it stays open after clicking the submit, and there's no way to close it unless if I refresh the page. 

 

This's the reveal modal 

 

 

     

  <div class="insert_post" data-open="add_post">

         <i class="fa fa-plus" ></i>

     </div>



     <div class="small reveal" id="add_post" data-reveal-id="myModal" data-reveal >

    <?php

         $output .='

    

       

             <div class="row">

                 <div class="medium-6 columns">

                     <label>First name

                         <input type="text"  id="first_name" contenteditable>

                     </label>

                 </div>

                 <div class="medium-6 columns">

                     <label>Last name

                         <input type="text"  id="last_name" contenteditable>

                     </label>

                 </div>

                  <button type="button" name="btn_add" id="btn_add" class="button btn btn-xs btn-success" >Submit</button> 

             </div>

         ';

         echo $output; ?>

         <button class="close-button" data-close aria-label="Close modal" type="button">

             <span aria-hidden="true">&times;</span>

         </button>

     </div>

Jquery/ajax code to insert into the database.

 

 

 

    $(document).ready(function(){

        function fetch_data()

        {

            $.ajax({

                url: "includes/home.php",

                method:"POST",

                success:function(data){

                    $('#container').html(data);

                }

            });

        }

        fetch_data();

        $(document).on('click', '#btn_add', function(){

            var first_name = $('#first_name').val();

            var last_name = $('#last_name').val();

    

            $.ajax({

                //url:"includes/widgets/insert.php",

                method:"POST",

                data:{first_name:first_name, last_name:last_name},

                dataType:"text",

                success:function(data)

                {

                    //alert(data);

                    fetch_data();

                }

            })

    

        });

    

    });

    </script>

Picture of the problem http://s32.postimg.org/yqbuz1rvp/wewewewe.png.  after I submit the form!

PHPjqueryAJAXCSS3zurb-foundation

I have problem with  reveal modal from zurb-foundation.

 

the modal dialog doesn't disappear after I click the submit button .

 

so it stays open after clicking the submit, and there's no way to close it unless if I refresh the page. 

 

This's the reveal modal 

 

 

     

  <div class="insert_post" data-open="add_post">

         <i class="fa fa-plus" ></i>

     </div>



     <div class="small reveal" id="add_post" data-reveal-id="myModal" data-reveal >

    <?php

         $output .='

    

       

             <div class="row">

                 <div class="medium-6 columns">

                     <label>First name

                         <input type="text"  id="first_name" contenteditable>

                     </label>

                 </div>

                 <div class="medium-6 columns">

                     <label>Last name

                         <input type="text"  id="last_name" contenteditable>

                     </label>

                 </div>

                  <button type="button" name="btn_add" id="btn_add" class="button btn btn-xs btn-success" >Submit</button> 

             </div>

         ';

         echo $output; ?>

         <button class="close-button" data-close aria-label="Close modal" type="button">

             <span aria-hidden="true">&times;</span>

         </button>

     </div>

Jquery/ajax code to insert into the database.

 

 

 

    $(document).ready(function(){

        function fetch_data()

        {

            $.ajax({

                url: "includes/home.php",

                method:"POST",

                success:function(data){

                    $('#container').html(data);

                }

            });

        }

        fetch_data();

        $(document).on('click', '#btn_add', function(){

            var first_name = $('#first_name').val();

            var last_name = $('#last_name').val();

    

            $.ajax({

                //url:"includes/widgets/insert.php",

                method:"POST",

                data:{first_name:first_name, last_name:last_name},

                dataType:"text",

                success:function(data)

                {

                    //alert(data);

                    fetch_data();

                }

            })

    

        });

    

    });

    </script>

Picture of the problem http://s32.postimg.org/yqbuz1rvp/wewewewe.png.  after I submit the form!

Andy Wallace about 3 years ago

Ahmad,

You will need to programatically close your reveal modal in your AJAX call, probably in the success function.

So something like:

$.ajax({
	//url:"includes/widgets/insert.php",
	method:"POST",
	data:{first_name:first_name, last_name:last_name},
	dataType:"text",
	success:function(data){
		//alert(data);
		fetch_data();

		// if form submitted ok and no form errors
		$('#add_post').foundation('close');
	}
});

ahmad about 3 years ago

Thank you very much, I worked like a charm. I appreciate your help.