close reveal modal dialog after clicking submit using ajax

0
votes

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!

1
phpjqueryajaxcsszurb-foundation
Why are you doing an ajax call to have a response that calls another ajax call? – Rasclatt
this way I can update the database and make changes appear after I press on the submit button without refresh. I tried many solution and this's the best one, I think. – Ahmadz Issa
Oh, I see what you are saying, you are reloading because you can't close the window, that is why the funkiness. Duh. Ok makes sense. Can't you just do a jQuery fadeOut() or similar? – Rasclatt
Yeah it's kina refreshing the page, I tried fadeout function, but it didn't work. Thank you for your tips ^^ – Ahmadz Issa

1 Answers

1
votes

You can close the modal by JavaScript in the success call back.

$("#add_post").foundation('close');