Populating collection onto UI using ajax

Question

I am building a chat application using JSP, Servlets and Ajax with Smack API. Once the user connects to Gtalk his buddies list should be displayed onto the UI. I am able to get the buddies list onto console but populating it on the JSP is giving problems.

In my servlet I get the buddy list using:

  Roster roster = connection.getRoster();
    Collection<RosterEntry> entries = roster.getEntries();
    for(RosterEntry r:entries)
    {
        String user = r.getUser();
        pw.println(user);
    }

In my jsp page I want the buddy list to be populated on page load:

$(document).ready(function() {
    var xmlhttp;
    if(window.XMLHttpRequest)
    {
    xmlhttp=new XMLHttpRequest();
    }
    else
    {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
    if(xmlhttp.readyState==4)
    {
        if(xmlhttp.status == 200) 
            {

               document.getElementById(buddies).innerHTML=xmlhttp.responseText;
            }

    }
    }
    xmlhttp.open("POST","LoginIMServlet",true);
    xmlhttp.send(null);
        }
)
<table>
</tr>
  <tr>
    <td>
    <form name=ListForm>
    <select id="buddies" name="buddies" size=40 multiple onclick="window.open("ChatWindow.jsp",width=500,height=350,resizable=yes")>
    </select>
     </form> 
    </td>
  </tr>
</table>

I am not able to populate the multi selector box. How can I solve this?

score 2 · Accepted Answer · edited May 23 '17 at 09:58

If you want to do server-side stuff during page load, you don't necessarily need JS/Ajax for this. You can just let JSP do the job. This saves the cost of one more HTTP request.

Let the servlet's doGet() method store it in request scope and forward to JSP.

Roster roster = connection.getRoster();
request.setAttribute("rosterEntries", roster.getEntries());
request.getRequestDispatcher("/WEB-INF/page.jsp").forward(request, response);

Let the JSP utilize JSTL <c:forEach> to iterate over it and print the <option> elements.

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
...
<select multiple>
    <c:forEach items="${rosterEntries}" var="rosterEntry">
        <option>${fn:escapeXml(rosterEntry.user)}</option>
    </c:forEach>
</select>

(the fn:escapeXml() is not mandatory, but it just prevents you from potential XSS attack holes)

Now call the URL of servlet instead of the JSP one. JSP will populate it "on page load".

Unrelated to the concrete problem, if you're using jQuery, then you should not create XMLHttpRequest objects yourself. This makes no utter sense. Just use $.ajax(), $.get(), etc functions. For examples, check this question.

If you really want to solve this with jQuery, then best is to let the servlet return the data as JSON and use $.getJSON() to retrieve it. Do the following in the doGet() method instead:

Roster roster = connection.getRoster();
String rosterEntriesJson = new Gson().toJson(roster.getEntries());
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(rosterEntriesJson);

(Gson is here Google GSON, just download and drop JAR in /WEB-INF/lib)

Map this servlet on /buddies and do the following in JSP/jQuery:

<script>
    $(document).ready(function() {
        $.getJSON('buddies', function(rosterEntriesJson) {
            var $buddies = $('#buddies');
            $.each(rosterEntriesJson, function(index, rosterEntry) {
                $('<option>').text(rosterEntry.user).appendTo($buddies);
            });
        });
    });
</script>
...
<select id="buddies" multiple></select>

Hey BalusC... I tries ur solution 2 i get an error tellin java.lang.IllegalStateException: How can the type variable not be present in the class declaration! wher am i goin wrong??? — enthusiastic, Apr 07 '11 at 14:10
You have another code in the method block which is causing that. Probably you're unnecessarily calling `getOutputStream()`, probably you're unnecessarily calling `forward()`, etc. The real answer is in the stacktrace which you got. At least, you shouldn't do anything else than the given example, expect initializing the `connection`. — BalusC, Apr 07 '11 at 14:19

Populating collection onto UI using ajax

1 Answers1