Select box with Liferay

Question

I precise that i am a beginner developper with Liferay 7. I have created a select box where i recover my Organisations. But i want create a second select box that depend of the first. When i have select a organisation , i want saw my SubOrganisations of the organisation selected. I don't konw where i have to begin ;( I hope i have been clear :) .

My portlet :

`public class NetcofilmoPortlet extends MVCPortlet {

public List<Organization> getOrga() {

    Long companyId = PortalUtil.getCompanyIds()[0];
    Long parentOrgaId = OrganizationLocalServiceUtil.getOrganizationId(companyId, "Crédit Agricole");

    List<Organization> Siege = OrganizationLocalServiceUtil.getOrganizations(companyId, parentOrgaId);

    return Siege;
}

@Override
protected void doDispatch(RenderRequest request, RenderResponse response) throws IOException, PortletException {
    request.setAttribute("listeOrganisations", getOrga());

    super.doDispatch(request, response);
}

}`

<aui:select name="Siege" onChange="submit();" id="Siege">
<aui:option value="" selected="true">---Select---</aui:option>
<c:forEach var="organisation" items="${listeOrganisations}">
    <aui:option value="${organisation.getOrganizationId()}">${organisation.getName()}</aui:option>
</c:forEach>

Ashish Singh Ashish Singh · Accepted Answer · 2018-01-10T05:59:05

You can achieve this using ajax call.

On organisation selection you can call onChange method which will call your javascript and from Javascript you can do ajax call (pass organisation id) and retrieve sub-organisations and set those values in second dropdown

I have code for state and city. You can change it to org and sub org as per your requirement.

In JSP:

<select id="state" class="form-control inpt_sty">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
<select id="city" class="form-control inpt_sty"><option value="">Select City</option></select>

Javascript:

$("#state").change(function() {         
    state_id = $(this).val();
    $.ajax({
        url : "<portlet:resourceURL id='CityCall'/>",
        type : 'POST',
        dataType : 'json',
        data : { state_id : state_id},
        success : function(data) {
            console.log(JSON.stringify(data));
            for(var i in data)
            {
                $("#city").append("<option value=" + data[i].city_id + ">" + data[i].city_name + "</option>");
            }
        },
        error : function() {
            console.log("There was an error. Try again please!");
        }
    });
});

And in your portlet class:

public class BranchLocator extends MVCPortlet {
    @Override
    public void serveResource(ResourceRequest resourceRequest, ResourceResponse resourceResponse)throws IOException, PortletException 
    {
        if ("CityCall".equalsIgnoreCase(resourceRequest.getResourceID())) 
        {
             String state_id = resourceRequest.getParameter("state_id");
                //logic to retrieve data
        }
    }
}

Select box with Liferay

1 Answers