Принудительное обновление страницы после изменения ее содержимого.

Question

У меня есть кнопка, которая выступает в качестве индикатора, поэтому имеет два состояния; нажатие на него переключает состояние и переходит на следующую страницу.

Нажатие кнопки вызывает функцию JavaScript, которая обрабатывает это.

Изменив изображение кнопки "src", используя jQuery, я хочу, чтобы пользователь увидел изменение изображения, сделал паузу на долю секунды и только потом увидел следующую отображаемую страницу.

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

Поэтому я хочу, чтобы страница перерисовывалась в браузере до паузы. Все решения, которые я пробовал, обновляют страницу до ее состояния на сервере, и любые изменения, внесенные в нее в jQuery, теряются.

Есть ли способ заставить страницу или кнопку перекрашиваться, что будет учитывать изменения, которые я сделал в JavaScript/jQuery?

Answer 1

$("#YourButtonWhichTriggersChanges").click(function() {
    // page repaint code, image change, etc.

    setTimeout(function(){
        window.location.reload();
        // use window.location.href = "my/new/url.html";
        // or window.location.replace("my/new/url.html");  
        // to change the page instead of just reloading.
    }, 1000);
});

куда 1000 количество миллисекунд, которое вы хотите подождать перед обновлением страницы.

---

Изменить: я думаю, что вы хотите этот код вместо:

$("#ApproveButton").css('backgroundImage', 'url(\'img/but/proof/ApprovePageButton.png\')');

Дополнительные обратные косые черты находятся там, чтобы убрать одинарные кавычки в параметре url.

---

Другое редактирование: вот комбинация двух решений, которые я поставил, которые должны работать:

$("#ApproveButton").click(function() {
        // actually repaint the button's background image
        $(this).css('backgroundImage', 'url(\'img/but/proof/ApprovePageButton.png\')');

        // change the page after 1000 milliseconds have gone by.
        setTimeout(function(){
            window.location.reload();
            /* use window.location.href = "my/new/url.html";
             * or window.location.replace("my/new/url.html");  
             * to change the page instead of just reloading.
             */
        }, 1000);
    });