jQuery реализация диалога Please Wait - проблема, специфичная для сафари - PullRequest
Новая
       12

jQuery реализация диалога Please Wait - проблема, специфичная для сафари

2 голосов
/ 12 декабря 2011

Моя цель - отобразить немодальное диалоговое окно jquery-ui, в котором будет отображаться сообщение «Пожалуйста, подождите» вместе с анимацией загрузки.Это диалоговое окно будет отображаться на странице, с которой идет пользователь, и не будет продолжаться.У меня в основном это работает уже с кодом ниже.Однако Safari не будет отображать диалоговое окно «Пожалуйста, подождите».Firefox и Chrome отображают диалоговое окно и следующие ссылки.Safari просто следует за href, но не отображает диалог.

Если я попробую warnDefault ();или возврат ложный;в обработчике события click, затем Safari (и все браузеры) отобразит диалоговое окно «Пожалуйста, подождите», но, конечно, оно не будет следовать за href.Поэтому я хочу, чтобы поведение по умолчанию переходило по ссылке href, просто при переходе к href я хочу, чтобы диалоговое окно отображалось.

Я даже пытался сделать обработчик щелчков, и внутри выполнить функцию protectDefault (), затем открыть диалоговое окно и затем установить window.location или location.href, но Safari все равно будет просто следовать href и не отображатьдиалог.

У кого-нибудь есть другие идеи?

javascript: 

    $(document).ready(function() {

        // Register the pleaseWaitDialog element as a jquery-ui dialog widget with certain options set 
        $("#pleaseWaitDialog").dialog({
            autoOpen: false,
            buttons: {},
            open: function(event, ui) { $(".ui-dialog-title, .ui-dialog-titlebar-close").hide(); }, // hide the dialog title bar 
            resizable: false,
            show: {effect: 'fade', duration: 500},
            height: 120,
            width: 300
        });

        // When a link to add a meeting is clicked, then display the please wait dialog 
        $("a.addMeetingLink").click(function(e) {
            // But wait 5 seceonds before displaying the please wait dialog 
            setTimeout(function () {
                $("#pleaseWaitDialog").dialog("open");
            }, 5000);
        });

    });

HTML: 

<a href="/ripplemobile/trip/addmeeting/81/1/305/308" class="addMeetingLink">Add Meeting</a>

<div id="pleaseWaitDialog">
    <div>
        <p>Please wait</p>
        <img src="/ripplemobile/images/ajax-loader.gif" />
    </div>
</div>

1 Ответ

0 голосов
/ 12 декабря 2011

Быстрый пункт, отредактируйте эту функцию: 

// When a link to add a meeting is clicked, then display the please wait dialog 
        $("a.addMeetingLink").click(function(e) {

            // ADD

            e.preventDefault();

            // But wait 5 seceonds before displaying the please wait dialog 
            setTimeout(function () {
                $("#pleaseWaitDialog").dialog("open");
            }, 5000);
        });

Это должно решить вашу текущую проблему.

...