I can't figure out why this Ajax script isnt working.
Heres the code:
$(document).on('submit', '.edit_user', function(){
console.log('submit');
$.post
(
$(this).attr('action'),
$(this).serialize(),
function(data){
console.log("data");
console.log(data);
$('#edit_first_name').val(data['first_name']);
},
"json"
);
return false;
});
I have the submit
show up in the console so I know the .post
is called. I also know it makes it to the return false
because the form never submits and redirects.
However, it never console.log(data)
.
I'm pretty sure all this is because I'm forgetting something simple.
Does your javascript logger return you something ?
The function you have defined is for the success callback. Make sure your current post is returning a successful response from the server. Or convert the .post()
call to a .ajax()
call and define the failure calback
Try using the .fail()
callback and see if it returns, also make sure the server sends the json header properly or $.post
will fail.
$(document).on('submit', '.edit_user', function(){
console.log('submit');
var jqXHR = $.post($(this).attr('action'), $(this).serialize(),
function(data){
console.log("data");
console.log(data);
$('#edit_first_name').val(data['first_name']);
},
"json"
);
jqXHR.fail(function(jqXHR, textStatus, errorThrown) {
console.log('error', textStatus, errorThrown);
});
return false;
});
If you're using PHP, make sure you have the correct header printed before any other output.
<?php
header('Content-type: application/json');
....code...
echo json_encode(some_array);
Use this,
$(document).on('submit', '.edit_user', function(e){
e.preventDefault();
console.log('submit');
$.post
(
$(this).attr('action'),
$(this).serialize(),
function(data){
console.log("data");
console.log(data);
$('#edit_first_name').val(data['first_name']);
},
"json"
);
return false;
});
Use preventDefault function to prevent default behaviour of submit. Also .edit_user should be the class of the form element