在jquery模式对话框中加载外部php文件onclick

Question

我想在用户点击一个链接时打开一个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'); 
     }); 
     }); 
    }); 

和这个网站：

<div id="register"></div> 

被设置为显示：无在.css文件。

而且上，一个形式里面，链路称为：

<td><font size="2">Not registered? <a href="#" name="reg_link">Sign-Up!</a></td> 

（我会改变表的div）。

我没有得到任何此代码的错误，但没有任何反应，当我点击链接。我从其他堆栈溢出帖子中获得了大部分上述内容。我错过了什么吗？表格html是否干扰？

问候......

Answer 1

在你的链接

<a href="#" name="reg_link">Sign-Up!</a> 

你有name="reg_link"应该是id="reg_link"代替，即

<a href="#" id="reg_link">Sign-Up!</a> 

所以它会与下面的代码

$('#reg_link').click(function(e) { 
    e.preventDefault(); 
    $('#register').load('register.php'); 
}); 

要使它成为一个对话框工作，你可以使用

$(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'); 
     }); 
     }); 
}); 

Just an example。

Answer 2

创建对话框加载.load()的页面替换容器的新内容

你的点击处理程序有语法错误的内容后，它看起来像你路过的组合一个函数和一个对象作为参数，它应该是一个正常的函数。像

$('selector').click (function() { 
    //code 
}); 

而且你<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> 

Answer 3

我不完全熟悉.dialog()功能，但你使用.click()错误。部分问题是关于大括号{}的一些混淆。他们用于两个完全分开的东西，而你在这里混合两个。

第一次使用花括号是指示块的内部：循环的内部，条件的内部，函数的内部。例如：

// some code in the global scope 
function something() 
{ 
    // some different code within this function block 
} 
// function's done, we're back in global scope 

的第二个用途是JSON（JavaScript对象符号），用于一个对象或关联数组，其中属性或值与以下列格式名称或密钥配对：

var jsonSomething = { 
    key1: value1, 
    key2: value2, 
    etc: etcvalue, 
}; 

当你写了$('#reg_link').click (function() {，你打开一个带大括号的功能块，而不是启动JSON。因此，当你写open:（好像这个是一个JSON并且你设置了open键），某些东西肯定不会按照你期望的方式工作（我很惊讶......有点......） 。实际上没有错误）。你需要在这些大括号内编写的是函数的代码。在这种情况下，它可能只是这样的：

$('#reg_link').click (function() { 
    $('#register').load ('register.php'); 
}); 

一般来说，jQuery使用这两个版本很多，常常将它们混合在一起（函数接受JSONs作为参数，或JSONs包括函数回调为条目），所以了解哪个是哪个是非常重要的。

编辑：谷歌搜索的一些重：.dialog()表明您还需要​​后调用它，这意味着该块应该是这个样子：

$('#reg_link').click (function() { 
    $('#register').load ('register.php').dialog(/*argument(s) here*/); 
}); 

根据你自己的代码，.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, 
    }); 
});