How to populate second aui:select element.

[mehmet tasar, modificado 12 Anos atrás.]

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, modificado 12 Anos atrás.]

check the serveResource method for the same. This is added in portal spec for AJAX kind of calls

[mehmet tasar, modificado 12 Anos atrás.]

is there any example?

[Nagendra Kumar Busam, modificado 12 Anos atrás.]

Hi Mehmet,

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

	function  <portlet:namespace />populateSecondDropDown(obj){
	
		// Ajax call to get data for target assets
		jQuery.ajax({
			url: '<portlet:resourceurl id="get-second-dd-details" escapeXml="false" />',
			data: {
				fristSelectValue: GET_THE_FIRST_SELECTED_DROP_DOWNS_VALUE
			},
			dataType: 'json',
			type: 'POST',
			success: function(data) {
				// Populate the second dropdown based on values returned
			},
			error: function(xhr, ajaxOptions, thrownError) {
				alert("populateSecondDropDown : Error : " + xhr.status + " - " + xhr.statusText);
			}			
		});	
		
	}

In you portlet class in serverResource

	public void serveResource(ResourceRequest resourceRequest,
			ResourceResponse resourceResponse) throws IOException,
			PortletException {
		String resourceID = resourceRequest.getResourceID();

		JSONObject json = JSONFactoryUtil.createJSONObject();
		List<yourentity> yourEntities =null;
		if(resourceID.equals("get-second-dd-details")){
			// Call you serviceutil &amp; send response in json format
			yourEntities = YourEntityLocalServiceUtil.getSecondDDDetails(assetId);
			json.put("secondDDDetails", YourEntityJSONSerializer.toJSONArray(yourEntities));
			writer.write(json.toString());
			writer.flush();
		}
	}</yourentity>

[mehmet tasar, modificado 12 Anos atrás.]

Thank you Nagendra. it is worked for me

and last one question, how can i create MyEntityJSONSerializer.toJSONArray ?

[Nagendra Kumar Busam, modificado 12 Anos atrás.]

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, modificado 12 Anos atrás.]

i use Liferay 6, but JSONSerializer doesnt be generated..is there anything else that i don't know?

[Nagendra Kumar Busam, modificado 12 Anos atrás.]

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

	<entity name="YouEntity" local-service="true" remote-service="true" json-enabled="true"></entity>

[mehmet tasar, modificado 12 Anos atrás.]

Thank you so much Nagendra.. I learnt a lot of things

[Manish Kumar Jaiswal, modificado 11 Anos atrás.]

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, modificado 11 Anos atrás.]

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

public void serveResource(ResourceRequest resourceRequest,
	            ResourceResponse resourceResponse) throws IOException,
	            PortletException {
			  System.out.println("in serveResource with ................... : ");
			  
			  System.out.println("Into serveResource :: myAjaxCall function");
			 String countryId = resourceRequest.getParameter("SelectedValue");
			  System.out.println("countryId......"+countryId);
		      String resourceID = resourceRequest.getResourceID();
		      System.out.println("resourceID............"+resourceID);
		     if( countryId!=null ){
		        
		        
		        	System.out.println("Into if else");
		            // Called RegionServiceUtil & send response in json format
		        	String returnData="";
		        	String returnData2="";
		        	try {
		        		   JSONObject json = JSONFactoryUtil.createJSONObject();
		        	List<region> rgn =RegionServiceUtil.getRegions(new Long(countryId));
		        	List lst = new ArrayList<string>();
		        	List lst2 = new ArrayList<string>();
		        	for (Iterator iterator = rgn.iterator(); iterator.hasNext();) {
						Region region = (Region) iterator.next();
						System.out.println("Region......."+region.getName());
						returnData=returnData+","+region.getName();
						returnData2=returnData2+","+region.getRegionId();
					}
		        	
		        	
		        	 json.put("secondDDDetails", JSONFactoryUtil.looseSerialize(returnData));  
		        	 json.put("secondDDDetails2", JSONFactoryUtil.looseSerialize(returnData2));  
		        	 Writer writer = resourceResponse.getWriter();
		            writer.write(json.toString());
		            writer.flush();
					} catch (NumberFormatException e) {
						// TODO Auto-generated catch block
						e.printStackTrace();
					} catch (SystemException e) {
						// TODO Auto-generated catch block
						e.printStackTrace();
					}
		        	 
		       }
			  System.out.println(".....PutData please..... : ");
	      
	    }
</string></string></region>

jscode

$(document).ready(
		function() {

			$("#addressCountry").change(
					function() {

						var singleValues = $("#addressCountry").val();
						alert("lv2.......");
						var myAjaxCall = $("#myAjaxCall").val();
						// Ajax call to get data for target assets
						alert("lv3.......");

						jQuery.ajax({
							url : myAjaxCall,
							data : {
								SelectedValue : singleValues
							},
							dataType : 'json',
							type : 'POST',
							success : function(returndata) {
								//	alert("This is the data we need......"+returndata.secondDDDetails);

								var myString = returndata.secondDDDetails;
								var myString2 = returndata.secondDDDetails2;

								var e = document
										.getElementById('addressRegion');

								var mySplitResult = myString.split(",");
								var mySplitResult2 = myString2.split(",");

								for (i = 0; i < (mySplitResult.length); i++) {
									e.options[i] = new Option(mySplitResult[i],
											mySplitResult2[i]);

								}

							},
							error : function(xhr, ajaxOptions, thrownError) {
								alert("populateSecondDropDown : Error : "
										+ xhr.status + " - " + xhr.statusText);
							}
						});
					});
		});

JSP

<portlet:resourceurl var="myAjaxCall">
<portlet:param name="id" value="get-second-dd-details"></portlet:param>
<portlet:param name="escapeXml" value="false"></portlet:param>
</portlet:resourceurl>

<input id="myAjaxCall" name="myAjaxCall" type="hidden" value="<%=myAjaxCall%>">

Regards
Manish

[sheela mk, modificado 11 Anos atrás.]

Hai..Mehnet..is it possible to share example of triple down using JSonObject..if you have done it..

[Jim Dunlop, modificado 12 Anos atrás.]

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.

[Josef Šustáček, modificado 12 Anos atrás.]

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!

[Jim Dunlop, modificado 12 Anos atrás.]

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.