Liferay portlet + struts2 + Ajax

Question

I have tried this a lot since last couple of days, but still not able to solve this.

I am using liferay 6.1 and struts 2. Basically i have two dropdowns in my liferay portlet, one for country and other for states. When selecting the country, state list needs to be in drop down list according to the country selected. I am trying to do this through AJAX. (Below code I found from google, its working in a separate Dynamic Web Project, but when i tried this in liferay portlet its throwing error.

Below is my Code:

StartPage.jsp

<script >
$(document).ready(function() {
    $('#country').change(function(event) {
        var country = $("select#country").val();
        alert(country);
         $.getJSON("<s:url action='ajaxAction' namespace='ajax' includeParams='none' />", {countryName : country}, function(jsonResponse) {
                $('#ajaxResponse').text(jsonResponse.dummyMsg);
                alert($('#ajaxResponse').text(jsonResponse.dummyMsg));
                var select = $('#states');
                select.find('option').remove();
                $.each(jsonResponse.stateMap, function(key, value) {
                  $('<option>').val(key).text(value).appendTo(select);
                });
            });
    });
});
</script>




<s:form name="StartPage" id="StartPage">

        <s:select id="country" name="country"
            list="{'Select Country','India','US'}" label="Select Country" />
        <br />
        <br />
        <s:select id="states" name="states" list="{'Select State'}"
            label="Select State" />
        <br />
        <br />
        <div id="ajaxResponse"></div>

</s:form>

struts.xml

<package name="default" extends="json-default">
        <action name="ajaxAction" class="com.action.AjaxJsonAction">
            <result type="json">/WEB-INF/view/StartPage.jsp
            </result>
        </action>
    </package>

Action Class:

public class AjaxJsonAction  extends DefaultActionSupport{

    private Map<String, String> stateMap = new LinkedHashMap<String, String>();
    private String dummyMsg;
    //Parameter for Jquery
    private String countryName;

    @Override
    public String execute() {
        System.out.println("i am executed...");
        System.out.println("CountryName: " + countryName);
        if (countryName.equals("India")) {
            stateMap.put("1", "Kerala");
            stateMap.put("2", "Tamil Nadu");
            stateMap.put("3", "Jammu Kashmir");
            stateMap.put("4", "Assam");
        } else if (countryName.equals("US")) {
            stateMap.put("1", "Georgia");
            stateMap.put("2", "Utah");
            stateMap.put("3", "Texas");
            stateMap.put("4", "New Jersey");
        } else if (countryName.equals("Select Country")) {
            stateMap.put("1", "Select State");
        }
        dummyMsg = "Ajax action Triggered";
        System.out.println("exiting.....");
        return "success";
    }

    public Map<String, String> getStateMap() {
        return stateMap;
    }

    public String getDummyMsg() {
        return dummyMsg;
    }

    public String getCountryName() {
        return countryName;
    }

    public void setStateMap(Map<String, String> stateMap) {
        this.stateMap = stateMap;
    }

    public void setDummyMsg(String dummyMsg) {
        this.dummyMsg = dummyMsg;
    }

    public void setCountryName(String countryName) {
        this.countryName = countryName;
    }
}

Errro Log:

java.lang.IllegalArgumentException: application/json;charset=UTF-8 is not a supported mime type
    at com.liferay.portlet.MimeResponseImpl.setContentType(MimeResponseImpl.java:159)
    at org.apache.struts2.portlet.servlet.PortletServletResponse.setContentType(PortletServletResponse.java:219)
    at org.apache.struts2.json.JSONUtil.writeJSONToResponse(JSONUtil.java:225)
    at org.apache.struts2.json.JSONResult.writeToResponse(JSONResult.java:211)
    at org.apache.struts2.json.JSONResult.execute(JSONResult.java:172)
    at com.opensymphony.xwork2.DefaultActionInvocation.executeResult(DefaultActionInvocation.java:373)

Answer 1

You can use AJAX AUI script for this. I am using Liferay 6.2 sp2 SDK and Liferay MVC portlet. You can try this with struts approach to see if it helps you.

Use liferay.provide function in your AUI script.

<aui:script>
Liferay.provide(
    window,
    '<portlet:namespace />updatePermState',
    function() {
        var A = AUI();
        var url = '<%= ajaxCallResourceURL.toString() %>';
        A.io.request(
            url,
            {
                //data to be sent to server
                data: {
                <portlet:namespace />param1: (document.getElementById('<portlet:namespace/>mCountry').value),
                }, .....

}

Create servResource function in your portlet class. This will be wired with your AUI call:

public void serveResource(ResourceRequest resourceRequest, ResourceResponse resourceResponse) throws IOException, PortletException {

        resourceResponse.setContentType("text/javascript");
... ...
//Send Data Back
 resourceResponse.setContentType("text/html");
}

In your calling JSP file add this:

<!-- Create a serveResource URL -->
<portlet:resourceURL var="ajaxCallResourceURL" />

AJAX call. I am using onChange method when on the Country field. My UpdatePermState() function is creating a div with the states dynamically.

<aui:select name="mCountry" id="mCountry" label="Country of permanent address*" inlineLabel="left" onChange='<%= renderResponse.getNamespace() + "updatePermState();" %>'>