Dojo - request.post on button click - syntax error

Question

Three questions: 1) Is there any way to make this code more neater? Mainly to avoid so much nesting and quotes within quotes issues? 2) Any advice on parsing error below. I tested some code separately to mke sure it works. (see second code box below). 3) I'm getting "undefined" when I look at request.body in the NodeJS server program that handles this request. From what I read, I didn't need a body parser if the content-type was set to application/json.

<button id="updateStudentButton" data-dojo-type="dijit/form/Button"
        data-dojo-props="iconClass:'dijitIconTask', 
            onClick:function(){ 
               var url = '../student/' + dom.byId('studentId').value; 
               var studId = dojo.byId('studentId').value;
               dom.byId('studentFeedback').value += 
                    'updateStudentButton clicked studentID=' + studId + '\n'; 
               var firstname = dom.byId('studentFirstname').value;
               var lastname  = dom.byId('studentLastname').value;

               var postBody = JSON.parse(
                            '{ \"data\": {' + 
                            '  \"firstname\": "' +  firstname + '\",' +  
                            '  \"lastname\": "'+ lastname + '\"' + 
                            '},' + 
                            '\"headers\": { ' + 
                            ' \"Content-Type\": \"application/json\" ' + 
                            '}}'
                            );
               dom.byId('studentFeedback').value += 'postBody=' + postBody + '\n'; 
               require(['dojo/request'], function(request){
                  // AJAX Post the data to the server
                  request.post(url, postBody
                    ).then(function(response){
                        dom.byId('studentFeedback').value += response + '\n';
                        // parse and return data in text boxes
                        var respJSON = JSON.parse(response);
                        var rowsAffected = respJSON.rowsAffected;
                        dom.byId('studentFeedback').value += 'rowsAffected=' + rowsAffected + '\n'; 
                        },
                        function(error){
                           dom.byId('studentFeedback').value += response;
                         }); 
                })

            }
            ">
            Update
</button>

I tested separatley in NodeJS to make sure quotes all work and saw the correct console.log:

               var firstname = 'John'; 
               var lastname  = 'Doe'; 

               var postBody = JSON.parse(
                            '{ \"data\": {' + 
                            '  \"firstname\": "' +  firstname + '\",' +  
                            '  \"lastname\": "'+ lastname + '\"' + 
                            '},' + 
                            '\"headers\": { ' + 
                            ' \"Content-Type\": \"application/json\" ' + 
                            '}}'
                            );
console.log ("postBody="); 
console.dir (postBody); 

Getting parsing error:

dojo/parser::parse() error Error: SyntaxError: Invalid or unexpected token in data-dojo-props='iconClass:'dijitIconTask', 
                    onClick:function(){ 
                       var url = '../student/' + dom.byId('studentId').value; 
                       var firstname = dom.byId('studentFirstname').value;
                       var lastname  = dom.byId('studentLastname').value;

                       var postBody = JSON.parse(
                                    '{ \'
    at Object.construct (parser.js.uncompressed.js:401)
    at Object.<anonymous> (parser.js.uncompressed.js:190)
    at Object.map (dojo.js:8)
    at Object._instantiate (parser.js.uncompressed.js:184)
    at parser.js.uncompressed.js:893
    at _2f8 (dojo.js:8)
    at Promise.then._305.then (dojo.js:8)
    at Object.parse (parser.js.uncompressed.js:890)
    at Object._parse (html.js.uncompressed.js:301)
    at Object.onEnd (html.js.uncompressed

Answer 1

The way to avoid quotes within quotes issue is to have your onClick javascript code inside <script></script> tags.

Below a modified version of your code that works Ok in my environment. The request activates the error callback as I don't have the server handling side.

See the documentation here for the declarative details (use of data-dojo-event), and here for the request details.

For the request, I have stringified the data, as this is what I do in my application (php on the server side). The documentation says it can be a string or object, you may want to try sending the data object, depending on what your server environment expects.

Rgds, jc

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Neal Walters stask overflow test</title>
        <link rel="stylesheet" href="dojo-release-1.12.2-src/dijit/themes/claro/claro.css" media="screen">

    </head>
    <body class="claro">
        <button type="button" id="updateStudentButton" data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'dijitIconTask'">
            <span>update</span>
            <script type='dojo/on' data-dojo-event='click'>
                    var dom = require('dojo/dom');                  
                    var url = '../student/' + dom.byId('studentId').value; 
                    var studId = dom.byId('studentId').value;
                    dom.byId('studentFeedback').value += 'updateStudentButton clicked studentID=' + studId + '\n'; 
                    var firstname = dom.byId('studentFirstname').value;
                    var lastname  = dom.byId('studentLastname').value;
                    var data = {firstname: firstname, lastname: lastname};
                    //dom.byId('studentFeedback').value += 'postBody=' + postBody + '\n'; 
                    require(['dojo/request'], function(request){
                    // AJAX Post the data to the server
                        request.post(url, {data: JSON.stringify(data), method: 'POST', handleAs: 'json'}).then(
                            function(response){
                                dom.byId('studentFeedback').value += JSON.stringify(response) + '\n';
                                // parse and return data in text boxes
                                var rowsAffected = response.rowsAffected;
                                dom.byId('studentFeedback').value += 'rowsAffected=' + rowsAffected + '\n'; 
                            },
                            function(error){
                                dom.byId('studentFeedback').value += error;
                             }
                        ); 
                    });
            </script>
        </button><p>
        <form>
            Student feedback: <input id="studentFeedback"><p>
            Student first name: <input id="studentFirstname"><p>
            Student last name: <input id="studentLastname"><p>
            Student id: <input id="studentId"><p>
        </form>
        <script src="dojo-release-1.12.2-src/dojo/dojo.js"  data-dojo-config="async:true"></script>
        <script type="text/javascript">
            require(["dojo/parser", "dijit/form/Button", "dojo/domReady!"],
            function(parser){
                parser.parse();
            });
        </script>
    </body>
</html>

Answer 2

data-dojo-props="iconClass:'dijitIconTask'

don't you need to end with "?

data-dojo-props="iconClass:'dijitIconTask'"

You can better the way you are creating JSON ex:

var json={};
json.name="Test";
json.age="23"

when you print json (JSON.stringify(json)), you will see

 {
    "name":"Test",
    "age":"23"
   }