使用ajax

Question

我对来自zurb-foundation的揭示模式有疑问。

单击提交按钮后，模态对话框不会消失。

所以它在点击提交后保持打开状态，除非我刷新页面，否则无法关闭它。

这是揭示模式

    <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代码。

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

问题图片http://s32.postimg.org/yqbuz1rvp/wewewewe.png。在我提交表格后！

Answer 1

您可以在成功回拨中通过JavaScript关闭模式。

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