javascript - 在XPage上添加JQuery对话框的方法-6ren

javascript - 在XPage上添加JQuery对话框的方法

转载作者：行者123 更新时间：2023-12-03 02:42:19

我有一个div，它应该表现得像JQuery dialog。在此div中，我输入了一些数据，试图对其进行验证，然后将其保存到数据库中。当用户单击时，对话框打开。我遇到了3个问题：

1. jQuery ID选择器

基本上我们知道如果我们尝试找到

 <xp:div id="addingDialog"> 
 </xp:div>

using a JQuery selector like this var dialog = $('#addingDialog') - it would give us no result since id's in XPages are computed dynamically. So I've decided to declare it using classes(styleClasses, if you like) like this

 <xp:div styleClass="addingDialog"> 
 </xp:div>

JQuery is like this : var dialog = $('.addingDialog'). Seems to work, not nice though.

2. Clicking on the button which is supposed to validate it and make all the backend stuff doesn't work :(

Unfortunately, when I click "Add" button (the button which saves) nothing happens - dialog closes, even if validation fails and doesn't save anything, even if the input was correct.

So I found a solution - Don't use dialog and JQuery.

But this is not the correct solution, at least not for this case. But even here another problem appears - validation

There are 2 dialogs: one is for adding and another for editing (JQuery doesn't allow to have only one dialog with different buttons function), both have validation and I have to input something into editing in order to add new! Initially I thought that validation in XPages works like this - when the user clicks corresponsing button (Add or Edit) all the inputText in corresponding div checks and if it's right - validation succeedes and backend action takes place. The question is - how can I make it work like this? It turned out that every inputText on a page checks. I don't want it to work like this(Screenshot without using JQuery) This is what I see on a page. If I input whatever values in editing dialog and click "+Add Part" everything works fine. Maybe exactly because of this saving actions in the dialog don't occur? Because I have only one dialog open, but validation "sees" that other hidden's inputs are empty so the validation fails? Here's my code

    <xp:div styleClass="dialogAddPart">
    <xp:table>
                <xp:tr>
                <xp:td><xp:label value="Title:" /></xp:td>
                <xp:td>
                <xp:inputText 
                styleClass="doc_field_textinput" id="input_part_title" type="text" size="40" disableClientSideValidation="true" required="true">
                <xp:this.validators>
                <xp:validateRequired
                    message="#{javascript:return('This field is required')}">
                </xp:validateRequired>
                </xp:this.validators>
                </xp:inputText>
                <xp:message id="message15" for="input_part_title"
                                rendered="true" showDetail="false" showSummary="true"
                                style="font-style:italic;background_field-color:rgb(217,234,235);border-color:rgb(102,102,102)">
                </xp:message>
                </xp:td>
                </xp:tr>

                <xp:tr>
                <xp:td><xp:label value="Total:"/></xp:td>
                <xp:td>
                <xp:inputText id="input_tsnb_all"
                                disableClientSideValidation="true"
                                styleClass="doc_field_textinput" required="true" size="40" >
                <xp:this.validators>
                    <xp:validateRequired
                    message="#{javascript:return('This field is required')}">
                    </xp:validateRequired>
                </xp:this.validators>
                <xp:this.converter>
                        <xp:convertNumber pattern="0.000"></xp:convertNumber>
                </xp:this.converter>
                </xp:inputText>
                <xp:message id="message2" for="input_tsnb_all"
                                rendered="true" showDetail="false" showSummary="true"
                                style="font-style:italic;background_field-color:rgb(217,234,235);border-color:rgb(102,102,102)">
                </xp:message>
                </xp:td>
                </xp:tr>

                <xp:tr>
                <xp:td><xp:label value="build-works"/></xp:td>
                <xp:td>
                <xp:inputText type="text" size="40" id="input_tsnb_build_work"
                                disableClientSideValidation="true"
                                styleClass="doc_field_textinput" required="true">
                <xp:this.validators>
                                    <xp:validateRequired
                                        message="#{javascript:return('This field is required')}">
                                    </xp:validateRequired>
                </xp:this.validators>

                <xp:this.converter>
                    <xp:convertNumber pattern="0.000"></xp:convertNumber>
                </xp:this.converter>    

                </xp:inputText>

                    <xp:message id="message3"
                        for="input_tsnb_build_work" rendered="true" showDetail="false"
                        showSummary="true"
                        style="font-style:italic;background_field-color:rgb(217,234,235);border-color:rgb(102,102,102)">
                    </xp:message>

                </xp:td>
                </xp:tr>

                <xp:tr>
                <xp:td><xp:label value="equipment"/></xp:td>
                <xp:td>
                <xp:inputText id="input_tsnb_equipment"
                                disableClientSideValidation="true"
                                styleClass="doc_field_textinput" required="true" size="40" >
                <xp:this.validators>
                    <xp:validateRequired
                    message="#{javascript:return('This field is required')}">
                    </xp:validateRequired>
                </xp:this.validators>
                <xp:this.converter>
                        <xp:convertNumber pattern="0.000"></xp:convertNumber>
                </xp:this.converter>
                </xp:inputText>
                <xp:message id="message5" for="input_tsnb_equipment"
                                rendered="true" showDetail="false" showSummary="true"
                                style="font-style:italic;background_field-color:rgb(217,234,235);border-color:rgb(102,102,102)">
                </xp:message>
                </xp:td>
                </xp:tr>

                <xp:tr>
                <xp:td><xp:label value="other costs"/></xp:td>
                <xp:td>
                <xp:inputText type="text" size="40" id="input_tsnb_other_costs"
                                disableClientSideValidation="true"
                                styleClass="doc_field_textinput" required="true" >
                <xp:this.validators>
                    <xp:validateRequired
                        message="#{javascript:return('This field is required')}">
                    </xp:validateRequired>
                </xp:this.validators>

                <xp:this.converter>
                    <xp:convertNumber pattern="0.000"></xp:convertNumber>
                </xp:this.converter>

                </xp:inputText>

                    <xp:message id="message6"
                        for="input_tsnb_other_costs" rendered="true" showDetail="false"
                        showSummary="true"
                        style="font-style:italic;background_field-color:rgb(217,234,235);border-color:rgb(102,102,102)">
                    </xp:message>

                </xp:td>
                </xp:tr>

                <xp:tr>
                <xp:td><xp:label value="including tax"/></xp:td>
                <xp:td>
                <xp:inputText type="text" size="40" id="input_tsnb_pir"
                                disableClientSideValidation="true"
                                styleClass="doc_field_textinput" required="true">

                <xp:this.validators>
                        <xp:validateRequired
                                message="#{javascript:return('This field is required')}">
                        </xp:validateRequired>
                </xp:this.validators>

                <xp:this.converter>
                    <xp:convertNumber pattern="0.000"></xp:convertNumber>
                </xp:this.converter>                

                </xp:inputText>

                <xp:message id="message7" for="input_tsnb_pir"
                        rendered="true" showDetail="false" showSummary="true"
                        style="font-style:italic;background_field-color:rgb(217,234,235);border-color:rgb(102,102,102)">
                </xp:message>

                </xp:td>
                </xp:tr>

                <xp:tr>
                <xp:td><xp:label value="return sum"/></xp:td>
                <xp:td>

                <xp:inputText type="text" size="40"
                                id="input_tsnb_return"
                                disableClientSideValidation="true"
                                styleClass="doc_field_textinput" required="true">

                    <xp:this.validators>
                        <xp:validateRequired
                            message="#{javascript:return('This field is required')}">
                        </xp:validateRequired>
                    </xp:this.validators>

                    <xp:this.converter>
                        <xp:convertNumber pattern="0.000"></xp:convertNumber>
                    </xp:this.converter>

                </xp:inputText>

                <xp:message id="message8"
                    for="input_tsnb_return" rendered="true" showDetail="false"
                    showSummary="true"
                    style="font-style:italic;background_field-color:rgb(217,234,235);border-color:rgb(102,102,102)">
                </xp:message>

                </xp:td>
                </xp:tr>

<xp:tr>
            <xp:td colspan="2" style="padding-top: 15px">
             <xp:button id="save_part_btn" value="+Add part" style="float:right;">
             <xp:eventHandler event="onclick" submit="true"
                refreshMode="complete">
                <xp:this.action><![CDATA[#{javascript:
                            //Backend code  
}]]></xp:this.action>
             </xp:eventHandler>
             </xp:button>
            </xp:td>
            </xp:tr>
            </xp:table>
    </xp:div>

