java - Tapestry 中的确认对话框

Question

我在这里遇到了非常奇怪的情况，我无法设置字段，因为输入位于客户端，并且仅在我从 mixin 中按“确认”后才会调用 onSuccess 函数。不能后退，不能前进。

我按“确认”，然后打开“确认”对话框。但是因为这里的值尚未设置(它们正在等待“确认”对话框中的“提交”)，所以我将这些值设置为 null 和 0。您能否建议我如何摆脱这种情况。另外，让我烦恼的是，一旦进入对话模式，我就无法单击“确认”按钮，而且我不知道为什么会这样。

感谢您的帮助。

       <t:layout t:pageTitle='${message:AddTickets}' xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd">
        <t:jquery.jgrowl />
        <form t:type="form" t:id="dodajTiket">
            <t:zone t:id="zonaDjelovanja" id="zonaDjelovanja">
                <t:errors/>
                <div class="palette palette-concrete" style="height:80%;">

                    <div class="col-xs-12" style="margin-left:17px;">
                        <h5>${message:selectTypeOfTicket}</h5>
                        <t:select t:id="drawTip" style="color:black;" validate="required" t:event="OsvjeziZonu" zone="zonaDjelovanja" />
                    </div>
                    <!-- fecha del sorteo -->
                    <div class="col-xs-12">
                        <div class="col-xs-3">
                            <t:label for="datum"><h6>${message:datum}</h6></t:label>
                            <t:datefield id="uzmiDatum" validate="required" class="form-control" t:id="datum"/>
                        </div>

                        <!-- no de fracciones -->
                        <div class="col-xs-3">
                            <div class="post-box"><label><h6>${message:numberOfTickets}</h6></label>
                                <input class="form-control" validate="required"  t:type="TextField" t:id="brojTiketa" t:value="brojTiketa"/></div>   
                        </div>
                    </div>
                    <div class="col-xs-12">
                        <div class="col-xs-3">
                            <div class="post-box"><label><h6>${message:number}</h6></label>
                                <input class="form-control" id="uzmiBroj" validate="required"  t:type="TextField" t:id="broj"/></div>   
                        </div>
                        <div class="col-xs-3">
                            <div class="post-box"><label><h6>${message:serial}</h6></label>
                                <input class="form-control" validate="required"  t:type="TextField" t:id="series" t:value="series" /></div>
                        </div> 

                        <div class="col-xs-3">
                            <div class="post-box"><label><h6>${message:price}</h6></label>
                                <input class="form-control" t:type="TextField" t:id="cijena" t:value="cijena"/></div>  
                        </div>
                    </div>
                    <div class="col-xs-12">
                        <br></br>
                        <br></br>
                        <div class="col-xs-3">
                            <!--
                            <t:submit value="Confirmar" t:event="dodajTiket" class="form-control"  t:height="300" t:message="¿Seguro que desea crear esta entrada? ${kopijaBroj}" t:mixins="confirm"/>
                            -->
                            <t:zone t:id="zonaUploadovanja" id="zonaDjelovanja">
                                <div t:type="jquery/dialog" t:zone="zonaDjelovanja" t:clientId="modal-example" class="k-modal" t:params="params">
                                    <div class="content">

                                        <p>¿Seguro que desea crear esta entrada? 
                                        </p> 
                                        ${brojTiketa}
                                        <!--
                                            <script> document.getElementById('izmiBroj').value</script>-->
                                        <p style="color:red; font-size: 25px;">6</p>
                                    </div>
                                    <t:submit t:event="OsvjeziZonu" value="Confirmar" class="form-control" />
                                </div>
                            </t:zone>
                        </div>
                    </div>
                </div>
            </t:zone>
        </form>

        <t:jquery.dialoglink t:dialog="modal-example" class="k-modal-trigger">Open</t:jquery.dialoglink>
    </t:layout>

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package rs.domaci.pages;

import org.apache.commons.lang.StringUtils;
import org.apache.tapestry5.ComponentResources;
import org.apache.tapestry5.EventConstants;
import org.apache.tapestry5.PersistenceConstants;
import org.apache.tapestry5.alerts.AlertManager;
import org.apache.tapestry5.annotations.Component;
import org.apache.tapestry5.annotations.InjectComponent;
import org.apache.tapestry5.annotations.OnEvent;
import org.apache.tapestry5.annotations.Persist;
import org.apache.tapestry5.annotations.Property;
import org.apache.tapestry5.corelib.components.Form;
import org.apache.tapestry5.corelib.components.Zone;
import org.apache.tapestry5.hibernate.annotations.CommitAfter;
import org.apache.tapestry5.ioc.annotations.Inject;
import org.apache.tapestry5.json.JSONObject;
import org.apache.tapestry5.services.ComponentSource;
import org.apache.tapestry5.services.Request;
import org.apache.tapestry5.services.ajax.AjaxResponseRenderer;
import org.hibernate.Session;
import rs.domaci.entities.Tiket;
import rs.domaci.entities.TiketStatus;
import rs.domaci.entities.TipDrawTiketa;

/**
 * This page is for generating tickets!
 *
 * @author
 */
public class AddTickets {

    @Property
    private String drawNumberOfTicket;
    @Inject
    private Session hibernate;
    @Property
    private int series;
    @Property
    @Persist(PersistenceConstants.CLIENT)
    private String datum;
    @Inject
    private ComponentSource componentSource;
    @Property
    // price
    private int cijena;
    @Property
    @Persist
    private String kopijaDatum;
    @Property
    @Persist
    private int kopijaBroj;
    /**
     * @Property private
     */
    @Property
    @Persist(PersistenceConstants.CLIENT)
    private int broj;
    @Property
    @Persist(PersistenceConstants.FLASH)
    private int brojTiketa;
    @Property
    private TiketStatus status = TiketStatus.DISPONIBLE;
    @InjectComponent
    private Zone zonaDjelovanja;
    @Inject
    private Request request;
    @Inject
    private AjaxResponseRenderer ajaxResponseRenderer;
    @Inject
    private ComponentResources componentResources;
    @Property
    @Persist(PersistenceConstants.FLASH)
    private TipDrawTiketa drawTip;
    @Inject
    private AlertManager manager;
    @Component(id = "dodajTiket")
    private Form form;

