RationalRabbit
asked on
How to troubleshoot jQuery AJAX apparently not submitting
This is a multipart form, so I am using FormData.
In the code below, I am pressing the "Save" button, which is recognized, and I have verified that it is sending correctly populated variables to DataSave.
Validation comes back positive (also verified)
What I have done to troubleshoot
1. Verified, line by line, that the code sequence is identical to what is working elsewhere.
2. Placed error information in the PHP file ($Error[] = "Testing";)
3. Finally, created a simple test file (shown at bottom) to return a result. There was no change, so it does not seem to be in the PHP file.
The button listener (I am selecting the "Save" button)
The Ajax code (DataSave) looks like this:
I created a simple test file that looked like this. The response was the same
Since I cannot put alerts in the PHP file, I don't know how to determine if it is even going there. I did put test errors at the top of the page and elsewhere.
<form id="PriceForm" name="PriceForm" method="post" enctype="multipart/form-data" accept-charset="UTF-8">
I am using this same code in 2 other modules, and it is working fine. It appears it is not even reaching the PHP file, and I have run out of ideas to troubleshoot.In the code below, I am pressing the "Save" button, which is recognized, and I have verified that it is sending correctly populated variables to DataSave.
Validation comes back positive (also verified)
What I have done to troubleshoot
1. Verified, line by line, that the code sequence is identical to what is working elsewhere.
2. Placed error information in the PHP file ($Error[] = "Testing";)
3. Finally, created a simple test file (shown at bottom) to return a result. There was no change, so it does not seem to be in the PHP file.
The button listener (I am selecting the "Save" button)
$(document).ready(function()
{
$(document).on('click', '.SubmitButton', function(e)
{
e.preventDefault();
var ButtonID = $(this).attr('id');
var Form = $('#PriceForm');
var Validate = false;
if(ButtonID == "Reset")
{
if(confirm("Did you mean to clear the form?") == true)
{
ClearURI();
window.location="pricing.php";
}
}
else if(ButtonID == "Save")
{
var Data = new FormData(Form[0]);
Data.append( 'Sec', "PricingSave" );
Data.append( 'Process', "Save" );
Validate = "Store";
}
else if(ButtonID == "Next")
{
var Data = new FormData(Form[0]);
Data.append( 'Sec', "PricingSave" );
Data.append( 'Process', "Next" );
Validate = "All"; // Perform Validation
}
DataSave(Data,ButtonID,Validate)
});
});The Ajax code (DataSave) looks like this:
$(document).ready(function()
{
function DataSave(Data,ButtonID,Validate)
{
Valid = FormVal(Validate)
console.log("valid: "+Valid);
console.log(Data);
console.log(ButtonID)
console.log(Validate)
if(Valid)
{
console.log("Valid verified");
$.ajax(
{
url: 'Ajax-Forms.php',
type: 'POST',
data: Data,
dataType: 'JSON',
cache: false,
contentType: false,
processData: false,
success: function (data)
{
console.log(data.SuccessMessage);
console.log(data.ID);
if(data.SuccessMessage == "ERROR!")
{
var ErCount = data.ErCount;
var dString = "ERROR!"+"\n";
for(i=0;i<ErCount;i++)
{
dString += data.Error[i]+"\n";
}
alert(dString);
return false;
}
else if(ButtonID == "Save")
{
alert(data.SuccessMessage+"\n"+"The process number is "+data.AppID);
ClearURI();
location.reload(true);
}
else if(ButtonID == "Next")
{
var ID = data.ID;
TempAlert(data.SuccessMessage,3000);
setTimeout(function(){location.href="ca.php?AppKey="+ID} , 1005);
}
}
});
}
}
});
Here is the only console log responsevalid: true
FormData { }
Save
Store
Valid verified
The PHP file does many procedures, and ends with thisif(count($Error) == 0)
{
echo json_encode(array("SuccessMessage"=>$SuccessMessage, "ID"=>$ID, "AppID"=>$AppID));
}
else
{
$ErCount = count($Error);
$SuccessMessage = "ERROR!";
echo json_encode(array("SuccessMessage"=>$SuccessMessage, "ErCount"=>$ErCount, "Error"=>$Error));
}
I created a simple test file that looked like this. The response was the same
$SuccessMessage = "Testing";
$Error[] = "This is an error";
if(count($Error) == 0)
{
echo json_encode(array("SuccessMessage"=>$SuccessMessage, "ID"=>$ID, "AppID"=>$AppID));
}
else
{
$ErCount = count($Error);
$SuccessMessage = "ERROR!";
echo json_encode(array("SuccessMessage"=>$SuccessMessage, "ErCount"=>$ErCount, "Error"=>$Error));
}
Since I cannot put alerts in the PHP file, I don't know how to determine if it is even going there. I did put test errors at the top of the page and elsewhere.
Nothing wrong with your code - implemented almost out of the box - a few tweaks to the PHP but it works.
In your console (F12) check the Network tab.
Look for the POST and check what is going on inside there (Click the POST to view headers / params / response)
Also put an else on the if ($valid) and console.log out a message in the else to make sure it is not branching there.
In your console (F12) check the Network tab.
Look for the POST and check what is going on inside there (Click the POST to view headers / params / response)
Also put an else on the if ($valid) and console.log out a message in the else to make sure it is not branching there.
ASKER
I posted the results of the console (FireFox) in my question: (from console.log entries)
valid: true
FormData { }
Save
Store
Valid verified
No errors reported.
There are 3 identical forms, as far as structure goes, but with different content. The buttons are the same. Although they are type="submit" inputs, there is no "action" in the form description and, as I say the other two forms are working fine under the same setup.
The debugger in FireFox's Console doesn't seem to do me any good with the PHP file. Can I expect something different from IE?
valid: true
FormData { }
Save
Store
Valid verified
No errors reported.
There are 3 identical forms, as far as structure goes, but with different content. The buttons are the same. Although they are type="submit" inputs, there is no "action" in the form description and, as I say the other two forms are working fine under the same setup.
The debugger in FireFox's Console doesn't seem to do me any good with the PHP file. Can I expect something different from IE?
ASKER
Julien-
It does show an xhr post, with a 200 response
X-Requested-With: XMLHttpRequest
Content-Length: 13945
Content-Type: multipart/form-data; boundary=----------------- ---------- 1425119075 2204
There is an else on the if(Valid). I just didn't show it. But you can see that it is getting past that as noted by the "Valid verified" console.log indication.
It does show an xhr post, with a 200 response
X-Requested-With: XMLHttpRequest
Content-Length: 13945
Content-Type: multipart/form-data; boundary=-----------------
There is an else on the if(Valid). I just didn't show it. But you can see that it is getting past that as noted by the "Valid verified" console.log indication.
I don't know if this is just a typo, but you're missing a "});" at the end of your first section of code (the one directly underneath The button listener (I am selecting the "Save" button))
However, I'd imagine that if you're getting values and not seeing any errors in the console, it's probably just a typo in the question section.
Now, you said it's not reaching the PHP page - the network tab in the developer tools should show you any AJAX requests, so the question is whether you see an extra line show up in the network tab when you click the Save button.
It would be very bizarre if you didn't get a JS error and there was no AJAX request recorded at all.
However, I'd imagine that if you're getting values and not seeing any errors in the console, it's probably just a typo in the question section.
Now, you said it's not reaching the PHP page - the network tab in the developer tools should show you any AJAX requests, so the question is whether you see an extra line show up in the network tab when you click the Save button.
It would be very bizarre if you didn't get a JS error and there was no AJAX request recorded at all.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
No. I see no response. I see a long list of what was sent.
ASKER
Yes, the missing }); is a typo. they are both under the same document.ready section. So it is there in the actual code.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I didn't realize you could do all this with Web console! I used to use Firebug, which would have shown me the error right off.
So, the problem was there is an include file that was being wrongly pointed to, so PHP was dying. :)
Thanks a lot. I've learned a lot about the network tab in Web console today which has really made my day!
So, the problem was there is an include file that was being wrongly pointed to, so PHP was dying. :)
Thanks a lot. I've learned a lot about the network tab in Web console today which has really made my day!
So, the problem was there is an include file that was being wrongly pointed to, so PHP was dying. :)First Rule of AJAX - do your testing in steps.
Test your endpoint independently of your client - write a tester (form that submits different data) and check the output of the script in the browser.
Make sure your tests all pass muster and there are no errors.
Once you have done this - then wire it up to your AJAX call.
ASKER
Good advice.
When I ran into this problem, I created a very simple PHP test file. For some reason, that failed also, which caused me to rule out that the problem was in the PHP file. That;s what I get for assuming.
When I ran into this problem, I created a very simple PHP test file. For some reason, that failed also, which caused me to rule out that the problem was in the PHP file. That;s what I get for assuming.
Ok but you got the testing backwards - get the PHP working first - that is easy to test - you can feed it good data and bad data and see the results on the screen (error messages / return data). When that is working you have eliminated one variable in the equation - so when things go wrong you know to focus on your AJAX.
Now refresh the page, and then check the Console tab for any errors that might have happened on load. If there are no errors on load, then try to click on the button to trigger the AJAX and see what the console shows.
If it doesn't show anything, then the "Sources" tab should let you add breakpoints to the code you're trying to execute so you can step through it.
Also, make sure your submit button isn't just submitting your form without triggering the AJAX. :)