Использование Jquery для отображения модального сообщения «Пожалуйста, подождите» - PullRequest
3 голосов
/ 25 октября 2010

Можно ли заблокировать страницу, когда пользователь нажимает на ссылку, и включить ее только после того, как ответ вернется с сервера. Недавно у меня возникла проблема, когда на странице несколько раз нажимали ссылку, что приводило к двум одновременным изменениям.

Проблема заключалась в том, что страница позволяла многократную отправку. Я уже решил это на стороне сервера, используя Struts saveToken () и isValidToken (), чтобы предотвратить это снова. Это обеспечит получение нескольких отправленных сообщений, а второе не будет обработано.

Теперь проблема, с которой я столкнулся, заключается в том, что если пользователь дважды щелкает ссылку отправки, первый запрос действителен, а второй - нет. Пользователь перенаправляется на страницу с ошибкой, не понимая, что первый запрос прошел.

Я думаю, что решение состоит в том, чтобы заблокировать / отключить ссылку, когда она нажата. Я знаю, что вы можете использовать javascript, чтобы отключить ссылку, но я хотел бы использовать одно из модальных диалоговых окон AJAXy, которые я видел на нескольких сайтах. Обычно при нажатии на ссылку появляется всплывающее диалоговое окно с сообщением «Пожалуйста, подождите ..». Фон исчезает, и пользователь ничего не может сделать, пока ответ не вернется с сервера. Большинство примеров, которые я вижу, похоже на Ajax. Моя страница не использует Ajax.

Какой самый простой способ получить это модальное диалоговое окно? Я искал вокруг и есть несколько плагинов, доступных для JQuery, но, учитывая, что я новичок в этом, я не совсем понимаю это. Может кто-нибудь показать мне пример того, как сделать это с помощью Jquery?

Спасибо

EDIT

Возьмем, к примеру,

            //CONTROLLING EVENTS IN jQuery
            $(document).ready(function(){

                //LOADING POPUP
                //Click the button event!
                $("#button").click(function(){
                    //centering with css
                    centerPopup();
                    //load popup
                    loadPopup();
                });

                //CLOSING POPUP
                //Click the x event!
                $("#popupContactClose").click(function(){
                    disablePopup();
                });
                //Click out event!
                $("#backgroundPopup").click(function(){
                    disablePopup();
                });
                //Press Escape event!
                $(document).keypress(function(e){
                    if(e.keyCode==27 && popupStatus==1){
                        disablePopup();
                    }
                });

            });

Я бы хотел, чтобы эти события запускались при нажатии на ссылку. Сама ссылка указывает на другую функцию JavaScript. т.е.

<a href="javascript:submitform();">confirm</a>

Как я могу вызвать биты jquery внутри функции javascript submitform ()? Предпочтительнее после завершения submitform ().

Ответы [ 3 ]

7 голосов
/ 25 октября 2010

Взгляните на jQuery.dialog ( веб-сайт ), он позволяет вам показывать внутри-страницы в виде модов или, в качестве альтернативы, даже получать ваш контент с другой страницы.

<div id="progress" class="dialogContent" style="text-align: left; display: none;">
<img src="../../global/style/default/images/ajax-loader.gif" style="margin-right: 5px;" />
<asp:literal id="literalPleaseWait" runat="server" text="Please wait..." />
</div>

и затем вызовите функцию ниже, чтобы отобразить диалоговое окно

 function ShowProgressAnimation() {
    var pleaseWaitDialog = $("#progress").dialog(
    {
    resizable: false,
    height: 'auto',
    width: 150,
    modal: true,
    closeText: '',
    bgiframe: true,
    closeOnEscape: false,
    open: function(type, data) {
    $(this).parent().appendTo($("form:first"));
    $('body').css('overflow', 'auto'); //IE scrollbar fix for long checklist templates
    }
    });
    }
1 голос
/ 25 октября 2010

Внутри вашего submitform () после выполнения form.submit () вызовите centerPopup () и loadPopup () напрямую, чтобы показать всплывающее окно

1 голос
/ 25 октября 2010

Вы можете наложить абсолютно позиционированный слой div с прозрачностью, которая захватывает любые щелчки мыши, предотвращая реакцию любых объектов на странице.

Затем еще один div поверх этого для отображения сообщения.

Есть несколько библиотек js, которые делают такие вещи, многие из которых основаны на jQuery, поэтому посмотрите на модальное всплывающее окно jquery.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...