通过Jquery将AJAX消息返回到模态窗口

时间:2012-08-31 20:50:45

标签: jquery forms modal-dialog

这是一个不错的小ajax上传代码片段,它会在成功上传或文件太大的情况下通过ajax返回消息......那种事情。在upload.php中,我有div,其中包含返回到表单页面的消息。我想知道如何修改这个以便将div /消息返回到模态窗口而不是仅返回到页面本身...希望有人可以帮助我。我需要在某个地方使用jquery ui吗?谢谢,伙计们!

     $j(document).ready(function(){
var upload = new AjaxUpload('#userfile', {
        //upload script 
        action: '/modules/mod_artuploader/upload.php',
        onSubmit : function(file, extension){
        //show loading animation
        //$j("#loading").show();
        //check file extension
        if (! (extension && /^(jpg|png|jpeg|gif)$/.test(extension))){
       // extension is not allowed
             $j("#loading").hide();
             $j("<span class='error'>Error: Not a valid file extension</span>").appendTo("#file_holder #errormes");
            // cancel upload
       return false;
            } else {
              // get rid of error
            $j('.error').hide();
            }   
            //send the data
            upload.setData({'file': file, 'userid': <?php echo $user->id?> });
        },
        onComplete : function(file, response){
        //hide the loading animation
        $j("#loading").hide();
        $j("#userfile").hide();
        $j('label[for="userfile"]').hide();
        //add display:block to success message holder
        $j(".success").css("display", "block");
        $j(".picture").css("display", "block");
        //This lower portion gets the error message from upload.php file and appends it to our specifed error message block
        //find the div in the iFrame and append to error message    
        var oBody = $j(".iframe").contents().find("div");
        //add the iFrame to the errormes td
        $j(oBody).appendTo("#file_holder #errormes");

}
    });
}); 
        </script>

1 个答案:

答案 0 :(得分:0)

这实际上取决于你用于模态的内容。如果您正在讨论单独的浏览器窗口,浮动未对接或在新选项卡中,这是一个非常复杂的问题需要解决。自从你提出它以来,jQuery UI对话框是一个很好的选择。看一下modal form示例。用户可以单击“上传”按钮,使用文件选择器激活模态弹出窗口。您可以使用$(foo).dialog('open')$(foo).dialog('close')切换对话框的显示。然后上传脚本可以只存在于对话框中并与其中的元素进行交互。至少,我认为你的回调将能够通过appendTo调用对话框。您可能最终需要做的是打开一个上传对话框,等待回复,然后关闭它并打开另一个结果。