I’ve got an issue trying to post data to my database using Ajax. The error i keep getting in the console is as above but i can’t figure out why it can’t submit the data. Both note_crud.js & note_crud.php are in the same folder. I know my connection to the db is good so I’m guessing its a problem with the JS?
The issue seems to stem here in the note_crud.js file:-
$(document).ready(function(){
// save comment to database
$(document).on('click', '#submit_btn', function(){
var note_subject = $('#note_subject').val();
var note_body = $('#note_body').val();
$.ajax({
url: 'note_crud.php',
type: 'POST',
data: {
'save': 1,
'name': note_subject,
'comment': note_body,
},
success: function(response){
$('#note_subject').val('');
$('#note_body').val('');
$('#display_area').append(response);
}
});
});
So forgive my ignorance as i’m not fully clued up on JS yet. Just stepping into it. I removed the comma but it didn’t seem to solve the issue. It would probably help if i showed all of the code…
If you could advise on where i’m going wrong and things to look for it would be much appreciated. I feel as though this error of XHR loading is going to be a grammatical error on my part.
Thanks in advance.
$(document).ready(function(){
// save comment to database
$(document).on('click', '#submit_btn', function(){
var note_subject = $('#note_subject').val();
var note_body = $('#note_body').val();
$.ajax({
url: 'note_crud.php',
type: 'POST',
data: {
'save': 1,
'name': note_subject,
'comment': note_body
},
success: function(response){
$('#note_subject').val('');
$('#note_body').val('');
$('#display_area').append(response);
}
});
});
// delete from database
$(document).on('click', '.delete', function(){
var id = $(this).data('id');
$clicked_btn = $(this);
$.ajax({
url: 'note_crud.php',
type: 'GET',
data: {
'delete': 1,
'id': id,
},
success: function(response){
// remove the deleted comment
$clicked_btn.parent().remove();
$('#note_subject').val('');
$('#note_body').val('');
}
});
});
var edit_id;
var $edit_note_subject;
$(document).on('click', '.edit', function(){
edit_id = $(this).data('id');
$edit_note_subject = $(this).parent();
// grab the comment to be editted
var note_subject = $(this).siblings('.display_name').text();
var note_body = $(this).siblings('.comment_text').text();
// place comment in form
$('#name').val(note_subject);
$('#comment').val(note_body);
$('#submit_btn').hide();
$('#update_btn').show();
});
$(document).on('click', '#update_btn', function(){
var id = edit_id;
var note_subject = $('#note_subject').val();
var note_body = $('#note_body').val();
$.ajax({
url: 'note_crud.php',
type: 'POST',
data: {
'update': 1,
'id': id,
'name': note_subject,
'comment': note_body,
},
success: function(response){
$('#note_subject').val('');
$('#note_body').val('');
$('#submit_btn').show();
$('#update_btn').hide();
$edit_comment.replaceWith(response);
}
});
});
});
I’m afraid you should figure out why the error message has been ellipsis-ified before you proceed developing in that environment. Hopefully the full message can be toggled on / opened, maybe a tooltip thingy?
In addition to the file name a line number and reason would be some help even if it’s only a point in the right direction.
'tis valid JavaScript syntax, Sir. Trailing commas in object literals are valid according to the ECMAScript 5 (and ECMAScript 3!) spec (ref).
@oli_d111: can you post the full error message. Also try examining the Network tab in your browser’s dev tools to examine what is being sent across the network.
Thanks for your help, the issue turned out to be an issue with the URL of which i have now solved.
Now that i have it communicating with the note_crud.php from console in Devtools i’m getting a message of “XHR finished loading: POST” but the data isn’t posted into the DB. I assume that the PHP would be causing the issue but im not getting any messages in the PHP error log.
Yes, if that is an expected “success” response (i.e. markup and script are most likely OK but the message isn’t), then looking at the PHP that deals with the request / response would be a good next step.
Well, no, theoretically ECMAScript adheres to ECMA-404, which specifies a JSON object as not having a trailing comma. But it accepts a trailing comma because… i dont know, they don’t like their own specs. Go figure.
Most likely you’re running a ‘production’ level setup, which means that it’s not actually reporting the errors. But, debugging your PHP will be a separate thread glad to hear you found the issue though.
glad to hear you found the issue though.