Forums

Home » Liferay Portal » English » 3. Development

Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
mehmet tasar
How to populate second aui:select element.
November 20, 2011 1:39 AM
Answer

mehmet tasar

Rank: Junior Member

Posts: 47

Join Date: March 6, 2011

Recent Posts

I have two aui:select element. When first one is selected, i want to populate other one. Data list should come from my service util.

How can i do that. can you give some example.
Nagendra Kumar Busam
RE: How to populate second aui:select element.
November 20, 2011 2:37 AM
Answer

Nagendra Kumar Busam

Rank: Liferay Master

Posts: 598

Join Date: July 7, 2009

Recent Posts

check the serveResource method for the same. This is added in portal spec for AJAX kind of calls
mehmet tasar
RE: How to populate second aui:select element.
November 20, 2011 5:29 AM
Answer

mehmet tasar

Rank: Junior Member

Posts: 47

Join Date: March 6, 2011

Recent Posts

is there any example?
Nagendra Kumar Busam
RE: How to populate second aui:select element.
November 20, 2011 9:30 AM
Answer

Nagendra Kumar Busam

Rank: Liferay Master

Posts: 598

Join Date: July 7, 2009

Recent Posts

Hi Mehmet,

Here is the sample, not exactly working example - just steps to achieve your requirement. Hope it helps emoticon

 1    function  <portlet:namespace />populateSecondDropDown(obj){
 2   
 3        // Ajax call to get data for target assets
 4        jQuery.ajax({
 5            url: '<portlet:resourceURL id="get-second-dd-details" escapeXml="false" />',
 6            data: {
 7                fristSelectValue: GET_THE_FIRST_SELECTED_DROP_DOWNS_VALUE
 8            },
 9            dataType: 'json',
10            type: 'POST',
11            success: function(data) {
12                // Populate the second dropdown based on values returned
13            },
14            error: function(xhr, ajaxOptions, thrownError) {
15                alert("populateSecondDropDown : Error : " + xhr.status + " - " + xhr.statusText);
16            }            
17        });   
18       
19    }


In you portlet class in serverResource

 1    public void serveResource(ResourceRequest resourceRequest,
 2            ResourceResponse resourceResponse) throws IOException,
 3            PortletException {
 4        String resourceID = resourceRequest.getResourceID();
 5
 6        JSONObject json = JSONFactoryUtil.createJSONObject();
 7        List<YourEntity> yourEntities =null;
 8        if(resourceID.equals("get-second-dd-details")){
 9            // Call you serviceutil & send response in json format
10            yourEntities = YourEntityLocalServiceUtil.getSecondDDDetails(assetId);
11            json.put("secondDDDetails", YourEntityJSONSerializer.toJSONArray(yourEntities));
12            writer.write(json.toString());
13            writer.flush();
14        }
15    }
mehmet tasar
RE: How to populate second aui:select element.
November 21, 2011 4:34 AM
Answer

mehmet tasar

Rank: Junior Member

Posts: 47

Join Date: March 6, 2011

Recent Posts

Thank you Nagendra. it is worked for meemoticon

and last one question, how can i create MyEntityJSONSerializer.toJSONArray ?
Michał Kolenda
RE: How to populate second aui:select element.
November 21, 2011 5:06 AM
Answer

Michał Kolenda

Rank: New Member

Posts: 18

Join Date: November 25, 2010

Recent Posts

The second approach is to use liferay-dynamic-select javascript as it is done in My Account portlet.

Look at /portal/portal-web/docroot/html/portlet/users_admin/common/addresses.jsp to view the sample code. There are two aui:select elements. The first one lists countries and the second one lists regions of country selected in the first aui:select element.
Nagendra Kumar Busam
RE: How to populate second aui:select element.
November 21, 2011 5:08 AM
Answer

Nagendra Kumar Busam

Rank: Liferay Master

Posts: 598

Join Date: July 7, 2009

Recent Posts

MyEntityJSONSerializer it will be generated automatically in Liferay 6 when you build service using service builder tool.

Second approach is as Jim metioned using liferay-dynamic-select javascript
mehmet tasar
RE: How to populate second aui:select element.
November 21, 2011 6:16 AM
Answer

mehmet tasar

Rank: Junior Member

Posts: 47

Join Date: March 6, 2011

Recent Posts

i use Liferay 6, but JSONSerializer doesnt be generated..is there anything else that i don't know?
Nagendra Kumar Busam
RE: How to populate second aui:select element.
November 21, 2011 6:29 AM
Answer

Nagendra Kumar Busam

Rank: Liferay Master

Posts: 598

Join Date: July 7, 2009

Recent Posts

Try to give remote-service="true" as below

1    <entity name="YouEntity" local-service="true" remote-service="true" json-enabled="true">
mehmet tasar
RE: How to populate second aui:select element.
November 21, 2011 6:49 AM
Answer

mehmet tasar

Rank: Junior Member

Posts: 47

Join Date: March 6, 2011

Recent Posts

Thank you so much Nagendra.. I learnt a lot of thingsemoticon
Josef Šustáček
RE: How to populate second aui:select element.
November 21, 2011 7:44 AM
Answer

Josef Šustáček

Rank: New Member

Posts: 22

Join Date: October 5, 2009

Recent Posts

In 6.0.6, the file you are describing is located under portal-web/docroot/html/portlet/enterprise_admin/common/addresses.jsp. I'm not sure, whether you are not referencing some other version where it was moved.

Anyway, thanks a lot for pointing this functionality out, very interesting piece of code!
Michał Kolenda
RE: How to populate second aui:select element.
November 21, 2011 7:59 AM
Answer

