Question

我的目标：点击链接后，我想将一个外部页面（带有图片上传表单）加载到jQuery UI对话框中并让它提交AJAX样式。

我的问题：对话框加载外部PHP页面就好了，我可以通过AJAX提交表单 - 使用此处显示的jQuery表单插件http://jquery.malsup.com/form/ - 但是由于某种原因，只有当我直接查看页面时，AJAX提交才会在对话框中生效。它只是加载页面本身就好像JS被关闭了一样。

这是显示对话框的父页面：

port_edit.php（标题）

    <script type="text/javascript" src="../common/js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="../common/js/jquery-ui-1.8.4.custom.min.js"></script>
    <script type="text/javascript" src="../common/js/jquery.form.js"></script>
    <script type="text/javascript">
    function refreshWindow(){
        location.reload(true);
    }

    $(document).ready(function() {
    $('#gallery-display').each(function() {
        var $link = $(this);
        var $dialog = $('<div></div>')
            .load($link.attr('href'))
            .dialog({
                autoOpen: false,
                title: 'Gallery Display',
                width: 280,
                height: 280,
                close: refreshWindow,
                resizable: false

            });

        $link.click(function() {
            $dialog.dialog('open');
            return false;
        });


    });
});
    </script>

port_edit.php（链接）

<a href="image_upload.php" id="gallery-display">Modify</a>

并将外部文档加载到对话框中：

image_upload.php

<script type="text/javascript" src="../common/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../common/js/jquery.form.js"></script> 
    <script type="text/javascript"> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
        // attach handler to form's submit event
        $('#image-upload').submit(function() { 
            // submit the form 
            $(this).ajaxSubmit(); 
            return false;
        });        }); 
    </script> 
</head>

<body>
<form action="image_upload_action.php" method="post" enctype="multipart/form-data" name="portfolio-upload" id="image-upload">
<input type="file" name="file" id="file" /> 
<input type="submit" name="btn-submit" id="btn-submit" value="Upload" class="button"/>
<br />
</form>

帮助！

Answer 1

您是否想尝试将image_upload.php中document.ready（）中的代码移动到port_edit.php中的相同函数中并重试？我不确定这会起作用，但你可以试试......

如下所示：

<强> port_edit.php

<script type="text/javascript" src="../common/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../common/js/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript" src="../common/js/jquery.form.js"></script>
<script type="text/javascript">
function refreshWindow() {
    location.reload(true);
}

$(document).ready(function() {
    $('#gallery-display').each(function() {
        var $link = $(this);
        var $dialog = $('<div></div>').load($link.attr('href')).dialog({
            autoOpen: false,
            title: 'Gallery Display',
            width: 280,
            height: 280,
            close: refreshWindow,
            resizable: false

        });

        $link.click(function() {
            $dialog.dialog('open');
            return false;
        });
    });

    // attach handler to form's submit event
    $('#image-upload').submit(function() {
        // submit the form
        $(this).ajaxSubmit();
        return false;
    });

});
</script>
<a href="image_upload.php" id="gallery-display">Modify</a>

<强> image_upload.php

<form action="image_upload_action.php" method="post" enctype="multipart/form-data" name="portfolio-upload" id="image-upload">
    <input type="file" name="file" id="file" />
    <input type="submit" name="btn-submit" id="btn-submit" value="Upload" class="button"/>
    <br />
</form>

jQuery UI对话框+外部内容w / AJAX无法正常工作

port_edit.php（标题）

port_edit.php（链接）

image_upload.php

1 个答案: