ajax on aui:select liferay

Question

I know this is impossible to pass parameter from javascript to scriptlet code in jsp page So I want to use ajax to post my selected value to server and then get it in scriptlet code by request object I use

<aui:select label="My Selection" name="ms" id="ms" onchange="<%= updateItem()%>" >
    <%
    for(String item : itemList){            
    %>
    <aui:option selected="<%= item.equals(selItem) %>" value="<%=item%>"><%=item%></aui:option>         
    <%}%>
</aui:select>

<%! 
private Object updateItem() throws Exception{
    //to do something with selected value
return null;
}%>

Please show me how to excute ajax post in this tag, or any tag can be used in my scenario

Solution

You don't seem to realize at all how HTTP and web applications work. You have to learn about request/response cycle.

The AJAX is the right thing to you for what you want to do, but as name says AJAX is Asynchronous JavaScript - and you try to put java method call in your onchange attribute. This won't work.

To do what you ask for first, you have to find your Portlet class, and implement serveResource(ResourceRequest req, ResourceResponse resp) method, where you will be receiving the selected value ( String selectedVal = req.getParameter("selectedVal") ) and returning something depending on that value.

String result = null; 
if ("blah".equals(selectedVal))
  { result = "Something"; } 
else 
  { result = "Something Else"; } 
resourceResponse.getPortletOutputStream().write(result.getBytes("UTF-8")); 

Then you have to make your AJAX calls to that method. Should roughly look like this:

<portlet:resourceUrl var="resourceUrl">
<portlet:param name="selectedVal" value="PARAM_PLACEHOLDER_SELECTED_VAL" />
</portlet:resourceUrl>
<aui:script use="io">
function ajax<portlet:namespace />MySelect(selectedVal) {
        A.io(
            '${resourceUrl}'.replace("PARAM_PLACEHOLDER_SELECTED_VAL", selectedVal),
            {
                on: {
                    success: <portlet:namespace />processResponse(select, response);
                }
            }
        );

function <portlet:namespace />processResponse(response) {
alert("Here's what java code returned:"+response+". Do whatever you want with it - with javascript");
}
</aui:script>

...

<aui:select label="My Selection" name="ms" id="ms" onchange="ajax<portlet:namespace>MySelect(this.values[this.selectedIndex])" >
    <%
    for(String item : itemList){            
    %>
    <aui:option selected="<%= item.equals(selItem) %>" value="<%=item%>"><%=item%></aui:option>         
    <%}%>
</aui:select>

Hope this helps.

Comments

[user1487380]

I was change my logical and had created 1 portlet that maintains that values. however, thanks for reply ^^