Question

我有一个像这样的引导模式：

<a href="#summaryModal" onclick="return generate_summary()" data-toggle="modal" style="color:white"><button type="submit" id="summarize_btn" class="btn btn-success offset3">Summarize</a></button>

<div id="summaryModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Summary</h3>
  </div>
  <div class="modal-body" id="modal-body">
    <textarea disabled id="summary_output" name="summary_input" rows="15" class="span5"></textarea> 
  </div>
  <div class="modal-footer">
    <button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-success">Summarize Again</button>
  </div>
</div>

我的生成函数是这样的：

function generate_summary() {
    var summary_input=document.getElementById('summary_input').value;
    var email_notify=document.getElementById('email_notify').value;
    var num_sent=document.getElementById('num_sent').value;
    if(summary_input=='' || num_sent==''){
    alert('Input text or specify the number of sentences!');    
    return false;
    }
    else {
      $.ajax({
                type: "GET",
                url: "/summary/",
                data: {summary_input:summary_input, email_notify:email_notify, num_sent:num_sent},
                success: function(data){
                     $('#modal-body').html(data)
               return true;
                }
            });
    }
}

当表单无效时，我不想弹出模态。我怎么能这样做？

Answer 1

你有一个<a>链接（带有onclick）包围<button>这似乎是多余的（并且结束标记是向后的）。

首先，用以下内容简化该行：

<button type="button" id="summarize_btn" class="btn btn-success offset3">Summarize</button>

现在，使用jQuery，绑定到该按钮的单击，只显示ajax回调成功时的模式。

$(document).ready(function(){
    $("#summarize_btn").bind('click', function(){
        var summary = $("#summary_input").val();
        var num_sent = $("#num_sent").val();
        if (summary == '' || num_sent == '') {
            return false;
        }

        $.ajax({
            type: "GET",
            url: "/summary/",
            data: $("#form_id").serialize(),
            dataType: "html",
            success: function(data){
                 $('#modal-body').html(data);
                 $('#summaryModal').modal('show');
            }
        });
    });
});

我希望这会有所帮助。

Answer 2

JavaScript的许多方面都是异步，这意味着可以在某处调用函数，启动需要一些时间的进程（例如，AJAX请求），但第一个函数不等待它完成并返回一个值。这就是回调的原因，它是作为参数传递给其他函数的函数，然后在发生某个事件时调用它们。

在这种情况下，当您使用jQuery的ajax方法时，您可以为“success”和“error”指定回调。但是对于所有意图和目的，这些回调并不知道它们是generate_summary函数的一部分。 jQuery只知道在请求成功完成时执行success回调，如果请求以错误结束则执行error回调。

因此，如果您在success回调中返回一个值，则该值不会一直传播到generate_summary。 generate_summary已经运行，并且很久就完成了运行而没有返回值。你需要做的是指定一个回调，如果AJAX请求成功，它将打开模态。或者，在这种情况下，您需要等到AJAX请求完成并且在打开模式之前成功。因此，您应首先使用按钮的data-toggle属性，这样它就不会在点击时切换模态。同样，如果请求成功，您只想切换模态，并且只有在请求完成时才需要检查。

这样的事情可以做到：

function generate_summary() {
    var summary_input=document.getElementById('summary_input').value;
    var email_notify=document.getElementById('email_notify').value;
    var num_sent=document.getElementById('num_sent').value;
    if(summary_input=='' || num_sent==''){
        alert('Input text or specify the number of sentences!');    
        return false;
    }
    else {
      $.ajax({
            type: "GET",
            url: "/summary/",
            data: {summary_input:summary_input, email_notify:email_notify, num_sent:num_sent},
            success: function(data){
                 $('#modal-body').html(data)
                 $('#summaryModal').modal('show');
            }
        });
    }
}

即使表单无效，也会加载Bootstrap模式？

2 个答案: