2

これは、JavaScriptからjspページのスクリプトレットコードにパラメーターを渡すことが不可能であることを知っています。そこで、ajaxを使用して、選択した値をサーバーに送信し、使用するリクエストオブジェクトによってスクリプトレットコードで取得したいと思います。

<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;
}%>

このタグでajax投稿を実行する方法を教えてください。そうしないと、私のシナリオで任意のタグを使用できます。

4

2 に答える 2

1

HTTPおよびWebアプリケーションがどのように機能するかをまったく理解していないようです。要求/応答サイクルについて学ぶ必要があります。

AJAXはあなたがやりたいことには正しいことですが、名前が示すように、AJAXは非同期JavaScriptであり、Javaメソッド呼び出しをonchange属性に入れようとします。これは機能しません。

最初に要求したことを実行するには、ポートレットクラスを見つけてserveResource(ResourceRequest req, ResourceResponse resp) メソッドを実装する必要があります。このメソッドでは、選択した値（String selectedVal = req.getParameter("selectedVal")）を受け取り、その値に応じて何かを返します。

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

次に、そのメソッドに対してAJAX呼び出しを行う必要があります。大まかに次のようになります。

<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>

お役に立てれば。

于 2012-08-09T13:02:44.277 に答える
0

2つの選択があるとします。1つは主題を選択するためのもので、もう1つは主題の選択に従ってトピックを自動的に入力するためのものです。この例はAj​​axで試し、成功しました。

** JSPの場合：**

1. declare this in your jsp

    <portlet:resourceURL var="fetchTopicsResourceURL" />
after 
        <portlet:defineObjects />

  1. 件名選択の最初の選択オプション

     <aui:select id="subject" name="subject" label="Subject"
    inlineField="true" onChange='<%= renderResponse.getNamespace() + "fetchTopics();"%>'>
    <aui:option selected="true" value="">
        <liferay-ui:message key="Please select one.." />
    </aui:option>
    <%
        int totalsubject = SubjectLocalServiceUtil
                        .getSubjectsCount();
                List<Subject> subjectList = SubjectLocalServiceUtil
                        .getSubjects(0, totalsubject);
                for (Subject subject : subjectList) {
    %>
    <aui:option value="<%=subject.getSubjectId()%>"><%=subject.getSubjectName()%></aui:option>

    <%
        }
    %>

  2. 上記の主題選択に従ってトピックを自動的に入力するための2番目の選択オプション。

  3. 次のように、subjectの値の変更時に実行されるjavascript関数を記述します。

    Liferay.provide(
    window,
    '<portlet:namespace />fetchTopics',
    function() {

        var A = AUI();

        var fetchTopicsURL = '<%= fetchTopicsResourceURL.toString() %>';

        // selecting the sourceSelect drop-down to get the current value
        var sourceElement = A.one("#<portlet:namespace />subject");

        // selecting the targetSelect drop-down to populate values
        var targetElement = A.one("#<portlet:namespace />topic");

        A.io.request (
            // the resource URL to fetch words
            fetchTopicsURL, {
            data: {
                // request parameters to be sent to the Server
                <portlet:namespace />subject: sourceElement.val()
            },
            dataType: 'json',
            on: {
                    failure: function() {
                        // if there was some error at the server
                        alert("Ajax failed! There was some error at the server");
                    },
                    success: function(event, id, obj) {

                        // JSON Data recieved from Server

                        var topicsArray = this.get('responseData');

                        // crude javascript magic to populate the drop-down

                        //clear the content of select
                        targetElement.html("");

                        for (var j=0; j < topicsArray.length; j++) {

                            targetElement.append("<option value='" + topicsArray[j] + "'>" + topicsArray[j] + "</option>");
                        }
                    }
                }
            }
        ); 
    },
    ['aui-io']
);

これがすべてのjspコーディングです。:)

次の部分は、以下に示すように、ポートレットクラスのメソッドを作成することです。

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

        String subject = ParamUtil.getString(resourceRequest, "subject");

        // build the JsonArray to be sent back
        JSONArray jsonArray = JSONFactoryUtil.createJSONArray();

        //put some topics
        if(subject.equals("Maths")){
        jsonArray.put("Math1");
        jsonArray.put("Math2");
        jsonArray.put("Math3");
        }
        if(subject.equals("Science")){
        jsonArray.put("science1");
        jsonArray.put("science2");
        jsonArray.put("science3");
        }


        // set the content Type
        resourceResponse.setContentType("text/javascript");

        // using printWrite to write to the response
        PrintWriter writer = resourceResponse.getWriter();

        writer.write(jsonArray.toString());
    }

それがすべてのコーディングです..:)

于 2014-09-10T12:26:02.593 に答える