ajax call can't see what's wrong :S - php

Question

When i click the button to load the js file, nothing happens, i have testet the php file alone without ajax just pure php and that is working! so i am thinking that there's something wrong with this code here:
$(document).ready(function(){
$('#changePasswordNeededButton').click(function(){
$.post("http://example.com/change_password.php",
{
currentPassword : $('#currentPassword').val(),
newPassword : $('#newPassword').val(),
repeatNewPassword : $('#repeatNewPassword').val()
},
function(data){
if (data.result == 1) {
location.href = data.location;
}
}, "json" // get content which has been returned in json format
);
});
});
The HTML for this:
<div class='changePassword'>
<div id='changePasswordInner'>
<form>
<input id='currentPassword' type='password' name='currentPassword' placeholder='Nuværende adgangskode'>
<input id='newPassword' type='password' name='newPassword' placeholder='Ny adgangskode'>
<input id='repeatNewPassword' type='password' name='repeatNewPassword' placeholder='Gentag ny adgangskode'>
<input id='changePasswordNeededButton' type='button' name='changePasswordNeededButton' value='Skift adgangskode'>
</form>
<div id'errorChangePassword'></div>
</div>
</div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="../script/change_password.js"></script>
And my php:
if (isset($_POST['currentPassword']) && isset($_POST['newPassword']) && isset($_POST['repeatNewPassword']) {
$currentPassword = $_POST['currentPassword'];
$newPassword = $_POST['newPassword'];
$repeatNewPassword = $_POST['repeatNewPassword'];
$query = "SELECT * FROM user WHERE password = '$currentPassword'";
$result = $db->query($query);
while ($row = $result->fetch_assoc()) {
$password = $row['password'];
}
if ($password == $currentPassword) {
$update = "UPDATE user SET password = '$newPassword' WHERE password = '$currentPassword'";
$db->query($update);
$result = array(
'result' => 1,
'location' => 'index.php',
);
}
// return the result
echo json_encode($result);
die();
}
I hope that someone can see the error here?
Thanks..

Answer 1

Take a look at jQuery's $.post documentation to start. I would actually argue using $.ajax instead because of the additional features you get with it; mainly the ability to add callbacks for success and failure.
From jQuery's docs on AJAX:
var jqxhr = $.ajax( "example.php" )
.done(function() {
alert( "success" );
})
.fail(function(jqXHR, textStatus, errorThrown) {
// Add error thrown console.logs here like console.log(textStatus, errorThrown)
alert( "error" );
})
.always(function() {
alert( "complete" );
});
// Perform other work here ...
// Set another completion function for the request above
jqxhr.always(function() {
alert( "second complete" );
});

Answer 2

Check this line
'location' => 'index.php',
your code is not working for the extra , at the end of that line. Since your script is expecting json and receiving malformed json string.
<?php
if (isset($_POST['currentPassword']) && isset($_POST['newPassword']) && isset($_POST['repeatNewPassword'])) {
$result = array(
'result' => 1,
'location' => 'index.php'
);
echo json_encode($result);
exit();
};
?>
<form>
<input id='currentPassword' type='password' name='currentPassword' placeholder='Nuværende adgangskode'>
<input id='newPassword' type='password' name='newPassword' placeholder='Ny adgangskode'>
<input id='repeatNewPassword' type='password' name='repeatNewPassword' placeholder='Gentag ny adgangskode'>
<input id='changePasswordNeededButton' type='submit' name='changePasswordNeededButton' value='Skift adgangskode'>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#changePasswordNeededButton').click(function(){
$.post("",
{
currentPassword : $('#currentPassword').val(),
newPassword : $('#newPassword').val(),
repeatNewPassword : $('#repeatNewPassword').val()
},
function(data){
if (data.result == 1) {
location.href=data.location;
}
},"json"
);
return false;
});
});
</script>