Why does AJAX + GET refresh page?

Question

I try a lot of ways to prevent this, but nothing works which is puzzling.

This is the route for get.

router.get('/some', function(request, response, next) {
    console.log('> info: some');
    response.send({"hello": "world"});
}

This is the AJAX part hooked to onClick of an element.

  on_click = function(event) {
    //console.log(event.href);

    event = event || window.event;
    var target = event.target || event.srcElement;
    if (target.nodeType == 3)
        target = target.parentNode;

    target.preventDefault();
    target.stopPropagation();
    target.stopImmediatePropagation();

    event.preventDefault();
    event.stopPropagation();
    event.stopImmediatePropagation();

   $.ajax({
            type: 'GET',
            url: target.href,
            dataType: 'json',
            cache: false
        })
        .done(function(received_data) {
            $('.container').html('<h1>hello here</h1>');
            return false;
        })
        .fail(function(xhr, status, error) {
            alert(xhr.responseText);
            return false;
        });
   return false;
}

I expect to see "hello here". It works for a small test program. But when I add to my development code, it always show a white page with the JSON string of hello world.

So far I have tried the followings.

send string instead of JSON object directly
change dataType to text
set processData to false
preventDefault, stopPropagation, stopImmediatePropagation

I apology that I cannot upload the development code, but any guess why it is so stubborn to refresh the page?

BTW, for POST, it works perfectly.

This is the related element:

<a href="/some" onClick="on_click(this); return false;"></a>

*"...hooked to onClick of an element."* - What kind of element? Something causing a form submit, perhaps? Would help to see the HTML and the code surrounding the `$.ajax`. — Tyler Roper, Aug 03 '18 at 01:53
Possible duplicate of [prevent refresh of page when button inside form clicked](https://stackoverflow.com/questions/7803814/prevent-refresh-of-page-when-button-inside-form-clicked) — Phil, Aug 03 '18 at 01:56
From what you describe, it's *not* refreshing the page, but navigating to a new page. Since none of your code would cause the browser to navigate to `/some`, it must be that whatever you are clicking on (form? link?) is independently set up to perform a normal navigation. (Or else you have other code in your click handler, or another handler attached to the thing being clicked.) — apsillers, Aug 03 '18 at 02:01
Okay, based on that edit: you have a link set to navigate to `/some` and don't do anything to stop the navigation. (`return false` only stops the default behavior when you do it in a jQuery `.on` event handler.) `e.preventDefault()` should do it, but you must call it inside the synchronous code of the click handler, not inside the `.done` callback. Can you show a complete example that includes the definition of `on_click` and shows how you tried to use `preventDefault`? — apsillers, Aug 03 '18 at 02:10
You're calling `preventDefault` on `this` (the `` element) instead of the event object. I think you need to call `on_click(event)` not `on_click(this)` — apsillers, Aug 03 '18 at 11:32

score 1 · Accepted Answer · answered Aug 03 '18 at 01:55

1

Instead of

response.send({"hello": "world"});

Try

response.json({"hello": "world"});

Express docs: https://expressjs.com/en/api.html#res.json

Using response.json() correctly sets the Content-Type header in the response.

answered Aug 03 '18 at 01:55

pretzelhammer

13,874
15
47
98

Good advice but probably not the problem OP currently has – Phil Aug 03 '18 at 01:55
While this is unquestionably good practice, it is definitely not related to the problem the OP describes here. – apsillers Aug 03 '18 at 02:12

Why does AJAX + GET refresh page?

1 Answers1