Мастер форм Django с Ajax

Я пытаюсь использовать мастер форм через ajax. У меня есть отдельный шаблон, который сначала загружается, когда пользователь хочет начать использовать форму. А потом перезагружается через ajax до завершения.

Первый вызов ajax для загрузки формы:

$('#create-modal').click(function(){
   $.ajax({
        type: "GET",
        url:"/create/",
        data:{
            'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()
        },
        success: function(data){
            $('#creation').html(data);
        },
        dataType: 'html'
    });
});

Вот вызов ajax для перезагрузки отправки:

$('#creation').on('submit', '#creation-form' , function(e){
    e.preventDefault();
    var fd = new FormData($('#creation-form').get(0));
    $.ajax({
      url: '/create/',
      data: fd,
      type: "POST",
      success: function(data){
            $('#creation').html(data);
          },
      processData: false,
      contentType: false
    });
});

Форма может быть заполнена и сохранена в базе данных просто отлично, но кнопка предыдущего шага не работает, она просто продолжает переходить к форме, когда я нажимаю на нее.

<button class="btn btn-primary" aria-hidden="true" type="submit" name="wizard_goto_step" value="{{ wizard.steps.prev }}">Previous</button>

и все остальные варианты, последний, первый...

Я не включаю весь код, потому что, когда я вызываю URL-адрес непосредственно из браузера, предыдущая кнопка работает нормально. То есть, когда я называю это формой /создать/, а не URL-адресом, где находится ajax.

Заголовки запросов как для ajax (не работает), так и без ajax (работает). http://snipt.org/AOC9.


django ajax formwizard django-formwizard
person user1846407    schedule 25.07.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я никогда не использовал FormData, поэтому я не знаю, является ли это источником проблемы или нет. В любом случае, я бы рекомендовал вам изменить код примерно так:

$('#creation').on('submit', '#creation-form' , function (e) {
    e.preventDefault();

    var post_data = $(this).serialize();
    console.log('POST data:' + post_data);

    $.ajax({
      url: '/create/',
      data: post_data,
      type: "POST",
      success: function (resp) {
          console.log(resp);
          $('#creation').html(resp);
      },
      error: function (jqXHR, textStatus, errorThrown) {
          console.log(jqXHR);
          console.log(textStatus);
          console.log(errorThrown);
      }
      processData: false,
      contentType: false
    });
});

Если это не работает, проверьте консоль, и вы сами поймете, почему она не работает.

person Hieu Nguyen    schedule 25.07.2013
comment
Спасибо. Может быть, я новичок в этом, чтобы понять проблему. Я думаю, что я что-то упускаю, форма второго шага отображает две кнопки, одну вперед и одну назад. Но мой jQuery не имеет никакого значения для отправки (я также пытался сделать вторую функцию «on» со второй функцией). Я сравниваю обе формы, загруженные с помощью ajax, и одну напрямую из URL-адреса, и оба они одинаковы. Как предыдущая кнопка сообщает Django, что я хочу? Я не получаю его даже через прямой URL, без использования ajax. Все данные поста одинаковые. - person user1846407; 26.07.2013
comment
Поэтому я бы рекомендовал вам использовать событие «щелчок», а не «отправить». Вы можете добавить идентификатор к своей кнопке <button id="js-nextBtn" class="btn btn-primary" ...>Next</button>, а затем в jQuery использовать $('#creation').on('click', '#js-nextBtn', function (e) .... В остальном должно быть примерно так же. - person Hieu Nguyen; 26.07.2013
comment
Это тоже не работает. Может быть, проблема в данных сеанса, потому что они не обновляются? - person user1846407; 26.07.2013
comment
Проверьте консоль на наличие ошибок. Затем проверьте вкладку «Сеть» в инструментах разработчика Firebug/Chrome, чтобы увидеть, действительно ли ajax отправлял какие-либо данные. - person Hieu Nguyen; 26.07.2013
comment
Нет ошибки, и да, ajax отправляет данные. Это проблема только с предыдущей кнопкой, потому что вы можете заполнить всю форму и успешно создать объект в базе данных. Здесь я скопировал оба заголовка запроса, первый работает, второй (ajax) нет. snipt.org/AOC9. - person user1846407; 26.07.2013
comment
Не могли бы вы отредактировать свой вопрос и добавить код обоих запросов ajax? - person Hieu Nguyen; 26.07.2013
comment
Отредактировано. Запрос ajax при нажатии кнопки «Предыдущий» точно такой же, но первая строка, как вы пишете в предыдущем комментарии. - person user1846407; 26.07.2013