Java – JSP/Jquery – combo box dropdown dynamically loaded from database with image

cssjavajqueryjspspring-mvc

In my web application I need to display a drop down dynamically loaded from database.
I need to load the list of users from DB. Each user will have 'access level' as 1 or 2.
When the users are displayed in the dropdown they must have an image in the side of their name.
(like 'Green' tick for 'access level' 1) and (red cross for access level 2).
I have checked this url http://www.marghoobsuleman.com/jquery-image-dropdown.
But I need to to display the image based on the access level loaded from DB.
I guess this can be done by JQuery/CSS.

Can anyone please tell how this can be done and if possible sample code please?

Best Answer

Since you are using jsp as view technology, use core tags to decide whether you want to show green tick or red cross depending upon the access level.

Visit this site to know more about the usage of core tags. Don't forget to include jstl.jar and standard.jar files in your project classpath. They are necessary libraries which support jstl.

Looks like your application is developed using spring framework, so I'll try to explain it that way only.

Your JSP code will be something like this: name it userlist.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<!doctype>
<html>
    <head>
       <script src="${pageContext.request.contextPath}/js/jquery-1.3.2.min.js" type="text/javascript></script>
       <script src="${pageContext.request.contextPath}/js/jquery.dd.js" type="text/javascript"></script>
       <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/dd.css" />
    </head>
    <body>
        <form:select id="userNames" path="userName" tabindex="10">
            <form:option value="Select User">Select User</form:option>                
            <c:forEach begin="${userlist begin index (0)}" end="${userlist size}" var="i">
                <c:choose>
                    <c:when test="${userNameList.user.accessLevel == 1}">
                        <form:option style="background-image:url(greentick.png);" value="${userNameList.user.userName}">${userNameList.user.userName}</form:option>
                    </c:when>
                    <c:otherwise>
                        <form:option style="background-image:url(redcross.png);" value="${userNameList.user.userName}">${userNameList.user.userName}</form:option>
                    </c:otherwise>
                </c:choose>
            </c:forEach>
        </form:select>
    </body>
</html>

Now you will have a controller which will be called after invoking some action and it will return this jsp along with userNameList. Below is sample UserController.java

@Controller
public class UserController {

    @RequestMapping(value = "/showUsers", method = RequestMethod.GET)
    public String showUserInfo(Model model) {
        // here you prepare the userList, the list of Users along with information
        // here User can be fetched from DB & values stored in User DTO and then DTO in the list
        List<User> userNameList = new ArrayList<User>();
        userNameList.add(User DTO objects go here);
        model.addAttribute("userNameList", userNameList);
        return "userlist";       // remember this is our jsp name
    }
}

& User DTO can be something like this. Below is sample User.java

public class User {
    private String userName;
    private int accessLevel;

    // setters & getters of variables
}

This can't be fully articulated answer. I have tried my best to explain. You give this a try. It should work.

Related Topic