jQuery UI 对话框 +使用 AJAX 的外部内容无法正常工作
我的目标：单击链接后，我想将外部页面（带有图像上传表单）加载到 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>
帮助！
My goal: upon clicking a link, I want to load an external page (with a image upload form) into a jQuery UI Dialog and have it submitted AJAX style.
My problem: The dialog loads the external PHP page just fine and I'm able to submit the form via AJAX -- using the jQuery form plugin shown here http://jquery.malsup.com/form/ -- BUT for some reason the AJAX submission won't work inside the dialog box, only when I view the page directly. It simply loads the page itself as if the JS was turned off or something.
Here's the parent page displaying the dialog:
port_edit.php (header)
<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 (link)
<a href="image_upload.php" id="gallery-display">Modify</a>
And the external document loaded into the dialog:
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>
HELP!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您是否想尝试将 image_upload.php 中的 document.ready() 中的代码移至 port_edit.php 中的同一函数中，然后重试？我不确定这是否有效，但你可以尝试...
如下所示：
port_edit.php
image_upload.php
Would you want to try moving the code within the document.ready() in image_upload.php into the same function in the port_edit.php and try again? I am not sure this would work, but you could try that...
Like below:
port_edit.php
image_upload.php