模态弹出窗口不等待Ajax调用

时间:2015-07-13 15:41:40

标签: php jquery html ajax

我已经尽了最大的努力并且搜索了所有的地方,但无济于事,这就是为什么我决定在这个网站学习4年后做到这一点。

我注意到我的模态弹出窗口没有等待我的ajax,它发送从anchor标签重新获取的值,然后通过将php发送给一个索引未定义错误,然后将其发送到PHP文件。但如果我只使用成功的alert():function()我看到从锚标签中重新获得的值。现在这是我的代码html链接<a href="#" class="btn btn-info btn-sm" id="editr" data-id="<?php echo $postID; ?>" data-owner="<?php echo $op; ?>" data-toggle="modal" data-target="#modal-form" >Edit Page</a>

$(function(){
    $("#editr").click(function(e) {
        e.preventDefault();
        var id = $(this).attr("data-id");
        var owner =  $(this).attr("data-owner");
        var dataString = 'id=' + id + '&user=' + owner;
        $.ajax({
            url: "../config/edit.php",
            type: "POST",
            data : dataString,
            cache: false,
            success: function(data){
                alert(data);
            }
        });
    });
}); 

这是模态部分

&#13;
&#13;
<div class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" id="myModalLabel">Form in moadl</h4>
          </div>
          <div class="modal-body">
            
            	<form role="form">
                  <div class="form-group">
                    <label for="exampleInputEmail1"> Email address</label>
					
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                  </div>
				    
                  <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                  </div>
                  <div class="checkbox">
                    <label>
                      <input type="checkbox"> Check me out
                    </label>
                  </div>
                </form>
            
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

你需要等待承诺返回,然后继续你想要做的事情。

$(function(){
$("#editr").click(function(e) {
    e.preventDefault();
    var id = $(this).attr("data-id");
    var owner =  $(this).attr("data-owner");
    var dataString = 'id=' + id + '&user=' + owner;
    var promise = $.ajax({
        url: "../config/edit.php",
        type: "POST",
        data : dataString,
        cache: false
    });
    promise.then(function(data){
        //show modal with data (in place of alert)
        alert(data);
    });
});

});