在 jquery 模态对话框 onclick 中加载外部 php 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11960619/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Load external php file in jquery modal dialog onclick
提问by cdonahue
I'm trying to open a jquery modal dialog box when the user clicks on a link. I'd like to then load an external php file into the dialog box. I'm using this jquery:
当用户单击链接时，我试图打开一个 jquery 模式对话框。我想然后将外部 php 文件加载到对话框中。我正在使用这个 jquery：
$(document).ready(function() {
$('#register').dialog({
title: 'Register for LifeStor',
resizable: true,
autoOpen:false,
modal: true,
hide: 'fade',
width:350,
height:275,
});//end dialog
$('#reg_link').click (function() {
open: (function(e) {
$('#register').load ('register.php');
});
});
});
and this html:
和这个 html：
<div id="register"></div>
which is set to display:none in the .css file.
在 .css 文件中设置为 display:none 。
Further on, inside a form, the link is called:
更进一步，在表单内，链接被称为：
<td><font size="2">Not registered? <a href="#" name="reg_link">Sign-Up!</a></td>
(I'll be changing the table to divs).
（我会将表格更改为 div）。
I don't get any errors with this code, but nothing happens when I click the link. I got most of the above from other stack overflow posts. Am I missing something? Is the table html interfering?
我没有收到此代码的任何错误，但是当我单击链接时没有任何反应。我从其他堆栈溢出帖子中获得了上述大部分内容。我错过了什么吗？表 html 是否有干扰？
Regards...
问候...
回答by The Alpha
In your link
在您的链接中
<a href="#" name="reg_link">Sign-Up!</a>
you have name="reg_link"that should be id="reg_link"instead, i.e.
你有name="reg_link"那个应该是id="reg_link"，即
<a href="#" id="reg_link">Sign-Up!</a>
So it'll work with following code
所以它将与以下代码一起使用
$('#reg_link').click(function(e) {
e.preventDefault();
$('#register').load('register.php');
});
To make it a dialog you can use
要使其成为对话框，您可以使用
$(document).ready(function() {
var dlg=$('#register').dialog({
title: 'Register for LifeStor',
resizable: true,
autoOpen:false,
modal: true,
hide: 'fade',
width:350,
height:275
});
$('#reg_link').click(function(e) {
e.preventDefault();
dlg.load('register.php', function(){
dlg.dialog('open');
});
});
});
回答by Musa
Create the dialog after you load the page .load()replaces the content of the container with the new content
加载页面后创建对话框.load()将容器的内容替换为新内容
Your click handler has syntax errors, It looks like your passing a combination of a function and an object as the argument, it should be a normal function. Like
你的点击处理程序有语法错误，看起来你传递了一个函数和一个对象的组合作为参数，它应该是一个普通的函数。喜欢
$('selector').click (function() {
//code
});
Also your <a>element has reg_linkas a name not id
此外，您的<a>元素reg_link的名称不是 id
$(document).ready(function() {
$('#reg_link').click (function() {
$('#register').load ('register.php', function(){
$('#register').dialog({
title: 'Register for LifeStor',
resizable: true,
modal: true,
hide: 'fade',
width:350,
height:275,
});//end dialog
});
});
});
<td><font size="2">Not registered? <a href="#" name="reg_link" id="reg_link">Sign-Up!</a></td>
回答by KRyan
I'm not entirely familiar with the .dialog()function, but you're using .click()wrong. Part of the issue is some confusion regarding curly braces {}. They're used for two completely separate things, and you're mixing the two up here.
我对这个.dialog()函数并不完全熟悉，但你用.click()错了。部分问题是关于花括号的一些混淆{}。它们用于两个完全独立的事物，而您在这里将两者混为一谈。
The first use of curly braces is to indicate the interior of a block: the inside of a loop, the inside of a condition, the inside of a function. For example:
花括号的第一个用途是表示块的内部：循环内部、条件内部、函数内部。例如：
// some code in the global scope
function something()
{
// some different code within this function block
}
// function's done, we're back in global scope
The second use is JSON (JavaScript Object Notation) for an object or associative array, where properties or values are paired with names or keys in the following format:
第二种用途是用于对象或关联数组的 JSON（JavaScript 对象表示法），其中属性或值与名称或键按以下格式配对：
var jsonSomething = {
key1: value1,
key2: value2,
etc: etcvalue,
};
When you write $('#reg_link').click (function() {, you're opening up a function block with that curly brace, not starting a JSON. Thus, when you write open:(as if this werea JSON and you're setting the openkey), something is definitely not going to work the way you expect it to (I'm surprised... kind of... that there's no error, actually). What you need to write within those curly braces is the code of a function. In this case, it's probably just this:
当您编写 时$('#reg_link').click (function() {，您是在用大括号打开一个功能块，而不是开始一个 JSON。因此，当您编写open:（好像这是一个 JSON 并且您正在设置open密钥）时，某些事情肯定不会按照您期望的方式工作（我很惊讶......有点......没有错误，实际上）。您需要在这些花括号内编写的是函数代码。在这种情况下，它可能只是这样：
$('#reg_link').click (function() {
$('#register').load ('register.php');
});
In general, jQuery uses both of these versions a lot, and often mixes them together (functions that accept JSONs as arguments, or JSONs that include function callbacks as entries), so it's really important to understand which is which.
在一般情况下，jQuery使用这两个版本有很多，而且经常混合在一起他们（接受JSONs作为参数，或包括函数回调作为条目JSONs功能），可以这么理解是，它真的很重要。
EDIT: Some Googling re:.dialog()suggests that you'll also need to call it after .load(), which means that block should look something like this:
编辑：一些谷歌搜索 re:.dialog()建议您还需要在 之后调用它.load()，这意味着该块应如下所示：
$('#reg_link').click (function() {
$('#register').load ('register.php').dialog(/*argument(s) here*/);
});
Based on your own code, .dialog()actually is an example of a function that takes a JSON as an argument, so assuming that bit's correct, the full code is like this:
根据您自己的代码，.dialog()实际上是一个以 JSON 作为参数的函数示例，因此假设该位是正确的，完整代码如下：
$('#reg_link').click (function() {
$('#register').load ('register.php').dialog({
title: 'Register for LifeStor',
resizable: true,
autoOpen: false,
modal: true,
hide: 'fade',
width:350,
height:275,
});
});
