Question

I’m trying to use Dojo to post to my server. The server is returning a JSON response (I have debugged it and know its returning a sensible value) but I’m just getting a ‘Syntax error’ in the Javascript console when it returns. Any ideas?

function submitStatusUpdate() {
    dojo.xhr.post({            
           form:"statusUpdateForm",
           handleAs: "json",
           load: function(data){
               alert('Saved with id ' + data.id);
           },
           error: function(err, ioArgs){
               // again, ioArgs is useful, but not in simple cases
               alert('An error occurred');
               console.error(err); // display the error
           }
    });     
}

I’ve also tried it like this

function submitStatusUpdate() {
    var posted = dojo.xhr.post({               
           form:"statusUpdateForm",
           load: function(data){
           },
           error: function(err, ioArgs){
               // again, ioArgs is useful, but not in simple cases
               console.error(err); // display the error
           }
    });     
    posted.then(function(response){
        alert('returned ' + response);
    });
}

But the response that gets printed out in my alert just seems to be the HTML for my entire page. I’m expecting a JSON object. I’m struggling to find a simple example that tells me how to submit a form, and then have a callback function that reads the response.

Thanks

EDIT (thanks to Richard for the guidance)

This is the working version.

<script language="Javascript">

dojo.require("dijit.form.Button");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.CheckBox");

function sendForm(){

  var form = dojo.byId("myform");

  dojo.connect(form, "onsubmit", function(event){
    // Stop the submit event since we want to control form submission.
    dojo.stopEvent(event);

    // The parameters to pass to xhrPost, the form, how to handle it, and the callbacks.
    // Note that there isn't a url passed.  xhrPost will extract the url to call from the form's
    //'action' attribute.  You could also leave off the action attribute and set the url of the xhrPost object
    // either should work.
    var xhrArgs = {
      form: dojo.byId("myform"),
      load: function(data){
        // As long as the server is correctly returning JSON responses, the alert will
        // print out 'Form posted. ' and then the properties and values of the JSON object returned
        alert("Form posted." + data);
      },
      error: function(error){
        // We'll 404 in the demo, but that's okay.  We don't have a 'postIt' service on the
        // docs server.
        alert("error");
      }
    }
    // Call the asynchronous xhrPost
    alert("Form being sent...");
    var deferred = dojo.xhrPost(xhrArgs);
  });
}
dojo.ready(sendForm);

</script>

This is (kind of) what my form looks like. This will work anyway (my real form is much bigger). Interestingly I had to change my normal [input type=”submit”…] tag into a [button…] to get it to work properly

<form method="post" id="theform" action="postIt">
    <input value="Some text" name="formInput" type="text"/>    
    <input name="checkboxInput" type="checkbox"/>
    <button id="submitButton" type="submit">Send it!</button>
</form>

Answer 1

A JavaScript syntax error on parsing an XMLHttpRequest reply usually indicates invalid data from the server. My favourite tool for monitoring XMLHttpRequest traffic is Firebug. It parses JSON so if there’s anything wrong, you’ll know immediately.

Once you’ve determined that the JSON data from the server is valid, have a look at the following example from the Dojo documentation. I think it does what you’re trying to do.