0

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

<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;
                }
            });
    }
}

当表单无效时，我不希望弹出模式。我怎样才能做到这一点？

4

2 回答 2

2

您有一个<a>链接（带有 onclick）围绕 a<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');
            }
        });
    });
});

我希望这有帮助。

于 2013-04-26T00:08:21.470 回答
2

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

在这种情况下，当您使用 jQuery 的ajax方法时，您为“成功”和“错误”指定了一个回调。但出于所有意图和目的，这些回调并不知道它们是 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');
            }
        });
    }
}
于 2013-04-26T00:30:33.050 回答