Ajax form only submitting sometimes - php

Question

There are several questions like this on SO but none of the answers have worked for me. I have tried them all.
I tried to minimize the code I am pasting, but it's kind of hard with this script
I have a comment form that is submitted via ajax to a php script which saves the comment and then gets all the comments and redisplays them so the new comment can be displayed without refreshing the page.
Only sometimes will the comments successfully submit to the database and redisplay properly. Usually almost every other submit the comment will be saved. Every other time nothing seems to happen.
My real issue is the comments not being saved every time one is submitted.
Here is the javascript and the ajax call:
$(document).ready(function(){
var working = false;
$('#commentForm').submit(function(e){
if(working) return false;
working = true;
$('#submitComment').val('Working..');
$('span.error').remove();
$.post('/ajax/comment.process.php',$(this).serialize(),function(msg){
working = false;
$('#submitComment').val('Submit');
if(msg.status){
$('#commentArea').slideDown().$(msg.html).prepend('#commentArea');
$('#blogComment').val('');
}
else {
$.each(msg.errors,function(k,v){
$('label[for='+k+']').append('<span class="error">'+v+'</span>');
});
}
},'json');
});
});
and here is the function that submits the comment:
public function addComment($user_id) {
$validate = new data_validation;
$_POST = $validate->sanitize($_POST);
$newCom = $_POST['blogComment'];
$blog_id = intval($_POST['blogID']);
$photoSubmit = $_POST['comPhoto'];
$newComQuery = $this->mysqli->query("INSERT INTO b_comments (blog_id, user_id, date, content, photo) VALUES ('".$blog_id."', '".$user_id."', Now(), '".$newCom."', '".$photoSubmit."')");
if($newComQuery === false) {
echo "Query failed";
}else{
$returnCom = $this->comMarkup($blog_id);
echo $returnCom;
}
}
and here is a piece of the comMarkup() function that echos the comments (it is only the important pieces):
// This method outputs the XHTML markup of the comment
public function comMarkup($blog_id) {
$sql = $this->mysqli->query("SELECT * FROM b_comments WHERE blog_id = '".$blog_id."' ORDER BY date DESC");
while($d = $sql->fetch_assoc()) {
$d = $validate->sanitize($d);
echo "
<div class='comment-block'>
<span class='com-img'><img src='".$photo_path."' /></span>
<h3 style='display: inline;'><a href='".$profile."'>".$userName."</a></h3>
<div class='com-date'>".$d['date']."</div>
<p>".$comContent."</p>
</div>
";
}
}
EDIT: Here is the comment.process.php code as requested:
session_start();
include_once('../classes/comment.class.php');
include_once('../classes/db.class.php');
include_once('../classes/user.class.php');
$user_id = $_SESSION['user_id'];
$db = new DBConnection;
$comments = new Comment($db);
$user = new User($db);
$blogID = intval($_POST['blogID']);
$addCom = $comments->addComment($user_id);
echo json_encode(array('status'=>1,'html'=>$addCom));

Answer 1

Given your description, my guess is that it has something to do with your working variable, and the fact that it is not set to false at the end of your $.post().
But there are a few logic, efficiency, and manageability issues with the way you've drawn up the process. I'd recommend having a look at the official jQuery docs for $.post(), specifically the .done(), .fail(), and .always() chained methods.
I'd also recommend naming your PHP variable something other than $_POST, so it does not become confused with the PHP super global.
Finally, I'd recommend treating your comment as an object and using PDO (this is a link to PDO:query as a kind of "immersion" approach but be sure to read all the docs). It will save you a ton of headaches in database interaction.

Answer 2

It looks like you've got a race condition caused by the working flag. Since you're just using that flag to show the "working..." message and prevent submits while a request is processing, I would just use the normal $.ajax call and put the "working" logic in the beforeSend option. Here's an example:
$(document).ready(function(){
$('#commentForm').submit(function(e){
$.ajax({
type: 'POST'
url: '/ajax/comment.process.php',
dataType: 'json',
beforeSend: function(jqXHR, settings) {
$('#submitComment').val('Working..');
$('span.error').remove();
},
data: $(this).serialize(),
complete: function(jqXHR, textStatus) {
var msg = jqXHR.responseText;
$('#submitComment').val('Submit');
if(msg.status){
$('#commentArea').slideDown().$(msg.html).prepend('#commentArea');
$('#blogComment').val('');
}
else {
$.each(msg.errors,function(k,v){
$('label[for='+k+']').append('<span class="error">'+v+'</span>');
});
}
};
});
});
});

Answer 3

are you using json_encode()? if not all your echo-backs will be received as "text" and not as an json-object which you're accessing in your jquery

Answer 4

