Link to home
Start Free TrialLog in
Avatar of RationalRabbit
RationalRabbit

asked on

How to troubleshoot jQuery AJAX apparently not submitting

This is a multipart form, so I am using FormData.
<form id="PriceForm" name="PriceForm" method="post" enctype="multipart/form-data" accept-charset="UTF-8">

Open in new window

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)
   });

Open in new window

});
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);
               }
            }
         });
      }
   }
});

Open in new window

Here is the only console log response
valid: true
FormData {  }
Save
Store
Valid verified

Open in new window

The PHP file does many procedures, and ends with this
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));
}

Open in new window


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));
}

Open in new window


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.
Avatar of gr8gonzo
gr8gonzo
Flag of United States of America image

The first thing I would do is enable the developer's tools/console in your browser. This is usually done by hitting F12. Once the developer tools window is open, there should be a "Console" tab in it that you can switch to.

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. :)
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.
Avatar of RationalRabbit
RationalRabbit

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?
Julien-
It does show an xhr post, with a 200 response

X-Requested-With: XMLHttpRequest
Content-Length: 13945
Content-Type: multipart/form-data; boundary=---------------------------14251190752204

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.
SOLUTION
Avatar of gr8gonzo
gr8gonzo
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
No. I see no response. I see a long list of what was sent.
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
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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. :)
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.
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.
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.