我使用以下David Walsh的灯箱覆盖来创建一个覆盖,该覆盖来自页面上多个按钮的点击功能。
http://davidwalsh.name/facebook-lightbox
我遇到的问题是,这个代码是为每个调用它的页面都有一个输入id而构建的。我需要这样做,当在phpwhile循环中创建多个按钮时,它会创建一个带有while循环的对象id的隐藏输入字段和一个调用javascript的按钮输入字段。
这是我想在每次while循环中创建的表单对象类型:
<input type="hidden" id="personName" value="postToAjax" />
<input type="button" value="Add a new person" id="add" class="submit" />
这是它调用的Javascript:
<script>
window.addEvent('domready',function(){
document.id('add').addEvent('click',function(){
ajaxFace = new LightFace.Request({
url: 'ajax.php',
buttons: [
{ title: 'Add A Person', event: function() {
alert('hi!');
},
color: 'green' },
{ title: 'Cancel', event: function() { this.close(); } }
],
request: {
data: {
day: document.id('personName').value || 'PersonWhoIsTooCoolToGiveTheirName'
},
method: 'post'
},
title: 'Add a name to this person'
}).open();
});
});
</script>
一些标题内容:
<link rel="stylesheet" href="../Assets/lightface.css" />
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools.js"></script>
<script src="../Source/LightFace.js"></script>
<script src="../Source/LightFace.Request.js"></script>
<!-- this was the code that in the html doc to begin with in DW's code -->
<script src="../Source/addpersonlightbox.js"></script>
我希望ajax将object_id发布到接收它的php文件中,然后我应该能够在该php脚本中执行其他所有操作。
我想我需要把js中的document.id改成带有类或rel的东西。我很想在这里放些什么。
request: {
data: {
day: document.id('personName').value || 'PersonWhoIsTooCoolToGiveTheirName'
},
method: 'post'
},
此外,我认为我需要更改这两个输入字段,以便在id之外添加一些东西来放入php变量。比如id="personName",但我不知道它应该是类、del还是其他什么。然后我不知道如何使用javascript。
提前感谢!
<input type="hidden" id="personName" value="postToAjax" />
<input type="button" value="Add a new person" id="add" class="submit" />
好吧。那么,使用类-知道答案后为什么要问?:)
var attachLightFace = function() {
new LightFace.Request({
url: 'ajax.php',
buttons: [
{
title: 'Add A Person',
event: function() {
alert('hi!');
},
color: 'green'},
{
title: 'Cancel',
event: function() {
this.close();
}}
],
request: {
data: {
name: this.getPrevious().get("value").clean()
},
method: 'post'
},
title: 'Add a name to this person'
}).open();
};
document.getElements('button.submit').addEvent('click', attachLightFace);
这将附加到所有类型为submit的按钮上,如果它们前面有一个输入,则会起作用,该输入的值将传递给请求。
这样做的缺点是占用了许多事件处理程序。您也可以使用类似的委派
document.id('container').addEvent('click:relay(button.submit)', attachLightFace)
-它将添加一个事件来处理您拥有或将来可能拥有的任何按钮。