用于编辑的代码是相同的，期望值使用相应的部分（后端）检索，并且id带有前缀 _edit。保存更改按钮尚无任何后端操作。

我的JQuery是：

$(document).ready(function() {
/*
Ignore it
  $('.partTableContent').hide();
  $('.expandButton').click(function() {
    // .parent() selects the A tag, .next() selects the P tag
    $(this).closest('tr').next(' tr').find('div.partTableContent').slideToggle(750);
  }); 
*/   

  var dialogAddPartDiv = $('.dialogAddPart'); 

  $('.addButton').click(function() 
  {
    dialogAddPartDiv.dialog('open');
  });

  dialogAddPartDiv.dialog(
  {
  create: function (event, ui) {


                $(".ui-corner-all").css('border-bottom-right-radius','8px');
                $(".ui-corner-all").css('border-bottom-left-radius','8px');
                $(".ui-corner-all").css('border-top-right-radius','8px');
                $(".ui-corner-all").css('border-top-left-radius','8px');

                $(".ui-dialog").css('border-bottom-left-radius','0px');
                $(".ui-dialog").css('border-bottom-right-radius','0px');
                $(".ui-dialog").css('border-top-left-radius','0px');
                $(".ui-dialog").css('border-top-right-radius','0px');

                $('.ui-dialog-titlebar-close').css('margin', '-25px -20px 0px 0px').css('border', 'solid 2px').css('border-radius', '15px').css('border-color', '#05788d');
                $('.ui-dialog-titlebar-close').css('width', '25px').css('height', '25px');
            },

    autoOpen: false,
    modal: true,
    beforeClose : function(event) 
    {
        if(!confirm("Part won't be saved. Continue"))
        {
        return false;
        }
        else 
        {

        }
    },
    width:600,
    resizable: false
  });


  var dialogEditPartDiv = $('#dialogEditPart'); 

  $('.editButton').click(function() 
  {
      dialogEditPartDiv.dialog('open');
  });

  dialogEditPartDiv.dialog(
  {
  create: function (event, ui) {

                $(".ui-corner-all").css('border-bottom-right-radius','8px');
                $(".ui-corner-all").css('border-bottom-left-radius','8px');
                $(".ui-corner-all").css('border-top-right-radius','8px');
                $(".ui-corner-all").css('border-top-left-radius','8px');

                $(".ui-dialog").css('border-bottom-left-radius','0px');
                $(".ui-dialog").css('border-bottom-right-radius','0px');
                $(".ui-dialog").css('border-top-left-radius','0px');
                $(".ui-dialog").css('border-top-right-radius','0px');

                $('.ui-dialog-titlebar-close').css('margin', '-25px -20px 0px 0px').css('border', 'solid 2px').css('border-radius', '15px').css('border-color', '#05788d');
                $('.ui-dialog-titlebar-close').css('width', '25px').css('height', '25px');
    },
    autoOpen: false,
    modal: true,
    beforeClose : function(event) 
    {
        if(!confirm("Changes won't be saved. Continue?"))
        {
        return false;
        }
        else 
        {

        }
    },
    width:600,
    resizable: false
  });

});

