a4j: jsФункция с actionListener внутри h: dataTable

Question

У меня проблема с использованием a4j: jsFunction с actionListener внутри h: dataTable, когда я хочу вызвать действие над определенной строкой с a4j: commandLink, это работает безупречно, но когда я хочу вызвать действие с a4j: jsFunction & actionListener всегда вызывается над последним элементом в dataTable Позвольте привести пример:

    <a4j:form ajaxSubmit="true" reRender="mainForm" id="mainForm">
        <a4j:region>
            <t:saveState value="#{ts.list}" />
        </a4j:region>

        <h:dataTable value="#{ts.list}" var="el" binding="#{ts.bind}">
        <h:column>#{el}</h:column>>
        <h:column>
            <a4j:commandLink actionListener="#{ts.rem}">
                    <h:outputText value="delete by CMDLink" />
                </a4j:commandLink>
            </h:column>
        <h:column>
                <a href="#" onclick="okClicked();">delete by okClicked</a>
                <a4j:jsFunction name="okClicked"
                    actionListener="#{ts.rem}"
                />
        </h:column>
   </h:dataTable>
    </a4j:form>

теперь код бина:

package com.sth;

import java.util.ArrayList;
import java.util.List;

import javax.faces.component.UIData;
import javax.faces.event.ActionEvent;

public class Ts {

    private List<String> list = new ArrayList<String>();
    private UIData bind;

    public Ts(){
        list.add("element1");
        list.add("element2");
        list.add("element3");
        list.add("element4");
    }

    public List<String> getList() {
        return list;
    }

    public void setList(List<String> list) {
        this.list = list;
    }

    public void rem(ActionEvent ae) {
        String toRem = (String) bind.getRowData();
        System.out.println("Deleting " + toRem);
        list.remove(toRem);
    }

    public UIData getBind() {
        return bind;
    }

    public void setBind(UIData bind) {
        this.bind = bind;
    }

}

когда я использую a4j: commandLink для удаления элемента, он работает как положено, но когда я использую a4j: jsFunction для вызова actionListener, он вызывает действие против последнего элемента :( Есть идеи? Приветствия

Answer 1

Вы можете достичь своей цели, переместив из control

Это пример

 <a4j:form ajaxSubmit="true" reRender="mainForm" id="mainForm">

    <h:dataTable value="#{ts.list}" var="el" binding="#{ts.bind}">
      <h:column>#{el}</h:column>>
      <h:column>
            <a4j:commandButton 
                onclick="#{rich:component
                     ('confirmation')}.show();return false">Delete</a4j:commandButton>
      </h:column>
    </h:dataTable>
    <a4j:jsFunction name="remove" action="#{ts.remove(el)}" reRender="mainForm"/>
 </a4j:form>

Диалог подтверждения:

<rich:modalPanel id="confirmation" width="250" height="150">
        <f:facet name="header">
            <h:panelGrid columns="2">
                <h:graphicImage value="/img/delete.gif"/>
                <h:outputText value="Confirmation"/>
            </h:panelGrid>
        </f:facet>
        <h:panelGrid style="height: 100%">
            <h:panelGrid columns="2" cellpadding="5px">
                <h:graphicImage value="/img/error_large.gif"/>
                <h:outputText value="Delete ?" style="font-size: large;"/>
            </h:panelGrid>
            <h:panelGroup style="margin-top: 20px">
                <input type="button" value="Yes" style="width: 100px"
                       onclick="#{rich:component('confirmation')}.hide();remove();return false"/>
                <input type="button" value="No" style="width: 100px"
                       onclick="#{rich:component('confirmation')}.hide();return false"/>
            </h:panelGroup>
        </h:panelGrid>
    </rich:modalPanel>

Answer 2

Насколько я понимаю, с тегом a4j: jsFunction:

<a4j:jsFunction name="okClicked" actionListener="#{ts.rem}" />

, помещенным в столбец таблицы данных, JavaScript-функция с именем okClicked будет добавлена ​​на страницу HTML в столбцедля каждого ряда таблицы.Имея одно и то же имя, каждая функция JavaScript перезаписывает определение предыдущего, поэтому при вызове okClicked() фактически выполняется только последняя определенная функция.Именно поэтому вызывается actionListener, который вызывает «действие против последнего элемента».

Обходным путем будет включение индекса строки как части имени функции JavaScript, создаваемойтег a4j: jsFunction:

<h:dataTable value="#{ts.list}" var="el" binding="#{ts.bind}" rowIndexVar="index">
    <h:column>
        <a href="#" onclick="okClicked#{index}();">delete by okClicked</a>
        <a4j:jsFunction name="okClicked#{index}" actionListener="#{ts.rem}"/>
    </h:column>
</h:datatable>

Я не проверял вышеупомянутое решение (и я не знаю, будет ли проблема связывать #{ts.rem} с функцией JS actionListener, а не связыватьэто commandLink actionListener), но если значение onClick okClicked#{index}(); не работает напрямую, вместо этого вызовите функцию javaScript, которая создает имя функции из строки, построенной из значения индекса:

function onClicked(row) {
    functionStr = "okClicked" + row;
    window[functionStr]();
}

Мне пришлось использовать что-то подобное, требуя сетку 'jsFunction's внутри таблицы данных, где у меня было несколько столбцов, а также несколько строк.

Надеюсь, это полезно для других вбудущее.

Answer 3

По комментариям получается, что вы просто хотите запустить диалог подтверждения. Вы также можете использовать a4j:commandLink для этого, вызвать его в атрибуте onclick и позволить ему вернуть либо true, либо false, чтобы разрешить или заблокировать действие. Вот пример запуска, который вы бы сделали со стандартным диалоговым окном подтверждения:

<a4j:commandLink onclick="return confirm('Are you sure?');">

Таким образом, вам не нужно бороться / отлаживать странное a4j:jsFunction поведение в течение нескольких часов.