window.open template in django, используя chrome

Question

Прочитав все в Интернете, я больше не уверен, в чем проблема, и я был бы признателен за помощь. Благодарю.

У меня есть три разных формы, которые пользователь заполняет, и я поместил диалоговое окно jQuery UI, которое появляется при отправке формы. Я пытаюсь, чтобы «следующая» кнопка перемещала пользователя от текущей страницы к следующему шаблону, но не смогла выполнить эту работу. Я получаю ошибки в Chrome, которые говорят «неожиданный токен». на моей строке window.open тоже, и я попытался использовать переменные, чтобы установить его вместо этого, и попробовал различные вызовы ajax, но ничего не работает.

Вот мой URL:

url(r'^campers/',campers, name="campers"), 

А вот мой JavaScript:

$("#vehiclebutton").click(function(e){ 
     e.preventDefault(); 
     $('<div></div>').appendTo('#vehicle_message') 
      .html('<div><h3> Next, tell us about your sleeping arrangements. </h3></div>') 
      .dialog({ 
       title: "Confirm", 
       width: 500, 
       height: 300, 
       modal: true, 
       resizable: false, 
       show: { effect: 'drop', direction: "left" }, 
       hide: {effect:'drop', direction:'left'}, 
       buttons: { 
        Next: function() { 
         $.ajax({ 
          window.location.href('http://127.0.0.1:8000/campers') 
          $(this).dialog("close"); 
         }) 
       } 

      } 
     }) 
    }) 
}); 

Answer 1

Я предлагаю поправку к вашему vehiclebutton обработчик щелчка:

$(function() { 
 
    $("#vehiclebutton").click(function(e){ 
 
    e.preventDefault(); 
 
    var obj = null; 
 
    $('<div></div>').appendTo('#vehicle_message') 
 
    .html('<div><h3> Next, tell us about your sleeping arrangements. </h3></div>') 
 
    .dialog({ 
 
     title: "Confirm", 
 
     width: 500, 
 
     height: 300, 
 
     modal: true, 
 
     resizable: false, 
 
     show: {effect: 'drop', direction: "left"}, 
 
     hide: {effect: 'drop', direction: 'left'}, 
 
     buttons: [{ 
 
     text: 'Next', 
 
     click: function() { 
 
      var data = ""; 
 
      obj = $(this); 
 
      $.ajax({ 
 
      url: 'http://127.0.0.1:63342/campers', 
 
      data: data, 
 
      method: "POST", 
 
      dataType: 'html', 
 
      }).done(function(data, textStatus, jqXHR) { 
 
      obj.dialog("close"); 
 
      }).fail(function(jqXHR, textStatus) { 
 
      obj.dialog("close"); 
 
      }) 
 
     } 
 
     }] 
 
    }); 
 
    }); 
 
});

<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/> 
 
<script src="http://code.jquery.com/jquery-1.11.3.js"></script> 
 
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script> 
 

 
<button id="vehiclebutton">Click Me</button> 
 
<p id="vehicle_message"></p>

Answer 2

Хорошо, вот что, наконец, сработало. Я не уверен, если есть некоторые ненужные части этого кода, но, основываясь на вышеуказанных и на других частях Интернета, и документы Django ответы, я кусочкам это вместе:

1. Я получил Chrome расширение, которое позволяет использовать перекрестный поиск сайта.

2. Я положил куки csrf на Django docs.

3. Я добавил заголовок ajax к самому вызову ajax.

Все это довольно простой, но я не использовал Аякса много, а не в сочетании с Django на всех, и вот мой рабочий код. Если бы его можно было улучшить с помощью изменений, я бы с удовольствием узнал.

$(function() { 
     $("#profilebutton").click(function(e){ 
     e.preventDefault(); 
     var obj = null; 
     $('<div></div>').appendTo('#profile_message') 
     .html('<div><h3> Next, tell us about how you\'re getting here. </h3></div>') 
     .dialog({ 
      title: "Confirm", 
      width: 500, 
      height: 300, 
      modal: true, 
      resizable: false, 
      show: {effect: 'drop', direction: "left"}, 
      hide: {effect: 'drop', direction: 'left'}, 
      buttons: [{ 
      text: 'Next', 
      click: function() { 
       var data = ""; 
       obj = $(this); 
       $.ajax({ 
       method: "POST", 
       beforeSend: function(xhr, settings) { 
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) { 
         xhr.setRequestHeader("X-CSRFToken", csrftoken); 
        } 
       }, 
       data: data, 
       dataType: 'html', 
       }).done(function(data, textStatus, jqXHR) { 
       window.location.href = '/vehicle/'; 
       obj.dialog("close"); 
       }).fail(function(jqXHR, textStatus) { 
       obj.dialog("close"); 
       }) 
      } 
      }] 
     }); 
     }); 
    });