希望问题清楚。我只想打开对话框，验证输入并最终执行后端代码。实际上，我希望它被隐藏并成为对话框，而不是页面上仅可见的丑陋div。谢谢

最佳答案

您要问的不是一件容易的事，并且需要大量的JSF理解-阶段侦听器，部分执行，部分刷新，faces-config.xml，JavaScript等。

如果要实现它，您必须承担很多责任并继续阅读...

相位监听器

相位监听器通过faces-config.xml配置。 faces-config.xml将如下所示：

<faces-config>
    <lifecycle>
        <phase-listener>demo.ValidationPhaseListener
        </phase-listener>
    </lifecycle>
    ...

在开始之前，我们首先创建一个Helper类，以便共享一个通用方法以及其他几个方法，该方法将在该方法中以及以后的其他地方使用：

package demo;

public enum Helper {
    ;

    private static final String ON_SUCCESS_REFRESH_ID_PARAM = "onSuccessRefreshId";

    public static void setResponseErrorHeader(FacesContext facesContext, PhaseId phaseId) {
        HttpServletResponse response = (HttpServletResponse) facesContext.getExternalContext().getResponse();

        response.setHeader("Application-Error", phaseId.toString());
    }

    public static void applyOnSuccessRefreshId(FacesContext facesContext) {
        if (!AjaxUtil.isAjaxPartialRefresh(facesContext)) {
            throw new UnsupportedOperationException();
        }

        String refreshId = (String) facesContext.getExternalContext().getRequestParameterMap().get(ON_SUCCESS_REFRESH_ID_PARAM);

        if (refreshId != null) {
            ((FacesContextEx) facesContext).setPartialRefreshId(refreshId);
        }
    }

