So I haven an interesting issue that I hope other have stumbled on (and solved) before.
I have set up a 'change my password' option for users on this particular application where if a user were to forget their password they can request to change it. I send them an email with a hash embedded in a link that directs them to a simple 'change password' screen.
Once the user clicks on the update button - I call the appropriate controller-action via ajax and the server processes various things such as updating the password, deleting the token and redirecting the user.
Here be the ajax tied to the update button:
updatePassword: function() {
$.ajax({
url: '/side-panel/update-password',
dataType: 'json',
type: 'post',
data: {
token: $('input[name=token]').val(),
id: $('input[name=id]').val(),
new_password: $('input[name=new-password]').val()
},
beforeSend: function() {
kts.show_loader('show');
},
success: function(data) {
kts.show_loader('hide');
console.log(data);
}
});
}
The first time the user were to click the button - the console shows this:
Notice the URL below and the Network entries in the upper left:
"http://code.kenstowell.local/".
It makes a call to the appropriate action, but returns a 302, and then redirects to the base URL of the site.
The second time the user were to click the button it calls the controller-action as it should.
Notice the URL here: "http://code.kenstowell.local/index/update-password"
The real problem here is, on the first call/button click - the server-side code actually get's processed, but the XHR object returns a failure.
I apologize if this is information overload. Please let me know if you need more code/samples provided. Any help appreciated.
Ken