【问题标题】:Load form results in Bootstrap modal with ajax使用 ajax 在 Bootstrap 模式中加载表单结果
【发布时间】:2019-07-29 04:39:56
【问题描述】:

我想在 Bootstrap 模式中显示表单页面的结果。

一切正常,但不是用表单页面中的数据替换模态正文内容。 我在哪里做错了?当我在警报中显示结果时,它工作正常......

// this is the id of the form
$("#idform").submit(function(e) {

    e.preventDefault(); // avoid to execute the actual submit of the form.

    var form = $(this);
    var url = "form.html"; //form.attr('action');

    $.ajax({
           type: "POST",
           url: url,
           data: form.serialize(), // serializes the form's elements.
           success: function(data)
           {
               //alert(data); // show response from the php script. -> Working fine   

               // Here is (i guess) the problem zone...:
               $("#modal-confirmation").modal('show').on("show", function(e) {
                    $(this).find(".modal-body").load(data);     
               });                                           
           }
         });


});

【问题讨论】:

标签: javascript jquery ajax twitter-bootstrap


【解决方案1】:

你不需要使用加载方法,因为你已经使用了ajax并获取数据,所以当你需要时直接使用它......

// this is the id of the form
$("#idform").submit(function(e) {

    e.preventDefault(); // avoid to execute the actual submit of the form.

    var form = $(this);
    var url = "form.html"; //form.attr('action');

    $.ajax({
           type: "POST",
           url: url,
           data: form.serialize(), // serializes the form's elements.
           success: function(data)
           {
               //alert(data); // show response from the php script. -> Working fine   

               // Here is (i guess) the problem zone...:
               $("#modal-confirmation").modal('show');
               $("#modal-confirmation .modal-body").html(data);
                                                   
           }
         });


});

【讨论】:

    【解决方案2】:

    你可以使用:

    $("#modal-confirmation .modal-body").html(data);
    $("#modal-confirmation").modal('show');
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2012-09-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多