    public static void applyOnSuccessRefreshId(FacesContext facesContext, ActionEvent event) {
        if (!AjaxUtil.isAjaxPartialRefresh(facesContext)) {
            throw new UnsupportedOperationException();
        }

        Parameter param = getComponentParam(event.getComponent(), ON_SUCCESS_REFRESH_ID_PARAM);

        if (param != null) {
            ((FacesContextEx) facesContext).setPartialRefreshId(param.getValue());
        }
    }
}

验证阶段侦听器类将负责设置响应头值，以防验证阶段失败时我们可以查询该值。从框架的角度来看，验证错误并不等于500错误，而总是200。如果没有这种区别，我们将不知道是否关闭对话框。

package demo;

public class ValidationPhaseListener implements PhaseListener {

    private static final long serialVersionUID = 1L;

    @Override
    public PhaseId getPhaseId() {
        return PhaseId.PROCESS_VALIDATIONS;
    }

    @Override
    public void beforePhase(PhaseEvent phaseEvent) {

    }

    @Override
    public void afterPhase(PhaseEvent phaseEvent) {
        FacesContext facesContext = phaseEvent.getFacesContext();

        if (facesContext.getMessages().hasNext()) {
            Helper.setResponseErrorHeader(facesContext, getPhaseId());
        }
    }

}

JavaScript辅助程式库

为了鼓励重用和良好的组织，最好设置一个静态库，该库将随使用对话框的每个XPage一起加载。在这种特殊情况下，我使用引导程序模态，因此逻辑与之最匹配。 JS文件如下所示：

var Helper = {
    isBadRequest : function(xhr) {
        return xhr.getResponseHeader("Application-Error") !== null;
    },
    jquery : function(query) {
        if (typeof query !== "string") {
            return query;
        }

        return $(query.replace(/:/g, "\\3A"));
    },
    modal : function(id, options, additionalOptions) {
        var m = this.jquery(id);
        var addOpts = additionalOptions || {};

        if ("hide" === options) {
            var successRefreshId = m.data("success-cid");

            if (addOpts.eventId && addOpts.execId && successRefreshId) {
                XSP
                        .partialRefreshPost(
                                addOpts.refreshId || null,
                                {
                                    execId : addOpts.execId,
                                    params : {
                                        "$$xspsubmitid" : addOpts.eventId,
                                        "onSuccessRefreshId" : successRefreshId
                                    },
                                    onComplete : "if (!Helper.isBadRequest(arguments[1].xhr)) { hub.modal('"
                                            + id
                                            + "', 'hide', { hide: false }) }",
                                    onError : 'console.log(arguments[0])'
                                });

                return;
            }
        } else {
            if (addOpts.successRefreshId) {
                m.data("success-cid", addOpts.successRefreshId);
            }

            var eventId = m.data("reset-eid");

            if (eventId) {
                var componentId = m.data("reset-cid");

                addOpts.hide = function() {
                    XSP.partialRefreshPost(componentId || null, {
                        immediate : true,
                        execId : eventId,
                        params : {
                            "$$xspsubmitid" : eventId
                        }
                    });
                };
            }
        }

        for (addOpt in addOpts) {
            switch (addOpt) {
            case "show":
            case "shown":
            case "hide":
            case "hidden":
                var evName = addOpt + ".bs.modal";

                if (addOpts[addOpt] instanceof Function) {
                    m.one(evName, addOpts[addOpt]);
                } else {
                    m.off(evName);
                }

                break;
            }
        }

        m.modal(options);
    }
};

