Использование этого стиля в стиле «лайтбокс» Facebook - запрос AJAX - наложение нескольких кнопок на странице - PullRequest
Новая
       31

Использование этого стиля в стиле «лайтбокс» Facebook - запрос AJAX - наложение нескольких кнопок на странице

1 голос
/ 05 марта 2012

Я использую следующее наложение лайтбокса Дэвида Уолша, чтобы создать наложение, которое отключается функцией щелчка для нескольких кнопок на странице.

http://davidwalsh.name/facebook-lightbox

Проблема, с которой я столкнулся, состоит в том, что этот код создан для того, чтобы иметь один входной идентификатор на страницу, которая его вызывает. Мне нужно сделать так, чтобы при создании нескольких кнопок в цикле php while он создавал как скрытое поле ввода с идентификатором объекта цикла while, так и поле ввода кнопки, которое вызывает 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-скрипте.

Я думаю, мне нужно изменить document.id в js на что-то с классом или 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" />

1 Ответ

0 голосов
/ 05 марта 2012

хорошо. Тогда используйте классы - зачем спрашивать, когда вы знаете ответ? :) 

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) - который добавит одно событие для обработки любых кнопок, которые у вас есть или могут быть в будущем.

...