带有 Tapestry 的 Bootstrap 模式内的 Ajax 区域答案

【问题标题】：Ajax zone in form inside Bootstrap modal with Tapestry带有 Tapestry 的 Bootstrap 模式内的 Ajax 区域
【发布时间】：2014-06-26 09:16:03
【问题描述】：

我正在使用 Java+Tapestry+jQuery+Hibernate 开发一个 Web 应用程序，并且我有一个 datatable 用于显示数据。此数据是“部分”类 Client，只有几个属性。当我连续单击将他的类更改为“.selected”时，我控制连续双击以显示模式，并且每一行都有一个“id”。在此模式中，我想显示所有客户端类属性，我需要调用数据库 ("getClientByClientId(Long clientId);")，现在在表单中，我想在输入元素中显示属性，以便编辑类。

我的 .tml 区域：

<t:zone t:id="zone" id="zone">
    <t:if test="clientDetails">
        <div class="modal fade" id="modalEdit">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">&times;
                        </button>
                        <h4 class="modal-title">${message:edit-client}</h4>
                    </div>
                    <div class="modal-body">
                            <form role="form" class="form-horizontal"
                                t:id="editRowForm">
                                <div class="form-group">
                                    <input class="form-control" t:id="clientName" t:type="TextField" value="${clientDetails.clientName}"
                                        validate="required" />
                                </div>
                                <div class="form-group">
                                    ..................
                                </div>
                            </form>

                    </div>
                </div>
            </div>
        </div>
        </t:if>
    </t:zone>

我的 Java 类方法：

void onClientDetailsEdit() throws InstanceNotFoundException { clientId = request.getParameter("param"); if (request.isXHR()) { clientDetails = masterFilesService.getClientByClientId(Long.parseLong(clientId)); System.out.println(clientDetails.getClientName()); ajaxResponseRenderer.addRender(zone); } }

在控制台中我打印了客户的名字，它是正确的。

我的 .js 文件：

$("tr").dblclick(function() {
   console.log($(this).attr("id"));
   $.post( "/restaurant/masterfiles/masterclient.clientdetailsedit", {param :$(this).attr("id")});
   $('#modalEdit').modal('show');
 });

在 javaScript 控制台中，“id”是正确的，然后数据库调用也是正确的，但是客户端中的属性“clientDetails”为空并且没有出现名称的值；

【问题讨论】：

标签： java jquery ajax datatable tapestry

【解决方案1】：

由于您使用$.post 自己调用服务器，因此您也必须处理响应。据我可以从您的代码 sn-ps 中假设，这是您的内容未呈现的最可能原因；您只需将这样的内容附加到您的客户端代码：

$.post( "/restaurant/masterfiles/masterclient.clientdetailsedit", {param: $(this).attr("id")}).done(function(data) {

    // assuming you use tapestry5-jquery, you’ll have to do this
    if (data.zones) {
        // perform multi zone update
        $.each(data.zones, function(zoneId, content){

            $('#' + zoneId).tapestryZone('applyContentUpdate', content);
        });
    }

    $.tapestry.utils.loadScriptsInReply(data);
});

如果您使用的是原始的 5.3 Tapestry.js（不知道这与您的 jQuery 集成的效果如何），您将不得不在这里使用一些不同的 JS-API。阅读tapestry.js 来源，了解如何将 ZoneManager 与您的代码集成（我没有提供示例，因为我不知道这是否适用于您的情况）。

【讨论】：