我知道，模态方法有很多事情要做。为了涵盖特定的边缘情况，它很复杂-至少就我的设计方式而言。您无需过多地关注它。您想知道的是它与自定义控件（在XPages方面我定义为我的模态模板）紧密结合。

模态自定义控件

模态是通过自定义控件定义的，以便“轻松”重用：

<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

    <xp:div
        styleClass="modal inmodal ${empty compositeData.animationClass ? 'fade' : 'in'}"
        role="dialog">
        <xp:this.attrs>
            <xp:attr name="id" value="#{compositeData.clientId}" />
            <xp:attr name="data-reset-eid" value="#{compositeData.resetEventId}"
                rendered="#{not empty compositeData.resetEventId}" />
            <xp:attr name="data-reset-cid" value="#{compositeData.resetComponentId}"
                rendered="#{not empty compositeData.resetComponentId}" />
            <xp:attr name="tabindex" value="-1" />
            <xp:attr name="aria-hidden" value="true" />
        </xp:this.attrs>
        <div class="modal-dialog ${compositeData.size}">
            <div
                class="modal-content ${empty compositeData.animationClass ? '' : compositeData.animationClass}">
                <xp:div styleClass="modal-header">
                    <xp:callback facetName="header" rendered="${compositeData.headerCustom}" />

                    <xp:text rendered="${not compositeData.headerCustom}">
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&#215;</span>
                            <span class="sr-only">
                                <xp:text value="${msg.app.close}" />
                            </span>
                        </button>

                        <xp:text tagName="i"
                            styleClass="fa #{compositeData.headerIcon} modal-icon" rendered="#{not empty compositeData.headerIcon}" />

                        <xp:panel tagName="h4" styleClass="modal-title"
                            rendered="#{not empty compositeData.headerTitle}">
                            <xp:text value="#{compositeData.headerTitle}" />
                        </xp:panel>

                        <xp:panel tagName="small" styleClass="font-bold"
                            rendered="#{not empty compositeData.headerDescription}">
                            <xp:text value="#{compositeData.headerDescription}" />
                        </xp:panel>
                    </xp:text>
                </xp:div>

                <div class="modal-body">
                    <xp:callback facetName="body" />
                </div>

                <xp:div styleClass="modal-footer">
                    <xp:callback facetName="footer" />
                </xp:div>
            </div>
        </div>
    </xp:div>

</xp:view>

其 .xsp-config定义：

<?xml version="1.0" encoding="UTF-8"?>
<faces-config>
    <faces-config-extension>
        <namespace-uri>http://www.ibm.com/xsp/custom</namespace-uri>
        <default-prefix>xc</default-prefix>
    </faces-config-extension>
    <composite-component>
        <component-type>layoutModal</component-type>
        <composite-name>layoutModal</composite-name>
        <composite-file>/layoutModal.xsp</composite-file>
        <composite-extension>
            <designer-extension>
                <in-palette>true</in-palette>
            </designer-extension>
        </composite-extension>
        <property>
            <property-name>clientId</property-name>
            <property-class>string</property-class>
            <property-extension>
                <required>true</required>
            </property-extension>
        </property>
        <property>
            <property-name>size</property-name>
            <property-class>string</property-class>
            <property-extension>
                <designer-extension>
                    <editor>com.ibm.workplace.designer.property.editors.comboParameterEditor</editor>
                    <editor-parameter>modal-sm&#xd;
modal-lg</editor-parameter>
                </designer-extension>
            </property-extension>
        </property>
        <property>
            <property-name>animationClass</property-name>
            <property-class>string</property-class>
        </property>
        <property>
            <property-name>headerIcon</property-name>
            <property-class>string</property-class>
        </property>
        <property>
            <property-name>headerTitle</property-name>
            <property-class>string</property-class>
        </property>
        <property>
            <property-name>headerDescription</property-name>
            <property-class>string</property-class>
        </property>
        <property>
            <property-name>headerCustom</property-name>
            <property-class>boolean</property-class>
        </property>
        <property>
            <property-name>resetEventId</property-name>
            <property-class>string</property-class>
        </property>
        <property>
            <property-name>resetComponentId</property-name>
            <property-class>string</property-class>
        </property>
    </composite-component>
