CODEWITHSUNDEEP
javajavascriptajaxjspspring-mvc
Dangling Piyush
Dangling Piyush

Reputation: 3676

Undefined error in Ajax call

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.

Upvotes: 1

Views: 2576

Answers (3)

kpentchev
kpentchev

Reputation: 3090

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.

Upvotes: 1

Robin Maben
Robin Maben

Reputation: 23064

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!

Upvotes: 1

Michael Laffargue
Michael Laffargue

Reputation: 10304

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.

Upvotes: 1

Related Questions