Question

I am trying to transfer data from a jsp file using a json object.

This is my JavaScript code:

// action when item file is clicked
$("li span.file").click(function(){

// get the ID
alert(' Forward the url when clicked WITH ID => ' + $(this).attr('id'));

$.getJSON('BomItemToJSON', function(data) {
    alert('entered getJSON()');
    $.each(data, function(i, item) {
        alert('entered each()');
        var id = item.id;
        var description = item.description;

        alert('description: ' + description);

        formObject = document.forms['itemForm'];
        formObject.elements['itemId'].value = id;
        formObject.elements['itemDescription'].value = description;

        alert('done with javascirpt');
    });
});

});

This is my Servlet which should be called by JavaScript:

public class BomItemToJSON extends HttpServlet {

private static final long serialVersionUID = 1L;

@PersistenceContext(unitName = "xxx")
public EntityManager em;

@Resource
UserTransaction utx;

    Logger logger = Logger.getLogger(this.getClass().getCanonicalName());


    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    System.out.println("bom item to json servlet has been called.");
    try {
        utx.begin();
    } catch (NotSupportedException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    } catch (SystemException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
    //int id = Integer.parseInt(request.getParameter("id"));
    BomHandling bh = new BomHandling(em, utx);

    BomItem item = bh.getBomItem(63788);
    Gson gson = new Gson();
    String json = gson.toJson(item);

    System.out.println("Json: " + json);

    response.setContentType("text/plain");
    response.setCharacterEncoding("UTF-8");
    response.getWriter().write(json);

    try {
        utx.commit();
    } catch (SecurityException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    } catch (IllegalStateException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    } catch (RollbackException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    } catch (HeuristicMixedException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    } catch (HeuristicRollbackException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    } catch (SystemException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
}

}

This is my web.xml which maps the Servlet:

 <servlet>
  <display-name>BomItemToJSON</display-name>
  <servlet-name>BomItemToJSON</servlet-name>
  <servlet-class>com.xxx.servlets.BomItemToJSON</servlet-class>
 </servlet>

<servlet-mapping>
  <servlet-name>BomItemToJSON</servlet-name>
  <url-pattern>/BomItemToJSON</url-pattern>
 </servlet-mapping>

When I click on the item, I get the alert saying “Forward the url when clicked with id”. But it seems like that the getJSON() function is not called. Why?

Answer 1

A few debugging tips to find whats missing:

1. Use Firebug for Firefox (I still find the other equivalents less good)
2. Use console.log(“text”) instead of alerts, they are not as disruptive. Remember to remove them / comment them out as they break in IE etc.
3. Use the debugger in the script tab in Firebug to check that your code reaches the getJson function in the first place. Also you can debug the callback function.
4. Use the net tab to see if your /BomItemToJSON url is called and what response is given to the browser.

Also, I personally like to use the $.ajax function only in jQuery and not their shorthands.