Могу ли я переместить div с помощью javascript и сохранить его возможность обратной передачи? - PullRequest
Новая
       16

Могу ли я переместить div с помощью javascript и сохранить его возможность обратной передачи?

4 голосов
/ 12 сентября 2011

У меня есть список флажков и ImageButton с событием OnClick на моей странице, щелчок ImageButton выполняет обратную передачу и прекрасно запускает событие OnClick

Проблема в том, что я хочу переместить divбыть первым потомком <form>, чтобы я мог отобразить его в модальном окне - я сделал это с помощью кода prototype.js ... 

document.observe("dom:loaded", function() {

    if ($$('.CheckboxListContainer').length>0) {    

        var modalShadow = document.createElement('div');
        modalShadow.setAttribute( "class", 'MyFormModalShadow' );

        modalShadow.style.width = document.viewport.getWidth() + 'px';
        modalShadow.style.height = document.viewport.getHeight() + 'px';

        var modalDiv = document.createElement('div');
        modalDiv.setAttribute( "class", 'MyFormModal' );

        var checkboxesDiv = $$('.CheckboxListContainer')[0];
        checkboxesDiv.remove();

        modalDiv.appendChild( checkboxesDiv );

        $$('form')[0].insert( {top: modalShadow} );
        $$('form')[0].insert( {top: modalDiv} );

        Event.observe(window, "resize", function() {
            if ($$('.MyFormModalShadow').length>0) {
                var modalShadow = $$('.MyFormModalShadow')[0]
                modalShadow.style.width = document.viewport.getWidth() + 'px';
                modalShadow.style.height = document.viewport.getHeight() + 'px';
            }
        });

    }

});

... который работаетхорошо, но ImageButton больше не вызывает мое событие OnClick при обратной передаче.

Есть ли способ переместить мой div в DOM и сохранить его способности обратной передачи?

Ответы [ 2 ]

4 голосов
/ 07 ноября 2011

Быстрый ответ, да. Длинный ответ ниже:

Если вы говорите о ASP.NET WebForms, имеет ли ваша форма атрибут runat="server" и идентификатор? Если вы используете стандартный HTML, атрибуты method и action установлены в форме?

Когда вы смотрите на источник HTML в вашем браузере, если форма выглядит так: <form action="/your_post_back_page.html" method="post">, тогда это все хорошо. Проверьте форму с помощью FireBug после того, как модальное диалоговое окно было добавлено , посмотрите, находится ли оно ВНУТРИ тегов формы. Если так, это хорошо.

У ваших флажков <input type="checkbox" /> установлен атрибут name? Кнопка вашего изображения <input type='submit' /> или <button>?

Если эти условия выполняются, возможно, к вашей кнопке подключено событие JavaScript (функция), которое возвращает false и / или проглатывает обратную передачу. События JavaScript onclick обычно должны возвращать true, чтобы отправить форму. Есть ли какие-либо данные в консоли ошибок вашего браузера?

Лично я все больше и больше нахожу, что чистый HTML (посредством ASP.NET MVC) превосходит старые школьные ASP.NET WebForms, и, по моему опыту, jQuery выглядит намного лучше, чем прототип. Использовать шаблоны jQuery для создания модального диалога было бы легко. Вы можете поменять местами библиотеки?

2 голосов
/ 25 сентября 2011

Прежде всего, мне не очень понятно, почему вам нужно переместить элемент, чтобы он стал первым дочерним элементом формы, чтобы сделать его модальным. Вы можете сделать любой div модальным независимо от того, где находится позиция в форме. Наиболее важной идеей является правильное управление абсолютным позиционированием.

Каждая обратная передача запускается функцией javascript __DoPostBack (), поэтому у вас не должно возникнуть проблем с перемещением элемента управления, если вы не изменили его идентификатор.

Одним из возможных решений вашей проблемы является вызов функции __DoPostBack () из клиентского кода в document.ready, и таким образом вы получаете полный контроль над отправкой формы.

...