I guess you should use encodeURIComponent($('#blogComment').val()) somwhere for passing your blogcomment value to PHP file for insert.
Edit 1:
public function addComment($user_id) {
$validate = new data_validation;
$_POST = $validate->sanitize($_POST);
$newCom = rawurlencode($_POST['blogComment']);
if rawurlencode() did not work. use following function:
function encodeURIComponentNew($str) {
$revert = array('%21'=>'!', '%2A'=>'*', '%27'=>"'", '%28'=>'(', '%29'=>')');
return strtr(rawurlencode($str), $revert);
}
(function from What is the equivalent of JavaScript's encodeURIcomponent in PHP?)
and then
public function addComment($user_id) {
$validate = new data_validation;
$_POST = $validate->sanitize($_POST);
$newCom = encodeURIComponentNew($_POST['blogComment']);

Answer 5

Doubt this is related, but I've had issues in the past when doing ajax stuff using "echo" inside a function, and then trying to echo the returned value again.
Try changing your echo's inside all your functions for "return" instead like so:
public function addComment($user_id) {
$validate = new data_validation;
$_POST = $validate->sanitize($_POST);
$newCom = $_POST['blogComment'];
$blog_id = intval($_POST['blogID']);
$photoSubmit = $_POST['comPhoto'];
$newComQuery = $this->mysqli->query("INSERT INTO b_comments (blog_id, user_id, date, content, photo) VALUES ('".$blog_id."', '".$user_id."', Now(), '".$newCom."', '".$photoSubmit."')");
if($newComQuery === false) {
return "Query failed";
}else{
$returnCom = $this->comMarkup($blog_id);
return $returnCom;
}
}

Answer 6

If the user send a comment with ' maybe will happens an error. When you send a comment, the string will broke a mmysqli_query. It can help you, MAYBE.
public function addComment($user_id) {
$validate = new data_validation;
$_POST = $validate->sanitize($_POST);
$newCom = htmlspecialchars($_POST['blogComment'], ENT_QUOTES);
$blog_id = intval($_POST['blogID']);
$photoSubmit = htmlspecialchars($_POST['comPhoto'], ENT_QUOTES);
$newComQuery = $this->mysqli->query("INSERT INTO b_comments (blog_id, user_id, date, content, photo) VALUES ('".$blog_id."', '".$user_id."', Now(), '".$newCom."', '".$photoSubmit."')");
if($newComQuery === false) {
echo "Query failed";
}else{
$returnCom = $this->comMarkup($blog_id);
echo $returnCom;
}
}

Answer 7

It might cause of Browser cookiess. So that In your URL just add addtional queryString for unique URL pattern.
Example:
$.post('/ajax/comment.process.php?random=randamnumber');

Answer 8

You have a SQL Injection vulnerability in your PHP code, make sure you're escaping your variables properly or use a prepared query.
As for the JS part, make sure to return true; at the end of your .submit() function. (for you it would be after the $.post() call)
Also, your 'working' variable can be set forever to true if there's an error in your php script, which is very likely to happen with the SQL Injection Vuln in place.
Explanation: You set it to true, success callback possibly doesn't get called because of error 500 from PHP Backend, so it never gets set to false by your callback, and then you can't ever submit anymore till next page refresh.

Answer 9

So, if I understand the problem correctly, you're submitting the comment and it's not inserting into the database, and it's also presumably not showing you a database error or printing out your Query failed string?
It seems as though your PHP script isn't being executed at all?
If this is the case, I would normally say the most likely culprit for an intermittent error like this is your browser cache. Your browser is looking at the URL, thinks it already knows what content goes with that URL, and returns that content without ever even sending your info to the server. The simplest way to beat that is to add a random querystring to your file call, e.g.:
cachebuster = new Date();
'/ajax/comment.process.php?cachebuster='.cachebuster.getTime();
... I say "normally" since you're using POST and under "normal" circumstances the browser does not cache POST requests. But it is possible, and it's trivial to combat, so give it a shot. This can also be diagnosed, if you use Chrome, by hitting f12, going to the "network" tab, and then running your form. It should tell you if the result was retrieved from cache.
Beyond that, if you're relying on magic_quotes (or worse, you're not relying on magic_quotes), you need to learn the proper way to deal with SQL injection. You should never be inserting untrusted data from the browser directly into the database. Escape it or use parameterized queries. If you're experiencing an intermittent problem with your query, it's probably related to the content of your comment throwing the query off under certain circumstances, as mentioned above, most likely with the inclusion of an apostrophe in a contraction. Diagnose by submitting two forms back to back: trythis and then try'this. If the first one goes and the second one fails, you've likely found your answer. Properly escaping your input would solve this problem.
Ultimately, all of these suggestions have already been given above, but hopefully this provides a little context to help understand the whys and wherefores.
Edit: I see, now that I look closer, that you are in fact escaping your query with a method you haven't shared here. Assuming that's working correctly, then that shouldn't be a concern.
Try echoing out a valid response at the beginning of your script without even executing anything. If that always returns, then you at least know the script is being called successfully.
There could be a problem with your working variable in the event that the ajax call returns with an error. It would never, under those circumstances, set it back to false.
Your #1 ally is the "network" tab in Chrome Developer Tools or watching the response in the console tab in Firefox Firebug extension.
Edit 2:
$.post('/ajax/comment.process.php',$(this).serialize(),function(msg){
// post stuff, REMOVING the working variable set, cuz it won't be necessary here...
},'json').always(function() { working = false; });