</faces-config>

除了一堆属性外，它定义的是根据模态的复杂性要使用的一系列模式。如果能够发现它，那么我为模态定义的 id是固定类型的-不是动态的。鼓励使用固定值而不是动态值，但通过评估所有情况，我意识到，在某些情况下，固定ID很有帮助。

链接和模式

是时候使用页面上的自定义控件将内容放在一起了。
让我们从链接开始。

我们使用链接“准备”模态。首先，重要的是要以外科手术的精确度工作，以便既高效又减少使用模态时的烦恼。 JavaScript在客户端发生，除非状态以某种方式与服务器端同步，否则服务器端不会知道。理解这一点很重要，因为除非明确告知事件处理程序，否则由于操作的结果将完全刷新页面-这意味着整个页面将像第一次一样重新构建-至少从JavaScript的角度来看，这样会丢失跟踪开放模式。

因此，每当您要使用模式时，并且需要准备其内容时，使用部分执行和部分刷新就很重要。实际上，如果您从不使用部分刷新和执行，则应该认真地问自己为什么。

<xp:link id="linkOpenDialog">
    <xp:eventHandler event="onclick" submit="true"
        execMode="partial" refreshMode="partial" refreshId="modalDemoBody"
        action="#{myBean.myAction}"
        onComplete="Helper.modal('#modal-account', { backdrop: 'static', keyboard: false })" />
</xp:link>

如果您看一下上面的示例，我设置的内容如下：1）执行该操作时， execMode="partial"忽略页面上的所有其他评估； 2）执行该操作时， refreshMode="partial" refreshId="modalDemoBody"唯一将在页面上更新的元素不是整个页面，而是 modalDemoBody及其所有子代（即模态主体内容），3） action="#{myBean.myAction}"我的方法可能会在显示之前准备模态，4） onComplete="Helper.modal('#modal-account'...)"将调用-它在静态库中，还记得吗？ -实际上会触发模式。如果您不需要准备模态，则可以跳过所有这些步骤，只需将 onComplete中的方法移至链接的onclick事件（例如 <xp:link id="linkOpenDialog" onclick="Helper..."）

现在页面上的模式代码。我们使用自定义组件，并定义了我实际上不会使用的动态ID，以及它在链接中引用的 clientId。您还可以定义其他可选属性，例如标题标题-或者可以通过指定自定义构面来完全 revisit整个区域，在本例中为 resetEventId（此事件调用eventHandler在底部，它是清除表单状态的辅助工具，例如：1）打开模式，2）提交内容，3）验证失败，4）关闭模式，从而离开表单在服务器端处于不一致状态，可能会咬您，具体取决于您将在下一步单击的页面上的操作。（仅当通过保存操作未关闭模式时才会触发此操作）

然后有一个主体构面- xp:key="body"-和一个页脚- xp:key="footer"-来定义您的按钮。

<xc:layoutModal id="modalDemo" clientId="modal-demo"
    headerTitle="Demo" resetEventId="#{id:eventResetForm}">
    <xp:this.facets>
        <xp:panel xp:key="body" binding="#{modalDemoBody}" id="modalDemoBody">

            <!-- Here goes your content -->

        </xp:panel>
        <xp:text xp:key="footer" disableOutputTag="true">
            <button type="button" class="btn btn-white"
                data-dismiss="modal">
                <xp:text value="Close" />
            </button>
            <xp:button id="buttonSaveModal" value="Save" styleClass="btn-primary">
                <xp:eventHandler event="onclick" submit="true"
                    execMode="partial" execId="modalDemo" refreshMode="partial"
                    refreshId="modalDemoBody" actionListener="#{myBean.saveModalDemo}"
                    onComplete="if (!Helper.isBadRequest(arguments[1].xhr)) { hub.modal('#modal-demo', 'hide', { hide: false }) }">
                    <xp:this.parameters>
                        <xp:parameter name="onSuccessRefreshId"
                            value="#{id:allIsWell}" />
                    </xp:this.parameters>
                </xp:eventHandler>
            </xp:button>

            <xp:eventHandler id="eventResetForm"
                submit="false"
                action="#{javascript:myBean.resetForm(modalDemoBody)}" />
        </xp:text>
    </xp:this.facets>
