Question

I’m using the following light-box overlay by David Walsh to create an overlay that comes off a click function for multiple buttons on the page.

http://davidwalsh.name/facebook-lightbox

The problem I have is that this code is built for having one input id per page that calls it. I need to make it so when multiple buttons are created in a php while loop, then it creates both a hidden input field with the object id of that while loop and a button input field that calls the javascript.

This is the type of form objects I would like to create in each time through the while loop:

<input type="hidden" id="personName" value="postToAjax" /> 
<input type="button" value="Add a new person" id="add" class="submit" />

Here is the Javascript that it calls:

<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>

Some Header things:

<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>

I want the ajax to post up the object_id to the php file receiving it, then I should be able to do everything else within the that php script.

I think I would need to change the document.id in the js to something with a class or a rel. I would love some help on what to put here.

    request: { 
                data: { 
                    day: document.id('personName').value || 'PersonWhoIsTooCoolToGiveTheirName' 
                },
                method: 'post'
            },

Additionally I think I need to change the two input fields to have something besides id to put a php variable in. Like id=”personName”, but I don’t know if it should be a class or a del or something else. Then I don’t know how that would work with the javascript.

Thanks in advance!

<input type="hidden" id="personName" value="postToAjax" /> 
<input type="button" value="Add a new person" id="add" class="submit" />

Answer 1

well. use classes, then – why ask when you know the answer? 🙂

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);

this will attach to all buttons with the type submit and will work if they are preceded by an input, the value of which will be passed on to the request.

downside to that is the footprint of many many event handlers. you can also use delegation like

document.id('container').addEvent('click:relay(button.submit)', attachLightFace) – which will add a single event to handle any buttons you have or may have in the future.