Question

我需要在模态窗口中加载包含表单的html页面。当打开模态窗口并按下提交按钮时，我需要在同一个远程html页面中提交数据，然后关闭模式窗口。这是我的代码： 我正在使用此代码打开模态窗口（page.html）：

    $(".genbutton-options, .ajax-edit").click(function(){                                                                                                                                                                
    var id = $(this).attr("id").replace('edit-', '');                                                                                                                                                                
    var xtraParam = "";                                                                                                                                                                                              
    if( $(this).attr("rel") == "profile" ){                                                                                                                                                                          
        var xtraParam = "&r=sm";                                                                                                                                                                                     
    }                                                                                                                                                                                                                
    if( $(this).attr("rel") == "set" ){                                                                                                                                                                              
        var xtraParam = "&r=s";                                                                                                                                                                                      
    }                                                                                                                                                                                                                
    if( $(this).attr("rel") == "stream" ){                                                                                                                                                                           
        var xtraParam = "&r=stream";                                                                                                                                                                                 
    }                                                                                                                                                                                                                
    var dialogOpts = {                                                                                                                                                                                               
        modal: true,                                                                                                                                                                                                 
        bgiframe: true,                                                                                                                                                                                              
        autoOpen: false,                                                                                                                                                                                             
        width: 716,                                                                                                                                                                                                  
        buttons: {                                                                                                                                                                                                   
            "Save": function() {                                                                                                                                                                                     
                $("#content-dialog").hide();                                                                                                                                                                         
                $(this).append("<div class=\"preloader-ajax\">Hold on...</div>");                                                                                                                                    
                $(".ui-button").addClass("ui-state-disabled");                                                                                                                                                       
                $("form[name='edit-ajax-form']").submit();                                                                                                                                                           
            },                                                                                                                                                                                                       
            "Cancel": function() {$(this).dialog("close");}                                                                                                                                                          
        },                                                                                                                                                                                                           
        open: function() {                                                                                                                                                                                           
            $("#ed-"+id+"").load("edit.php?media="+id+""+xtraParam+"");                                                                                                                                    
            $("#edit-loader-"+id+"").show();                                                                                                                                                                         
        }                                                                                                                                                                                                            
    };                                                                                                                                                                                                               
    $("#ed-"+id+"").dialog(dialogOpts);                                                                                                                                                                              
    $("#ed-"+id+"").dialog("open");                                                                                                                                                                                  
    return false;                                                                                                                                                                                                    
});

以下是在模态窗口（edit.php）中打开的页面：

    <div id="content-dialog">
    <form action="<?php echo $PHP_SELF;?>" enctype="multipart/form-data" method="post">
    <div class="dialog-td1">Title</div>
    <div class="dialog-td2">
        <input type="text" name="title" value="Suitcase Chair?" class="dialog-inputtext" id="inputPicTitle" />
        <p class="dialog-help" style="visibility:hidden">Some cool, sexy or funny title is required. Min 3 chars.</p>
    </div>
    <input type="submit" name="save" id="buttonSignup" class="dialog-button right" value="Save" />
    <div class="preloader-signup right">Hold On</div>
    <a href="javascript:history.back(1)" class="dialog-button-grey right" id="buttonCancel">Cancel</a>
    </form>
</div>
<?php
if(isset($_POST)){
   //do something
   echo "data submitted";
}

＆GT;

问题是当我点击提交按钮时，数据被保存，但浏览器被重定向到edit.php（在模态窗口中打开的同一页面）。 Wat我想做的是，当我点击提交按钮时，要保存的数据然后关闭模态窗口而不进行任何浏览器重定向或刷新。我怎样才能做到这一点？

Answer 1

您必须稍微更改一下代码：

 $("form[name='edit-ajax-form']").submit();

为：

      $.ajax(
        {type:'POST', 
         url: $("form[name='edit-ajax-form']").attr('action'),
         data:$("form[name='edit-ajax-form']").serialize(),
         success: function(response) {
               alert(response);
         })
      });

这确实将您的请求发送为ajax并获得响应。你可以多处理一下。如果响应成功，则只关闭模态窗口。

编辑：

类似的东西：

"Save": function() {


            $("#content-dialog").hide();                                                                                                                                                                         
            var preloader = $(this).append("<div class=\"preloader-ajax\">Hold on...</div>");  
            $(".ui-button").addClass("ui-state-disabled");  
            var dialog = $(this);
            $.ajax(
                    {type:'POST', 
                     url: $("form[name='edit-ajax-form']").attr('action'),
                     data:$("form[name='edit-ajax-form']").serialize(),
                     success: function(response) {
                           $(preloader).remove();
                            dialog.close();
                     },
                    error: function() {
                        $(preloader).remove();
                        alert('something bad happend pls fill out again');
                        $(".ui-button").addClass("ui-state-enabled");  
                    }
                  });                                                                                                                                  


        },

jQuery - 在模态窗口中加载远程html表单并在同一模态窗口上提交

1 个答案: