django中的window.open模板，使用chrome

Question

After reading everything on the internet, I'm no longer sure what the problem is, and I'd appreciate some help. Thanks.

I have a three different forms that the user is filling out, and I've put a jQuery UI dialog box in that comes up when the form is submitted. I'm trying to have the "next" button navigate the user away from the current page to the next template, but have not been able to make this work. I'm getting errors in Chrome that say "unexpected token ." on my window.open line, too, and I've tried using variables to set it instead, and have tried various ajax calls, but nothing seems to work.

Here's my url:

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

And here's my 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

I propose a correction to your vehiclebutton click handler:

 $(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

Ok, here's what finally worked. I'm not sure if there are some unnecessary parts to this code, but based on the answers above and on other parts of the internet, and the Django docs, I pieced this together:

1. I got the Chrome extension that allows for cross origin site resouce sharing.

2. I put in the csrf cookies per the Django docs .

3. I added the ajax header to the ajax call itself.

All of this is pretty basic, but I haven't used ajax much, and not in conjunction with Django at all, and here's my working code. If it could be improved by edits, I'd love to know.

$(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");
              })
            }
          }]
        });
      });
    });