jquery - jQuery - モーダル ウィンドウにリモート HTML フォームを読み込み、同じモーダル ウィンドウに送信する

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

?>

問題は、送信ボタンをクリックすると、データは保存されますが、ブラウザーが edit.php (モーダル ウィンドウで開かれた同じページ) にリダイレクトされることです。私がしたいのは、送信ボタンを押すと、データが保存され、ブラウザのリダイレクトや更新なしでモーダルウィンドウが閉じられることです。これどうやってするの？

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


        },