</xc:layoutModal>

<xp:div id="allIsWell">

</xp:div>

在保存按钮事件处理程序中，我们仔细选择行为。同样，我们使用部分执行和刷新。使用 execMode="partial" execId="modalDemo"设置部分执行，这意味着验证将仅在页面的模式部分内进行。使用 refreshMode="partial" refreshId="modalDemoBody"设置了部分刷新，因为我们不想重新加载整个页面而破坏了模式状态，但是它足够具体，可以在发生错误时返回带有可能的验证错误的表单。

现在，我实际上不是利用 action参数，而是利用了 actionListener参数，因为它允许我向请求发送其他参数（我认为无论如何都可以通过使用javascript签名（例如，然后传递参数）。我在此处定义的是由于操作而要刷新的id的条件行为，即，如果验证失败，则刷新模式主体，但如果成功，则刷新页面的其他组件（在该示例为 <xp:div id="allIsWell">）。其名称 <xp:parameter name="onSuccessRefreshId"与 ON_SUCCESS_REFRESH_ID_PARAM类中的静态字符串 Helper匹配。现在，如果我们的方法也进行评估而没有错误，那么操作中将发生的事情就是立即更改刷新ID。如果不是这样，我们还将以稍后JavaScript可以理解的方式使操作无效。

public void saveModalDemo(ActionEvent event) {
    // Your logic goes here
    boolean allIsWell = false;

    if (allIsWell) {
        Helper.applyOnSuccessRefreshId(facesContext, event);
    } else {
        Helper.setResponseErrorHeader(facesContext, event.getPhaseId());
    }
}

Helper.applyOnSuccessRefreshId将读取 onSuccessRefreshId参数，并使用新的参数重新路由eventHandler中定义的原始refreshId。到这里，您可以有条件地进行刷新！

然后，直到那时，我们才使用 onComplete="if (!Helper.isBadRequest(arguments[1].xhr)) { hub.modal('#modal-demo', 'hide', { hide: false }) }"定义的参数来关闭对话框，这确保了一件事，即它是否实际上可以关闭对话框。如果发现响应头表明存在错误（例如在验证错误的情况下），则不会关闭对话框，否则会关闭对话框。

我编写的代码多于解释。我本该写一篇博客文章。无论如何，您可以通过选择 this link out来获得有关该过程的更多见解。但是，这里的答案是对解决问题的首次尝试的一种改进。

关于javascript - 在XPage上添加JQuery对话框的方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48276692/

文章推荐： javascript - 如何获取js文件中的pem文件

文章推荐： javascript - 使用javascript读取URL并直接索引

文章推荐： javascript - 无法在 div 元素下单击

文章推荐： javascript写入控制台日志弹出

