Ajax request without push.js

Question

I'm using Ratchet 2 to build an app. I'm trying to make a simple ajax call and get the response like so

function tryLogin() {
var hxr;

if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

xhr.open("POST", "absolutePathToMyScript");
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        var obj = JSON.parse(xhr.responseText);
        console.log(obj);
        //spinner.classList.remove("active");
    }
}

var data = {
    login: document.querySelector('#loginForm input[name="login"]').value,
    pwd: document.querySelector('#loginForm input[name="pwd"]').value
};

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("login=" + data.login + "&pwd=" + data.pwd);

}

When I click on my button that fire tryLogin() the ajax call is well executed but the page is reloaded. I assume that it is from push.js

Is there any solution to ignore push.js on an ajax call ?

Answer 1

Have you tried putting the data-ignore="PUSH" attribute on the button that is firing your javascript event? Seems like that should work, you may also be able to look at PUSH.js and just toggle that options off for your request. You can get the PUSH object from Window.Ratchet.push.

http://goratchet.com/components/#push

Answer 2

Ratchet.js turns your site into a Single Page Application. I think you have your inputs within a form field which is causing a post when the button is clicked, which is causing an unexpected page navigation. If this is the case, the solution would be to return false in your onclick event handler

button onclick="tryLogin();return false;">Try Login</button>

example