    // Generally useful bits and pieces
    void setupRender() {

        datum = null;
        updateDisplay(drawTip);
    }

//    public TipDrawTiketa getNAVIDENA() {
//        brojTiketa = 20;
//        return TipDrawTiketa.NAVIDENA;
//    }
//
//    public TipDrawTiketa getCHANCES() {
//        brojTiketa = 10;
//        return TipDrawTiketa.CHANCES;
//    }
//
//    public TipDrawTiketa getLOTERIANACIONAL() {
//        brojTiketa = 20;
//        return TipDrawTiketa.LOT_NAC;
//    }

    public String getFormatirajMe() {
        String prviDio = String.format("%03d", series);
        String drugiDio = String.format("%02d", broj);
        return prviDio + drugiDio;
    }

    public Object getOsvjeziZonu() {
        if (drawTip == drawTip.LOT_NAC) {
            brojTiketa = 20;
            return zonaDjelovanja.getBody();
        } else if (drawTip == drawTip.CHANCES) {
            brojTiketa = 10;
            return zonaDjelovanja.getBody();
        } else if (drawTip == drawTip.NAVIDENA) {
            brojTiketa = 10;
            return zonaDjelovanja.getBody();
        } else {
            brojTiketa = 10;
            return zonaDjelovanja.getBody();
        }
    }

    @OnEvent(value = EventConstants.VALUE_CHANGED, component = "drawTip")
    public Object updateDisplay(TipDrawTiketa tipDrawTiketaa) {
        drawTip = tipDrawTiketaa;
        if (drawTip == TipDrawTiketa.LOT_NAC) {
            brojTiketa = 20;
            return zonaDjelovanja.getBody();
        } else if (drawTip == TipDrawTiketa.CHANCES) {
            brojTiketa = 10;
            return zonaDjelovanja.getBody();
        } else if (drawTip == TipDrawTiketa.NAVIDENA) {
            brojTiketa = 20;
            return zonaDjelovanja.getBody();
        } else {
            brojTiketa = 20;
            return zonaDjelovanja.getBody();
        }
    }


    /**
     * 
     * @return
     */

    @CommitAfter
    @OnEvent(value = "submit", component = "dodajTiket")
    void onDodajTiket() {
        for (int i = 0; i < brojTiketa; i++) {
            hibernate.save(new Tiket(StringUtils.leftPad(String.valueOf(series + "" + broj), 5, ""), datum, drawTip, String.format("%03d", series), String.format("%02d", broj), status, cijena));

        }
        String redom = "Created ticket sheet  serial   " + series + "\n" + "    number   " + broj;
        //manager.alert(Duration.UNTIL_DISMISSED, Severity.INFO, redom);
        componentResources.discardPersistentFieldChanges();
    }

    @Property
    private JSONObject params;

    @OnEvent(EventConstants.ACTIVATE)
    public void onActivate() {

        params = new JSONObject();

        params.accumulate("modal", true);


    }
}

在此图像上，我尝试使用区域内 Cantidad de Fracciones 字段中的参数，并且仅在加载页面时才起作用，cantidad de fracciones 的值也会在对话框内更改，但它是不是因为 AJAX，我认为它从页面加载中获取 Cantidad de Fracciones 的值，并且在停留在此页面期间无法更改它，这不是我想要的。我希望当我更改 Cantidad de Fracciones 字段内的输入时，更新对话框内的 Cantidad de Fracciones 值。

更新:

由于这都是客户端的事情，我选择使用 Lance Java 答案中建议的 JQuery 方法并监听给定字段的文本更改。

<script>
                $("input")
                        .keyup(function() {
                    var value = $(broj).val();
                    $("#provjeraBroj").text(value);
                    var value = $(datum).val();
                    $("#provjeraDatum").text(value);
                    //var value = $(drawTip).val();

                    $('#drawTip').change(function() {
                        var $selected = $(this).find('option:selected');
                        if ($selected.val() === 'LOT_NAC') {
                            $("#provjeraDrawTip").text("Loteri");
                        }
                        if ($selected.val() === 'CHANCES') {
                            $("#provjeraDrawTip").text("Chances");
                        }
                        else {
                            $("#provjeraDrawTip").text("Navideña");

                        }
                    }).change();


                    var value = $(series).val();
                    $("#provjeraSeries").text(value);
                    var value = $(brojTiketa).val();
                    $("#provjeraBrojTiketa").text(value);
                })
                        .keyup();
            </script>

Answer 1

确认 mixin 在每次客户端调用时不会生成动态消息。该消息是在页面呈现时在服务器端确定的(检查浏览器中的 HTML 源代码，您将看到该消息)。

因此 t:message="¿Seguro que desea crear esta entrada? ${kopijaBroj}" 将使用这些字段的初始值(null 和 0)进行渲染。

如果您想要基于当前字段值的动态消息，我可以看到两个选项:

1. 每次显示消息时，使用 JavaScript 将消息中的标记替换为客户端字段值。
2. 每次都进行服务器端往返来呈现消息。这将需要使用请求参数将当前值传递到服务器端。

无论哪种方式，确认 mixin 都不会立即执行此操作，因此您需要一个自定义 mixin。选项 1 将提供更好的用户体验，因为它是全客户端的。