jquery - CoffeeScript 与 jQuery、jQuery ($) 和 jQuery
在带有 jQuery 的 CoffeeScript 中，以下语句有什么区别吗？ jQuery ($) -> jQuery -> $ - > 最佳答案第一个与其他两个不同，就像在纯 JavaScr
jquery - jQuery 为什么叫 jQuery？名字的由来是什么？
已关闭。这个问题是 off-topic 。目前不接受答案。想要改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。已关闭13 年前。 Improve th
jquery - jQuery 插件和 jQuery 小部件之间的区别？
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
jquery - jQuery 生产和 jQuery 开发之间的区别？
这个问题可能听起来很愚蠢，但请耐心等待，因为我完全是初学者。我下载了两个 jQuery 版本，开发版本和生产版本。我想知道作为学习 jQuery 的初学者，什么更适合我。最佳答案如果您对 jQue
jquery - jQuery Mobile 使用什么版本的 jQuery？
The documentation说要使用 1.6.4，但我们现在已经升级到 1.7.2。我可以在 jQuery Mobile 中使用最新版本的 jQuery 吗？最佳答案您当然可以，但如果您想
jquery - jquery 新手 - jquery 弹出
我在这里看到这个不错的 jquery 插件:prettyphoto jquery lightbox有没有办法只用一个简单的jquery来实现这样的效果。我只需要弹出和内联内容。你的回复有很大帮助。
jquery - 使用 jQuery 附加 jQuery
很明显我正在尝试做一些 jQuery 不喜欢的事情。我正在使用 javascript 上传图片。每次上传图片时，我都希望它可见，并附加一个有效的删除脚本。显示工作正常，删除则不然，因为当我用 fir
jquery - jQuery 数组和 jQuery 对象之间的技术区别是什么？
这两个哪个是正确的？ jQuery('someclass').click(function() { alert("I've been clicked!"); }); 或 jQuery('somec
jquery - if (jQuery)(function ($) { . . .})(jQuery);插件格式
我正在寻找一个具有以下格式的插件 if (jQuery)(function ($) { -- plugin code -- })(jQuery); 我明白 (function ($)
jquery - 使用哪个版本的 jQuery/jQuery UI？
关闭。这个问题是opinion-based 。目前不接受答案。想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭10 年前。 Improv
jQuery + jQuery 表单提交插件 + jQuery 验证插件
我知道这个问题已经被问过几次了，但想知道您是否可以帮助我解决这个问题。背景:我尝试创建一个使用 Ajax 提交的表单(jQuery 表单提交)。我已经工作得很好，然后我想在表单上得到验证。我可以使用
jquery - jquery 元数据插件和 jquery 验证插件的主要烦恼
我正在使用无处不在的jquery validate plugin用于表单验证。它支持使用metadata plugin用于向表单元素添加验证规则。我正在使用此功能。当验证查找这些规则时，它会对元素进
jquery - 使用 jQuery 还是不使用 jQuery？
我更喜欢为我一直在开发的网络社区添加实用的视觉效果，但随着事情开始堆积，我担心加载时间。拥有用户真的更快吗加载(希望是缓存的)副本来自 Google 存储库的 jquery？是否使用 jQuery
jquery - 有没有办法在 jQuery 中左右滑动而不使用 jQuery UI 和 jQuery Mobile
这个问题已经有答案了: Slide right to left? (17 个回答) 已关闭 9 年前。你能告诉我有没有办法在 jQuery 中左右滑动而不使用 jQuery UI 和 jQuery
jquery - XMLHttpRequest、jQuery.ajax、jQuery.post、jQuery.get 之间有什么区别
我如何找出最适合某种情况的方法？任何人都可以提供一些示例来了解功能和性能方面的差异吗？最佳答案 XMLHttpRequest 是原始浏览器对象，jQuery 将其包装成一种更有用和简化的形式以及跨浏
jquery - 为什么我在 Assets 安装时无法解析 'jQuery=jquery'？
运行时 php bin/console oro:assets:build ，我有 11 个这样的错误: ERROR in ../node_modules/jquery-form/src/jquery.
jquery - jQuery.ajax 在 jQuery 源代码中的哪里定义？
我试图找到 jQuery.ajax() 在源代码中的定义位置。但是，使用 grep 似乎不起作用。在哪里？谢谢。 > grep jQuery.ajax src/* src/ajax.js:// B
jquery - 从单独的 jQuery 对象创建 jQuery 对象集合
$.fn.sortByDepth = function() { var ar = []; var result = $([]); $(this).each(function()
jquery - jQuery.one() 和 jQuery.on() 之间的区别
我的页面上有多个图像。为了检测损坏的图像，我使用了在 SO 上找到的这个。 $('.imgRot').one('error',function(){ $(this).attr('src','b
jquery - jQuery 如何实现将 $ 设为 jQuery 函数的别名？
我在理解 $ 符号作为 jQuery 函数的别名时遇到了一些麻烦，尤其是在插件中。你能解释一下 jQuery 如何实现这种别名:它如何定义 '$' 作为 jQuery 函数的别名？这是第一个问题。其

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在XPage上添加JQuery对话框的方法