Undefined error in Ajax call

Question

I am very new to Ajax and I'm trying to show the completed task and in progress tasks on jsp page. Following is my ajax request:

function checkProgress() {
  var uri="<%=request.getContextPath()%>/digitalObject/checkingProgress";
  $.ajax(
    {
      url: uri,
      type: 'GET',
      dataType: 'json',
      async:false,
      timeout: 100,
      success: function(data){
         updateUI(data);
      },
      error: function(xhr, ajaxOptions, thrownError) {
        alert("err"+thrownError+xhr.responseText);
      }
    });
}
function updateUI(data){
  // do something with "data"
  switch(data) {
    case "progress.Decompose":
      $("#decompose").removeClass("notStarted");
      $("#decompose").addClass("progress");
      $("#imgDecompose").html(htmlLoaderImage);
      break;
    case "Main object is decomposed":
      $("#decompose").removeClass("progress");
      $("#decompose").addClass("finished");
      $("#imgDecompose").html(htmlSuccessImage);
      break;
    case "started":
      alert(data);
  }
  checkProgress (uri);
}

It's an infinite Ajax request which will check the progress by calling this method in controller.

@RequestMapping(value="/checkingProgress",method= RequestMethod.GET)
public String checkProgress() {
  System.out.println("In checking progress");
  return progress;
}

But I am getting an undefined error. I am using Spring MVC. I can't understand why is it happening.

Answer 1

First check using for example firebug if your browser send a valid request to /checkingProgress

Then since your datatype is JSON you may want to return a valid JSON .

Answer 2

May I suggest a better approach..

var updater = setInterval(function(){
   $.ajax(
   {
     url: uri,
     type: 'GET',
     dataType: 'json',
     async:false,      
     success: updateUI
   });
}, 5000), 

function updateUI(data){
   //switch - case and update accrodingly
}

It makes more sense to let the callbacks complete execution than to make another call from within the success callback.

setInterval executes your block of code at intervals. Allowing other functions to execute. And also keeps the call stack clean!

Answer 3

I think you are not sending the request to the correct path. From the controller code snippet that you have posted it seems that you need to change the request mapping to @RequestMapping(value="/digitalObject/checkingProgress") .

In addition, as @Michael Laffargue pointed out you need to return valid json. You can do this by adding a @ResponseBody to your method declaration:

public @ResponseBody String checkProgress() {
    ...
}

Make sure that the MappingJacksonHttpMessageConverter is enabled. You can also use Firebug, Chrome Dev Tools or Fiddler to see exactly what is going on with your request/response.