Question

I have the following ajax call in a function, which is called upon a clickevent.

$.ajax({
  url:"server.php",
  type:'GET',
  data: {'action':'addEvent'},
  success: function(response)
  {
    if(response)
    {
    alert("200 ok");                
    }
 },
 error: function(xhr, ajaxOptions, ThrownError)
 {
   alert("Error:" + ThrownError);
   $("#output").text("Error: "+ThrownError);
 }
}); 

The php side is as follows.

  if(isset($_GET["action"]))
   {
      $action = $_GET["action"];
     if($action == 'addEvent')
     {
          echo("ping");
     }

   }

Now it throws an error. But the error message i get is :

Exactly, i get Error:

It is driving me crazy.

Also i put in my document.ready, to let it act as some sort of ping, and it worked perfectly

Answer 1

Take a look at this jsFiddle. I’m getting there same error you have.

Why that is happening there: link is clicked and ajax request is sent. But default action is not stopped and browser navigates to url specified in href and stops any JS execution. AJAX call is stopped too.

In order to prevent that, you should do something like this:

$('a').click(function(e) { 
    $.ajax({
      url:"server.php",
      type:'GET',
      data: {'action':'addEvent'},
      success: function(response) {
        if(response) {
           alert("200 ok");                
        }
      },
      error: function(xhr, ajaxOptions, ThrownError) {
         alert("Error:" + ThrownError);
         $("#output").text("Error: "+ThrownError);
      }
   }); 
   e.preventDefault();//this will not allow browser to move to a different URL
   return false; //alternative to e.preventDefault(). 
});​

Possibly you have similar problem, but it is hard to notice because your element is causing simple page reload, browser navigates to the same page.