Michał Kolenda

Rank: New Member

Posts: 18

Join Date: November 25, 2010

Recent Posts

Josef Šustáček:
In 6.0.6, the file you are describing is located under portal-web/docroot/html/portlet/enterprise_admin/common/addresses.jsp. I'm not sure, whether you are not referencing some other version where it was moved.


Oh, of course - in LR 6.0.x the file was placed in Enterprise Admin portlet. So, we are talking about the same file. Currently I use Liferay's trunk version and the directory tree looks a liitle bit different than in 6.0.x.
sheela mk
RE: How to populate second aui:select element.
June 21, 2012 11:59 PM
Answer

sheela mk

Rank: Regular Member

Posts: 112

Join Date: February 16, 2012

Recent Posts

Hai..Mehnet..is it possible to share example of triple down using JSonObject..if you have done it..emoticon
Manish Kumar Jaiswal
RE: How to populate second aui:select element.
September 6, 2012 7:56 AM
Answer

Manish Kumar Jaiswal

Rank: Regular Member

Posts: 132

Join Date: November 25, 2008

Recent Posts

Hi Nagendra ,

In My case I am using following code

JSONObject json = JSONFactoryUtil.createJSONObject();
List<Region> rgn =RegionServiceUtil.getRegions(new Long(countryId));
json.put("secondDDDetails", JSONSerializer.toJSONArray(rgn));

since I am trying to retrieve regions of a particular country which is already have a Service created by Liferay how can I get this object in this case.(My entity JSONSerializer).


Regards
Manish
Manish Kumar Jaiswal
RE: How to populate second aui:select element.
September 7, 2012 4:54 AM
Answer

Manish Kumar Jaiswal

Rank: Regular Member

Posts: 132

Join Date: November 25, 2008

Recent Posts

I think some things are missing or changed in new version so I am putting my code for new users who want this to work

 1
 2public void serveResource(ResourceRequest resourceRequest,
 3                ResourceResponse resourceResponse) throws IOException,
 4                PortletException {
 5              System.out.println("in serveResource with ................... : ");
 6             
 7              System.out.println("Into serveResource :: myAjaxCall function");
 8             String countryId = resourceRequest.getParameter("SelectedValue");
 9              System.out.println("countryId......"+countryId);
10              String resourceID = resourceRequest.getResourceID();
11              System.out.println("resourceID............"+resourceID);
12             if( countryId!=null ){
13               
14               
15                    System.out.println("Into if else");
16                    // Called RegionServiceUtil & send response in json format
17                    String returnData="";
18                    String returnData2="";
19                    try {
20                           JSONObject json = JSONFactoryUtil.createJSONObject();
21                    List<Region> rgn =RegionServiceUtil.getRegions(new Long(countryId));
22                    List lst = new ArrayList<String>();
23                    List lst2 = new ArrayList<String>();
24                    for (Iterator iterator = rgn.iterator(); iterator.hasNext();) {
25                        Region region = (Region) iterator.next();
26                        System.out.println("Region......."+region.getName());
27                        returnData=returnData+","+region.getName();
28                        returnData2=returnData2+","+region.getRegionId();
29                    }
30                   
31                   
32                     json.put("secondDDDetails", JSONFactoryUtil.looseSerialize(returnData)); 
33                     json.put("secondDDDetails2", JSONFactoryUtil.looseSerialize(returnData2)); 
34                     Writer writer = resourceResponse.getWriter();
35                    writer.write(json.toString());
36                    writer.flush();
37                    } catch (NumberFormatException e) {
38                        // TODO Auto-generated catch block
39                        e.printStackTrace();
40                    } catch (SystemException e) {
41                        // TODO Auto-generated catch block
42                        e.printStackTrace();
43                    }
44                     
45               }
46              System.out.println(".....PutData please..... : ");
47         
48        }


jscode
 1$(document).ready(
 2        function() {
 3
 4            $("#addressCountry").change(
 5                    function() {
 6
 7                        var singleValues = $("#addressCountry").val();
 8                        alert("lv2.......");
 9                        var myAjaxCall = $("#myAjaxCall").val();
10                        // Ajax call to get data for target assets
11                        alert("lv3.......");
12
13                        jQuery.ajax({
14                            url : myAjaxCall,
15                            data : {
16                                SelectedValue : singleValues
17                            },
18                            dataType : 'json',
19                            type : 'POST',
20                            success : function(returndata) {
21                                //    alert("This is the data we need......"+returndata.secondDDDetails);
22
23                                var myString = returndata.secondDDDetails;
24                                var myString2 = returndata.secondDDDetails2;
25
26                                var e = document
27                                        .getElementById('addressRegion');
28
29                                var mySplitResult = myString.split(",");
30                                var mySplitResult2 = myString2.split(",");
31
32                                for (i = 0; i < (mySplitResult.length); i++) {
33                                    e.options[i] = new Option(mySplitResult[i],
34                                            mySplitResult2[i]);
35
36                                }
37
38                            },
39                            error : function(xhr, ajaxOptions, thrownError) {
40                                alert("populateSecondDropDown : Error : "
41                                        + xhr.status + " - " + xhr.statusText);
42                            }
43                        });
44                    });
45        });


JSP
1
2<portlet:resourceURL var='myAjaxCall'>
3<portlet:param name="id" value="get-second-dd-details"></portlet:param>
4<portlet:param name="escapeXml" value="false"></portlet:param>
5</portlet:resourceURL>
6
7<input id="myAjaxCall" name="myAjaxCall"  type="hidden" value="<%=myAjaxCall%>" />


Regards
Manish