Wednesday, 24 July 2013

combo-box(Drop down) Change event populate or fetch value from table using ajax in liferay

Hi Friends ,

Today i want to share small ajax portlet example with you . As every post i explain step by step..

I have one combo box & when user change value so according that onchange event i fetch value from db using ajax.

As In above image when user select birthday category then in fetch keyword from db table & append multi select .

Now time for code :

First In Jsp File write below code:

<portlet:resourceURL var="fetchValues" id="fetchcombo"></portlet:resourceURL>
<script src="" type="text/javascript"></script>

$(document).ready(function() {
       $("#category").change(function() {
var keyId=$("#category").val();

                       var url = "<%=fetchValues%>";
           $.post(url, {keyId : keyId}, function(data)  {

for(var z=0; z<data.dataarray.length;z++){

dataarray = data.dataarray[z].split(":");
                        $("#Features").append("<option value="+dataarray[0]+">'"+dataarray[1]+"'</option>");
        <select id="category" name="category">
        <option value="null" selected="selected">--select--</option>
               <option value="123">BirthDay</option>

            <select id="Features" name="Features" size="20" multiple="multiple" style="width: 200px;">
Now in  java class You have to implement serveResource method for handle ajax call.

public void serveResource(ResourceRequest resourceRequest,
ResourceResponse resourceResponse) throws IOException,
PortletException {
long keyId = ParamUtil.getLong(resourceRequest, "keyId");
if (action.equalsIgnoreCase("first")) {
System.out.println("call serveResource Method");
String keyname = null;
JSONArray dataarray = JSONFactoryUtil.getJSONFactory()
JSONObject json1 = JSONFactoryUtil.createJSONObject();
long keywordid = 0l;
try {
List<Keyword_Master> l = Keyword_MasterLocalServiceUtil
.getByCatId(keyId);        // here i used finder method to get  value
for (int i = 0; i < l.size(); i++) {
keyname = l.get(i).getKeywordName();
keywordid = l.get(i).getKeyId();
dataarray.put(keywordid + ":" + keyname);

json1.put("dataarray", dataarray);

} catch (SystemException e) {
// TODO Auto-generated catch block

Any query raise then comment or send email on