使用这种Facebook风格的Lightbox-请求AJAX-在一个页面上覆盖多个按钮

Using this Facebook style Lightbox - request AJAX - overlay with multiple buttons on a page

本文关键字：一个 按钮 覆盖 Facebook 风格 AJAX- 请求 Lightbox-      更新时间：2023-09-26

我使用以下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)-它将添加一个事件来处理您拥有或将来可能拥有的任何按钮。

相关文章：