Невозможно редактировать строку таблицы с помощью AJAX - PullRequest
Новая
       1

Невозможно редактировать строку таблицы с помощью AJAX

0 голосов
/ 31 марта 2012

У меня есть эта таблица JSF, которая используется для отображения данных. Я хочу использовать AJAX для обновления строк таблицы. 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      >
    <h:head>
        <h:outputStylesheet library="css" name="table-style.css"  />
    </h:head>
    <h:body>

        <h1>JSF 2 dataTable example</h1>
        <h:form>
            <h:dataTable id="ajaxtable" 
                        value="#{order.orderModel}" var="o"
                styleClass="order-table"
                headerClass="order-table-header"
                rowClasses="order-table-odd-row,order-table-even-row">

                        <h:column>

                    <f:facet name="header">No</f:facet>

                    <h:inputText rendered="false"/>

                    <h:outputText value="#{order.orderModel.rowIndex + 1}"  />

                </h:column>
                <h:column>

                    <f:facet name="header">Order No</f:facet>

                    <h:inputText value="#{o.orderNo}" size="10" rendered="#{o.editable}" />

                    <h:outputText value="#{o.orderNo}" rendered="#{not o.editable}" />

                </h:column>

                <h:column>

                    <f:facet name="header">Product Name</f:facet>

                    <h:inputText value="#{o.productName}" size="20" rendered="#{o.editable}" />

                    <h:outputText value="#{o.productName}" rendered="#{not o.editable}" />

                </h:column>

                <h:column>

                    <f:facet name="header">Price</f:facet>

                    <h:inputText value="#{o.price}" size="10" rendered="#{o.editable}" />

                    <h:outputText value="#{o.price}" rendered="#{not o.editable}" />

                </h:column>

                <h:column>

                    <f:facet name="header">Quantity</f:facet>

                    <h:inputText value="#{o.qty}" size="5" rendered="#{o.editable}" />

                    <h:outputText value="#{o.qty}" rendered="#{not o.editable}" />

                </h:column>

                <h:column>

                    <f:facet name="header">Action</f:facet>

                    <h:commandLink id="editlink" value="Edit" action="#{order.editAction(o)}" rendered="#{not o.editable}">
                                    <f:ajax execute="@this" render="editlink"/>
                                </h:commandLink>

                </h:column>

            </h:dataTable>

            <h:commandButton value="Save Changes" action="#{order.saveAction}">
                    <f:ajax execute="@this" render="ajaxtable"/>
                </h:commandButton>


        </h:form>
    </h:body>

</html>

Когда я нажимаю эту кнопку (ссылку), строка таблицы не обновляется. 

    <h:commandLink id="editlink" value="Edit" action="#{order.editAction(o)}" rendered="#{not o.editable}">
          <f:ajax execute="@this" render="editlink"/>
    </h:commandLink>

Я подозреваю, что AJAX нельзя использовать, когда у меня есть ссылки.

И вторая проблема заключается в следующем: 

            <h:column>

                <f:facet name="header">No</f:facet>

                <h:inputText rendered="false"/>

                <h:outputText value="#{order.orderModel.rowIndex + 1}"  />

            </h:column>

Если я удаляю inputText, я получаю эту ошибку: Index: 0, Size: 0. Должен ли я оставить это?

С наилучшими пожеланиями

1 Ответ

1 голос
/ 31 марта 2012

Ошибка в атрибуте render рассматриваемой ссылки ajax: 

<h:commandLink id="editlink" ...>
    <f:ajax execute="@this" render="editlink" />
</h:commandLink>

Вы говорите, чтобы она отображала только ссылку редактирования.Вы в основном делаете то же самое, что и render="@this".Вы не говорите ему, чтобы сделать таблицу.Вы должны указать это для отображения таблицы.

Сначала дайте <h:form> фиксированный id, чтобы вы могли указать фиксированный идентификатор клиента позже в render. 

<h:form id="form">

Затем исправьте ссылку ajax следующим образом, чтобы она отображала таблицу: 

<h:commandLink id="editlink" ...>
    <f:ajax execute="@this" render=":form:ajaxtable" />
</h:commandLink>

Альтернативой является привязка таблицы к представлению, чтобы можно было динамически получить ее идентификатор клиента: 

<h:dataTable binding="#{table}" ...>

с 

<h:commandLink id="editlink" ...>
    <f:ajax execute="@this" render=":#{table.clientId}" />
</h:commandLink>

(таким образом, вы также можете показать номер строки по #{table.rowIndex} без необходимости DataModel)

См.также:

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...