Tapestry中的确认对话框

Question

这里我遇到了非常奇怪的情况，我无法设置字段，因为输入在客户端，只有在按下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);


    }
}

​

​

在这张图片上，我尝试使用一个区域内的悬臂梁de Fracciones字段的参数，它只有在页面加载时才能工作，悬臂分形的值也会在对话框中被更改，但这不是因为AJAX，我认为它从页面加载中得到了悬臂de fracciones的值，并且在这个页面上停留期间它不能被更改，这不是我想要的。我希望在对话框中的悬臂德分形值被更新时，当我改变输入在一个领域悬臂德分形。

更新：

因为这都是客户端的事情，所以我选择了使用JQuery方法，就像Lance中所建议的那样，并听取给定字段的文本更改。

<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

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

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

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

1. 每次显示消息时，使用javascript将消息中的令牌替换为clientside字段值。
2. 每次进行一次服务器端往返以呈现消息。这将要求使用请求参数传递当前值。

无论哪种方式，确认混音都不会直接执行这个操作，所以您需要一个自定义的混合器。选项1将是一个更好的用户体验，因为它的所有客户端。