title: Liferay ajax call for dependent select boxes
body: <p>I'm having this problem where I need to fill a select box with records,, when I choose a province from the first select box, the second select box should be dynamically filled with the cities in that province..</p>
  
  <p>so this is what I did, I made a table that contains the cities and created a finderImpl for that,, here's the contents (imports not included)</p>
  
  <pre><code>public class m_city_municipalityFinderImpl extends BasePersistenceImpl&lt;m_city_municipality&gt; implements m_city_municipalityFinder{
      public List&lt;m_city_municipality&gt; getCityMunicipalityByProvinceId(long province_id){
          Session session = null;
          try{
              session = openSession();
              String sql = CustomSQLUtil.get("cityMunicipalitySQLQuery");
              SQLQuery queryObject = session.createSQLQuery(sql);
              queryObject.setCacheable(false);
              queryObject.addEntity("m_city_municipality", m_city_municipalityImpl.class);
              QueryPos queryPos = QueryPos.getInstance(queryObject);
              queryPos.add(province_id);
  
              return (List&lt;m_city_municipality&gt;) queryObject.list();
          }catch(Exception e){
              e.printStackTrace();
          }finally{
              closeSession(session);
          }
          return null;
      }
  }
  </code></pre>
  
  <p>then I used liferay's built-in functions to implement ajax using AUI,, here're the codes in my jsp and action portlet</p>
  
  <p><strong>JSP</strong> (the script is written at the bottom)</p>
  
  <pre><code>&lt;%@page import="com.sampleportlet.services.service.m_provinceLocalServiceUtil"%&gt;
  &lt;%@page import="com.sampleportlet.services.model.m_province"%&gt;
  &lt;%@page import="com.liferay.portal.kernel.servlet.SessionErrors"%&gt;
  &lt;%@page import="com.liferay.portal.kernel.servlet.SessionMessages"%&gt;
  &lt;%@page import="com.sampleportlet.services.model.personal_contact_present" %&gt;
  &lt;%@page import="com.sampleportlet.services.service.personal_contact_presentLocalServiceUtil" %&gt;
  &lt;%@page import="com.sampleportlet.services.model.personal_contact_permanent" %&gt;
  &lt;%@page import="com.sampleportlet.services.service.personal_contact_permanentLocalServiceUtil" %&gt;
  &lt;%@page import="com.sampleportlet.services.model.business_contact" %&gt;
  &lt;%@page import="com.sampleportlet.services.service.business_contactLocalServiceUtil" %&gt;
  &lt;%@page import="com.liferay.portal.service.ServiceContext" %&gt;
  &lt;%@page import="com.liferay.portal.service.ServiceContextThreadLocal" %&gt;
  &lt;%@page import="javax.portlet.PortletURL"%&gt;
  &lt;%@page import="com.liferay.portal.kernel.util.Validator"%&gt;
  &lt;%@page import="java.util.List"%&gt;
  &lt;%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %&gt;
  &lt;%@ taglib uri="http://alloy.liferay.com/tld/aui" prefix="aui"%&gt;
  
  &lt;%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %&gt;
  &lt;%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %&gt;
  &lt;script src="js/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;portlet:defineObjects /&gt;
  
  &lt;portlet:actionURL var="ADDFClassActionURL" windowState="normal" name="saveContactDetails"&gt;
  &lt;/portlet:actionURL&gt;
  
  &lt;portlet:resourceURL var="resourceURL" &gt;&lt;/portlet:resourceURL&gt;
  
  &lt;% if(SessionMessages.contains(renderRequest.getPortletSession(),"success")){%&gt;
  &lt;liferay-ui:success key="success" message="Information has been successfully updated." /&gt;
  &lt;%} %&gt;
  &lt;% if(SessionErrors.contains(renderRequest.getPortletSession(),"error")){%&gt;
  &lt;liferay-ui:error key="error" message="There is an Error occured while updating your record. Please try again" /&gt;
  &lt;%} %&gt;
  
  &lt;form action="&lt;%=ADDFClassActionURL%&gt;" name="contactDetails_form" method="POST" role="form"&gt;
  &lt;div class="main-content-body"&gt;
      &lt;center&gt;&lt;h3&gt;APPOINTIVE DIRECTOR DATA FORM&lt;/h3&gt;&lt;/center&gt;
      &lt;div class=" row main-form"&gt;
          &lt;h5 class="header"&gt;Personal Contact Details&lt;/h5&gt;
          &lt;div class="col-md-12 header"&gt;&lt;strong&gt;PRESENT ADDRESS&lt;/strong&gt;&lt;/div&gt;
          &lt;div class="col-md-6"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="pres_home_no_street"&gt;&lt;span&gt;* &lt;/span&gt;Home No. &amp;amp; Street&lt;/label&gt;
                  &lt;input type="text" class="form-control medium" name="&lt;portlet:namespace/&gt;pres_home_no_street" id="&lt;portlet:namespace/&gt;pres_home_no_street" value="&lt;%= pres_home_no_street%&gt;"&gt;
               &lt;/div&gt;
               &lt;div class="form-group"&gt;
                  &lt;label for="pres_province"&gt;&lt;span&gt;* &lt;/span&gt;Province&lt;/label&gt;
                  &lt;select class="form-control medium" name="&lt;portlet:namespace/&gt;pres_province" id="&lt;portlet:namespace/&gt;pres_province" value="&lt;%= pres_province %&gt;"&gt;
                  &lt;%
                      java.util.List&lt;m_province&gt; provinceList = m_provinceLocalServiceUtil.getm_provinces(0, m_provinceLocalServiceUtil.getm_provincesCount());
                      for (m_province i : provinceList) {
                  %&gt;
                      &lt;option value="&lt;%=i.getProvince_id()%&gt;"&gt;&lt;%=i.getProvince()%&gt;&lt;/option&gt;
                  &lt;%
                      }
                  %&gt;
                  &lt;/select&gt;
  
               &lt;/div&gt;
               &lt;div class="form-group"&gt;
                  &lt;label for="pres_city_municipality"&gt;&lt;span&gt;* &lt;/span&gt;City/Municipality&lt;/label&gt;
                  &lt;select class="form-control medium" name="&lt;portlet:namespace/&gt;pres_city_municipality" id="&lt;portlet:namespace/&gt;pres_city_municipality" value="&lt;%= pres_city_municipality %&gt;"&gt;&lt;/select&gt;
               &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-6" style="vertical-align:top;"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="pres_zipcode"&gt;Zip Code&lt;/label&gt;
                  &lt;input type="text" class="form-control medium" name="&lt;portlet:namespace/&gt;pres_zipcode" id="&lt;portlet:namespace/&gt;pres_zipcode" value="&lt;%= pres_zipcode %&gt;"&gt;
               &lt;/div&gt;
               &lt;div class="form-group"&gt;
                  &lt;label for="pres_telno"&gt;&lt;span&gt;* &lt;/span&gt;Tel. No.&lt;/label&gt;
                  &lt;input type="text" class="form-control medium" name="&lt;portlet:namespace/&gt;pres_telno" id="&lt;portlet:namespace/&gt;pres_telno" value="&lt;%= pres_telno %&gt;"&gt;
               &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-12 header"&gt;&lt;strong&gt;PERMANENT ADDRESS&lt;/strong&gt;&lt;/div&gt;
          &lt;div class="col-md-6"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="perm_home_no_street"&gt;&lt;span&gt;* &lt;/span&gt;Home No. &amp;amp; Street&lt;/label&gt;
                  &lt;input type="text" class="form-control medium" name="&lt;portlet:namespace/&gt;perm_home_no_street" id="&lt;portlet:namespace/&gt;perm_home_no_street" value="&lt;%= perm_home_no_street %&gt;"&gt;
               &lt;/div&gt;
               &lt;div class="form-group"&gt;
                  &lt;label for="perm_province"&gt;&lt;span&gt;* &lt;/span&gt;Province&lt;/label&gt;
                  &lt;select class="form-control medium" name="&lt;portlet:namespace/&gt;perm_province" id="&lt;portlet:namespace/&gt;perm_province" value="&lt;%= perm_province %&gt;"  onchange="listMunicipality(this)"&gt;
                  &lt;%
                      for (m_province i : provinceList) {
                  %&gt;
                      &lt;option value="&lt;%=i.getProvince_id()%&gt;"&gt;&lt;%=i.getProvince()%&gt;&lt;/option&gt;
                  &lt;%
                      }
                  %&gt;
                  &lt;/select&gt;
               &lt;/div&gt;
               &lt;div class="form-group"&gt;
                  &lt;label for="perm_city_municipality"&gt;&lt;span&gt;* &lt;/span&gt;City/Municipality&lt;/label&gt;
                  &lt;select class="form-control medium" name="&lt;portlet:namespace/&gt;perm_city_municipality" id="&lt;portlet:namespace/&gt;perm_city_municipality" value="&lt;%= perm_city_municipality %&gt;"  onchange="listMunicipality(this)"&gt;&lt;/select&gt;
               &lt;/div&gt;
               &lt;div class="form-group"&gt;
                  &lt;label for="perm_email"&gt;&lt;span&gt;* &lt;/span&gt;Email Address&lt;/label&gt;
                  &lt;input type="text" class="form-control medium" name="&lt;portlet:namespace/&gt;perm_email" id="&lt;portlet:namespace/&gt;perm_email" value="&lt;%= perm_email %&gt;"&gt;
               &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-6" style="vertical-align:top;"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="perm_zipcode"&gt;Zip Code&lt;/label&gt;
                  &lt;input type="text" class="form-control medium" name="&lt;portlet:namespace/&gt;perm_zipcode" id="&lt;portlet:namespace/&gt;perm_zipcode" value="&lt;%= perm_zipcode %&gt;"&gt;
               &lt;/div&gt;
               &lt;div class="form-group"&gt;
                  &lt;label for="perm_telno"&gt;Tel. No.&lt;/label&gt;
                  &lt;input type="text" class="form-control medium" name="&lt;portlet:namespace/&gt;perm_telno" id="&lt;portlet:namespace/&gt;perm_telno" value="&lt;%= perm_telno %&gt;"&gt;
               &lt;/div&gt;
               &lt;div class="form-group"&gt;
                  &lt;label for="perm_celno"&gt;&lt;span&gt;* &lt;/span&gt;Cel. No.&lt;/label&gt;
                  &lt;input type="text" class="form-control medium" name="&lt;portlet:namespace/&gt;perm_celno" id="&lt;portlet:namespace/&gt;perm_celno" value="&lt;%= perm_celno %&gt;"&gt;
               &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-12 header"&gt;&lt;strong&gt;BUSINESS CONTACT DETAILS&lt;/strong&gt;&lt;/div&gt;
          &lt;div class="col-md-6"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="bus_company_name"&gt;Company Name&lt;/label&gt;
                  &lt;input type="text" class="form-control medium" name="&lt;portlet:namespace/&gt;bus_company_name" id="&lt;portlet:namespace/&gt;bus_company_name" value="&lt;%= bus_company_name %&gt;"&gt;
               &lt;/div&gt;
               &lt;div class="form-group"&gt;
                  &lt;label for="bus_address"&gt;Permanent Address&lt;/label&gt;
                  &lt;input type="text" class="form-control medium" name="&lt;portlet:namespace/&gt;bus_address" id="&lt;portlet:namespace/&gt;bus_address" value="&lt;%= bus_address %&gt;"&gt;
               &lt;/div&gt;
               &lt;div class="form-group"&gt;
                  &lt;label for="bus_email"&gt;Email Address&lt;/label&gt;
                  &lt;input type="text" class="form-control medium" name="&lt;portlet:namespace/&gt;bus_email" id="&lt;portlet:namespace/&gt;bus_email" value="&lt;%= bus_email %&gt;"&gt;
               &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-6" style="vertical-align:top;"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="bus_personal_telno"&gt;Tel. No&lt;/label&gt;
                  &lt;input type="text" class="form-control medium" name="&lt;portlet:namespace/&gt;bus_personal_telno" id="&lt;portlet:namespace/&gt;bus_personal_telno" value="&lt;%= bus_personal_telno %&gt;"&gt;
               &lt;/div&gt;
               &lt;div class="form-group"&gt;
                  &lt;label for="bus_telno"&gt;Tel. No.&lt;/label&gt;
                  &lt;input type="text" class="form-control medium" name="&lt;portlet:namespace/&gt;bus_telno" id="&lt;portlet:namespace/&gt;bus_telno" value="&lt;%= bus_telno %&gt;"&gt;
               &lt;/div&gt;
               &lt;div class="form-group"&gt;
                  &lt;label for="bus_celno"&gt;Cel. No.&lt;/label&gt;
                  &lt;input type="text" class="form-control medium" name="&lt;portlet:namespace/&gt;bus_celno" id="&lt;portlet:namespace/&gt;bus_celno" value="&lt;%= bus_celno %&gt;"&gt;
               &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;aui:script&gt;
  AUI().use('aui-base','aui-io-request','aui-node', function(A){
      A.one("#&lt;portlet:namespace/&gt;pres_province").on('change',function(){       
          A.io.request('&lt;%=resourceURL%&gt;', {
               method: 'POST',
               data: { 
                  "&lt;portlet:namespace/&gt;provinceName" : A.one("#&lt;portlet:namespace/&gt;pres_province").val()
               },
               dataType: 'json',
               on: {
                   success: function() {
                      var citiesList =this.get('responseData');   //on success fuction we will get response data
                      A.one('#&lt;portlet:namespace /&gt;pres_city_municipality').empty();
                      //using for loop we iterating the list
                      for(var i in citiesList){
                          A.one('#&lt;portlet:namespace /&gt;pres_city_municipality').append("&lt;option value='"+ citiesList[i] +"' &gt;"+citiesList[i]+"&lt;/option&gt; ");
                      }
                  }
              }
          });
      });
      A.one("#&lt;portlet:namespace/&gt;perm_province").on('change',function(){       
          A.io.request('&lt;%=resourceURL%&gt;', {
               method: 'POST',
               data: { 
                  "&lt;portlet:namespace/&gt;provinceName" : A.one("#&lt;portlet:namespace/&gt;perm_province").val()
               },
               dataType: 'json',
               on: {
                   success: function() {
                      var citiesList =this.get('responseData');   //on success fuction we will get response data
                      A.one('#&lt;portlet:namespace /&gt;perm_city_municipality').empty();
                      //using for loop we iterating the list
                      for(var i in citiesList){
                          A.one('#&lt;portlet:namespace /&gt;perm_city_municipality').append("&lt;option value='"+ citiesList[i] +"' &gt;"+citiesList[i]+"&lt;/option&gt; ");
                      }
                  }
              }
          });
      });
  });
  &lt;/aui:script&gt;
  
  
  
  &lt;div class="buttons"&gt;
      &lt;button id="edit" class="edit"&gt;Edit&lt;/button&gt;
      &lt;input class="save" type="submit" name="saveContactDetails" id="saveContactDetails" value="Save"/&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>Action Portlet Class</strong> (only written is the serveResource method)</p>
  
  <pre><code>public static Log log = LogFactoryUtil.getLog(ActionClass.class);
  
      @Override
      public void serveResource(ResourceRequest resourceRequest, ResourceResponse resourceResponse) throws IOException, PortletException {
          try {
  
              //contact details
              String provinceName = ParamUtil.getString(resourceRequest, "provinceName");
              log.info("PROVINCE HERE::::::&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt; "+ provinceName);
              System.out.println("PROVINCE HERE::::::&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt; "+ provinceName);
  
              JSONArray city_municipalityArray = JSONFactoryUtil.createJSONArray();
              List&lt;m_city_municipality&gt; citiesList = m_city_municipalityFinderUtil.getCityMunicipalityByProvinceId(Long.parseLong(provinceName));
  
              System.out.println(citiesList);
              for(m_city_municipality m : citiesList){
                  city_municipalityArray.put(m.getCity_municipality());
              }
  
              PrintWriter writer = resourceResponse.getWriter();
              writer.write(city_municipalityArray.toString());
              writer.println(city_municipalityArray.toString());
              writer.flush();
          } catch (Exception e) {
              e.printStackTrace();
              log.error(e);
          }
      }
  </code></pre>
  
  <p>I ran this but what I get is a null pointer exception, and also the combo box show weird stuff, sorry I dont have enough reputation to attach an image of it..</p>
  
  <p>what seems to be my problem with this? can you point out what's wrong with my code?</p>