Receive data in ajax call back from server without reloading and update current page. Express 4 and Node

Question

I have a form

form#form-reflow(action='/', method='post', 
                    onsubmit="docreflow()")
    input#textinp(type="text", name="textinp")
    input#submit(type="submit", name="submit")

that runs the following ajax client script to send the form data to Express.

function docreflow() {
    $('#form-reflow').on('submit', function (evt) {
        evt.preventDefault();

        $.post($('#form-reflow').attr( 'action' ),
            {  
                data: $("#textinp").val(),
                headers: {'X-Requested-With': 'XMLHttpRequest'},
                dataType: 'text',
                accepts: {
                            text: 'text/plain'
                        },
            })
            .done(function onDone (data) {
                            console.log("returned data is: ");
                            var data = JSON.parse(data).data;
                            console.log(data);
                            $('#form-reflow').html(data);
                        }
            )
            .fail(function onFail(err) {
                $('#form-reflow').html("<p> There Wazza Khold Dey</p>");
            });
    })
}

I want the server POST method to not reload the page.

Instead I want to know how can I receive the data on the client back as an html: this is jade btw.

div#ajaxMsg
    p It actually works!
    p Data is "#{data}"

from the controller method while it does something like

res.render('afterReload.jade', {some data...})

The page should not reload instead on ajax done it should just include that rendered html snippet here:

$('#form-reflow').html(data);

For eg, consider you would write an AJAX api to New york times the NYT api uses a jsonp to sendback with your defined Callback and I can just include that data in my current page.

Lets say I do a json rendering only. from the server I send the json data

and on success, the function will append that data on client side as I wish.

How can I do a 'No Reload' AJAX server to client response?

Feel free to ask me for further clarity.

According to this

changing the evt type to change doesn't affect the behaviour. it still reloads the page.

Both the current and POST page controller routes are defined to be '/'

UPDATE I have removed the html5 onsubmit event. no need:

  form#form-reflow(action='/', method='post')
    input#textinp(type="text", name="textinp")
    input#submit(type="submit", name="submit")

UPDATE #2

This does not solve my problem

even if I add a return false; at the end of the function call in that script,

the controller function:

function ajaxReq(req, res) {

            console.log(req.body);

            if (req.accepts('text')) {
                //#TODO: do something with this to doc reflow instead page reload
                res.json({data: req.body.textinp});
            }
        };

still reloads the page.

I disagree with @mccannf for pointing out that its a duplicate.

No it doesn't solve my problem. Try implementing an express app. where you render something at '/' with a form that posts with ajax to server and it should render back an html snippet from, say a .jade/template file, as an html chunk back to the successful ajax call and replace the current html in place of form.

That is the core of my problem.

UPDATE #3

I have been able to check this out and do a rendering but its not doing a partial rendering. Anyone knows how to use it in express 4 without loading the whole page and returning value to ajax call?

score 0 · Accepted Answer · answered Aug 11 '15 at 23:54

This solves my problem and now it is a single working page:

script(src="js/scr.js")

the view is this and something more:

form#form-reflow(action='/scr')
    input#textinp(type="text", name="textinp")
    input#submit(type="submit", name="submit")

scr is this without a function wrapper. for eg:

$('#form-reflow').submit(function (e) {
        e.preventDefault();
        var posting = $.post( $('#form-reflow').attr( 'action' ), 
            {data:$("#textinp").val()
            })
        posting.done(
            function onDone (val) {
                $("#form-reflow").removeAttr('action');
                $("#form-reflow")
                .html("<p> hello baby " + val.data + "</p>");
                });
        return false;
    });

the controller is :

some_controller = function some_controller(req, res) {


            if (req.accepts(['json', 'jsonp'])) {


                res.setHeader("Content-Type", "application/json");

                var json_data = {data: req.body.data,
                                };
                res.jsonp(json_data);

            }
        };
app.use('/', some_router);
some_router.post('/scr',some_controller);

So this works without rendering to a new page.

Receive data in ajax call back from server without reloading and update current page. Express 4 and Node

1 Answers1