tiamat tiamat - 7 months ago 37
Javascript Question

Issue with JSP AJAX jQuery fill table

I wrote a servlet to retrieve data from a MongoDB database and display it in a table in a JSP file:

The servlet:

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

MongoClient mongo = (MongoClient) request.getServletContext().getAttribute("MONGO_CLIENT");
ArrayList <tt> tt = new ArrayList<tt>();
DBO dao = new DB(mongo);
tt = dao.getAll();
Gson gson = new Gson();
JsonElement element = gson.toJsonTree(tt, new TypeToken<List<tt>>() {}.getType());
JsonArray jsonArray = element.getAsJsonArray();
log.debug(jsonArray.toString());
response.setContentType("application/json");
response.getWriter().print(jsonArray);

}


My JSPfile contains the JavaScript file (for the moment):

<script type="text/javascript">
$(document).ready(function() {
$.get('/ttSRV/webttServlet',function(responseJson) {
if(responseJson!=null){
$("#tttable").find("tr:gt(0)").remove();
var table1 = $("#tttable");
$.each(responseJson, function(key,value) {
var rowNew = $("<tr><td></td><td></td><td ></td><td></td><td></td><td></td><td></td></tr>");
rowNew.children().eq(0).text(value['owner']);
rowNew.children().eq(1).text(value['nom']);
rowNew.children().eq(2).text(value['date']);
rowNew.children().eq(3).text(value['reception']);
rowNew.children().eq(4).text(value['ren']);
rowNew.children().eq(5).text(value['status']);
rowNew.children().eq(6).text("<a class=\"btn btn-success\" href=\"#\"><i class=\"icon-zoom-in icon-white\"></i>Voir</a><a class=\"btn btn-danger\" href=\"#\"><i class=\"icon-trash icon-white\"></i>Supprimer</a>");
rowNew.appendTo(table1);
});
}
});
});
</script>


It's working fine but my last row :

rowNew.children().eq(6).text


is containing a hyperlink to display or delete the item and is displayed as a String. How can I display it as a
<a>
hyperlink and not as a String ?

Answer

Have you tried changing rowNew.children().eq(6).text( to rowNew.children().eq(6).html( ?

The .text function renders text only, while html renders Raw html.

$(document).ready(function(){
    $("#example1").text("<b>Hello world!</b>");  
});

The first example writes: <b>Hello world!</b>

$(document).ready(function(){
    $("#example2").html("<b>Hello world!</b>");
});

The second example writes: Hello world!

Comments