单击按钮两次以调用ajax以加载模态窗口

时间:2016-09-15 23:07:53

标签: jquery html ajax forms

点击两次即可:

这是我的代码:

$(document).ready(function(){
$(".submit").click(function(){ editor.post(); }); // for post on TinyMCE

$('#modal').modal({ show: false });
});

$("#reviewbutton").click(function(e) {
    e.preventDefault();
    form = $('#update');
    editor.post();
    $.ajax({
        type: "POST",
        url: "update-preview.php",
        contentType: 'application/x-www-form-urlencoded',
        data: form.serialize(),
        cache: false,
        dataType: 'html',
        success: function(data){
            console.log(data);
            $('#modal .modal-body').html(data);
            $('#modal').modal('show');
        },
        error: function (xhr, status, error) {
            console.log(xhr.status);
            console.log(xhr.responseText);
            console.log(error);
        },
        complete: function (xhr, status) {
            // do nothing
        }
    });
return false;
}); 

这是模态窗口代码(隐藏在页面加载上):

<style> #modal .modal-dialog { width: 80%; } </style>
<div id="modal" class="modal fade">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
             <h4 class="modal-title">Preview of your job at Job Hunter</h4>
        </div>
        <div class="modal-body">

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

表格如下:

 <form action="/UpdateListing/<?php echo $id; ?>" method="post"  enctype="multipart/form-data" role="form" name="update" id="update">

此处有更多表单元素......

  <div class="col-md-3">
                    <button class='btn btn-primary submit' type='submit' id='reviewbutton' name='reviewbutton'>REVIEW</button>
                   </div>
                   <div class="col-md-3">
                    <input type="hidden" name="jid" value="<?php echo $jid; ?>">
                    <button class='btn btn-green submit' type='submit' id='updatebutton' name='updatebutton'>SAVE UPDATES</button>
                   </div>

审核按钮应该调用ajax将表单数据发送到页面,然后在模态窗口中加载它。

该程序是我必须单击“reviewbutton”按钮两次,然后在第二次单击后打开窗口,但是html页面的副本会加载到窗口中。

我的代码在另一个页面上工作,唯一的区别是表单操作是一个简单的URL,例如动作 - “/ someurl”而不是在这个页面上是action =“/ someurl / id”。这就是为什么我使用隐藏字段,因为第二个按钮提交表单'updatebutton'进行验证等。

我无法弄清楚问题是什么?

0 个答案:

没有答案