Rendering the response of a jquery POST request in NodeJs

Question

Functionality:

The functionality of this code is to update user details on the user Profile-page.

Code:

Profile.ejs

<script>
(function() {
    function toJSONString( form ) {
        var obj = {};
        var elements = form.querySelectorAll( "input, select, textarea" );
        for( var i = 0; i < elements.length; ++i ) {
            var element = elements[i];
            var name = element.name;
            var value = element.value;

            if( name ) {
                obj[ name ] = value;
            }
        }

        return JSON.stringify( obj );
    }

    document.addEventListener( "DOMContentLoaded", function() {
        var form = document.getElementById( "test" );
        form.addEventListener( "submit", function( e ) {
            e.preventDefault();
            var json = toJSONString( this );
            //alert(json);
            $.ajax({
              type: "POST",
              url: "/profile",
              data: json,
              success: function(){},
              dataType: "json",
              contentType : "application/json"
            });

        }, false);

    });

})();
</script>
<div id="res">
    <h4>
        <%= status %>
    </h4>
</div>
<form id="test" action="/profile" method="post">    
    <input type="text" name="name" id="name" value=""/>
    <input type="text" name="about" id="about" value=""/>
    <input type="text" name="hobbies" id="hobbies"  value=""/>
    <input type="submit" value="send" class="btn btn-primary btn-block"/>
</form>

Index.js

router.get('/profile', loggedin, function(req, res, next) {
  res.render('profile', {status:''});
});

router.post('/profile', loggedin, function(req, res, next) {
  res.render('profile', {status:'Changes Updated'});
});

Expected-Outcome:

Once the post request with all the details are sent, the <div id="res"> should contain the text Changes Updated.

Actual-Outcome:

Once the post request is sent, 200 OK response is observed and the response packet has the text Changes Updated. However, the browser does not reflect it. The new response received is not rendered.

Kindly assist in resolving this issue, as I'm fairly new to this( And the entire code is put together from a lot of places ). Also, any extra information, or good reads on the subject would be much appreciated

Possible duplicate of Accessing ajax POST response in javascript — Dan O
– Dan O, Commented Apr 19, 2019 at 15:43
there are many existing questions and answers regarding response data from$.ajax, which of them have you tried and why are they not sufficient to resolve your problem? — Dan O
– Dan O, Commented Apr 19, 2019 at 15:46

Lord Elrond · Accepted Answer · 2019-04-22 03:29:03Z

0

You will need to use the jQuery html attribute to insert the desired results into the div. ejs is used for creating templates before your page has loaded, and not for inserting ajax data after the page has loaded.

Try this:

$(document).ready(function() { //the jQuery equivalent

    var form = $('#test');
    form.on('submit', function(e) {
        e.preventDefault();
        var json = toJSONString(this);
        $.ajax({
          type: "POST",
          url: "/profile",
          data: json,
          success: function(data) {
            console.log(data);
            $('#res').html(data); //insert "data" into the inner html of the div
          },
          dataType: "json",
          contentType : "application/json"
        });

    }, false);
  });
});

answered Apr 22, 2019 at 3:29

Lord Elrond

16.5k8 gold badges55 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Wisam Ahmed Over a year ago

Thanks for the responses. When I said fairly new I meant few hours of experience( so apologies in advance, if the quality of the doubts are sub-par ). I get the required Outcome if I omit the JSON Converting jquery functions. I require the exactly the same events but with JSON data. I believe, when calling preventDefault() function some other events apart from sending FormData to the server is disabled. I'd like to invoke all the same events except the data sent has to be in JSON format.

Wisam Ahmed Over a year ago

@Dan:Thanks for the responses. When I said fairly new I meant few hours of experience( so apologies in advance, if the quality of the doubts are sub-par ).

Collectives™ on Stack Overflow

Rendering the response of a jquery POST request in NodeJs

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related