Повторная отправка формы с использованием Ajax для истории back / fwd в jQuery Mobile - PullRequest
Новая
       17

Повторная отправка формы с использованием Ajax для истории back / fwd в jQuery Mobile

1 голос
/ 02 ноября 2011

Я изучаю пригодность управления историей jQM для мобильного веб-сайта моей организации. Частью нашего требования является то, что когда пользователь публикует форму, он публикует с помощью Ajax. Когда пользователь нажимает «назад», а затем «вперед» кнопки браузера, нам нужно повторно опубликовать форму, используя Ajax снова. Вот схема:

  1. [home.php: опубликовать в new.php] =>
  2. [new.php: опубликовать в list.php] =>
  3. [из list.php, дважды нажмите на home.php] =>
  4. [* home.php: нажмите fwd, выполняет запрос GET для new.php *] =>
  5. [* new.php: нажмите fwd, выполняет GET-запрос к list.php *]

[*] не то поведение, которое я хочу. Я хочу повторно отправить данные из шагов 1 и 2

На шагах 4 и 5 я хочу перехватить выполнение jQM в событии «pagebeforeload» (кажется, что это правильное место) и изменить data.options.data (чтобы включить сериализованные данные поста) и data.options .type (to POST) свойства объекта данных, который передается в обработчик событий. Тогда я бы позволил процессу загрузки страницы продолжить с измененными значениями. Это, я думаю, дало бы мне то поведение, которое я хочу.

Пока я вижу, что могу перехватить событие pagebeforeload и изменить значения с помощью обработчика событий ниже: 

$(document).bind("pagebeforeload",
    function( e, data ) {
        console.log(data.toPage);
        console.log(data.options);
        data.options.type = "POST";
        data.options.data = "edit=Hanford";
    }
);

Но пропущен кусок, как я могу «сохранить» информацию на шагах 1 и 2, чтобы при перехвате события pagebeforeload в 4 и 5 я мог знать, как изменить свойства «type» и «data» должным образом.

Я сделал прототип jquery / browser History, чтобы проиллюстрировать поведение, которое я хотел бы получить от jQuery Mobile. Код JavaScript: 

$(window).load(function() {
    //listen to the history popstate event
    $(window).bind('popstate',
    function(e) {
        if (e.originalEvent.state && e.originalEvent.state.type && e.originalEvent.state.type == "post") {
            //do an ajax post based on what is stored in history state
            $.post(e.originalEvent.state.path,
            e.originalEvent.state.data,
            function(data) {jaxer(data,'POST')});
        } else if (e.originalEvent.state !== undefined){
            //do an ajax get
            $.get(location.pathname,
            function(data) {jaxer(data,'GET')});
        }
    });
    //add event listeners
    addClickHandler();
});
function jaxer(data, msg) {
        if (msg) {console.log(msg+' request made using ajax');}
        $('#slider')[0].innerHTML = data;
        addClickHandler();
}

//hijax hyperlinks and form submissions
function addClickHandler() {
    $('a').click(function(e) {
        history.pushState({
            path: this.path
        },
        '', this.href);
        $.get(this.href,
       function(data) {jaxer(data,'GET')});
       e.preventDefault()
    });
    $('form').submit(function(e) {
        var formData = $(this).serialize();
        console.log('saving serialized form data into historyState: '+formData);
        history.pushState({path: this.action, data: formData, type: "post"},'',this.action);
        $.post(this.action,
        $(this).serialize(),
        function(data) {jaxer(data,'POST')});
        e.preventDefault();
    });
    //add the form submit button to the form as a hidden input such that it will get serialized
    $('form input[type="submit"]').click(function() {
        $(this.form).append("<input type='hidden' name='" + this.name + "' value='" + this.value + "'/>");
    });
    console.log("event handlers added to DOM");
};

Когда происходит инициируемый пользователем POST, я помещаю сериализованные данные POST в объект состояния истории. Затем, когда происходит событие popstate, я могу запросить у объекта состояния эту информацию. Если я найду его, я смогу выполнить ajax POST. Я хотел бы получить такую ​​же функциональность при обработке истории jQuery Mobile. Таким образом, я могу воспользоваться анимацией смены страницы и т. Д.

...