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写入控制台日志弹出

javascript - 执行存在于输入值字段中的 javascript - JavaScript
我有一个 html 格式的表单: 我需要得到 JavaScript在value input 字段执行，但只能通过表单的 submit .原因是页面是一个模板所以我不控制它(不能有
javascript - JavaScript 代码片段正在破坏其他 JavaScript
我管理的论坛是托管软件，因此我无法访问源代码，我只能向页面添加 JavaScript 来实现我需要完成的任务。我正在尝试用超链接替换所有页面上某些文本关键字的第一个实例。我还根据国家/地区代码对这些
javascript - JavaScript 如何使新页面包含更多 JavaScript？
我正在使用 JS 打开新页面并将 HTML 代码写入其中，但是当我尝试使用 document.write() 在新页面中编写 JS 时功能不起作用。显然，一旦看到，主 JS 就会关闭。用于即将打开的
javascript - Javascript 引擎如何在浏览器中执行 Javascript？
提问不是为了解决问题，提问是为了更好地理解系统专家!我知道每当你将 javascript 代码输入 javascript 引擎时，它会立即由 javascript 引擎执行。由于没有看过Engi
javascript - 如何将 JavaScript 变量从一个 JavaScript 文件传递到另一个 JavaScript 文件？
我在一个文件夹中有两个 javascript 文件。我想将一个变量的 javascript 文件传递到另一个。我应该使用什么程序？最佳答案 window.postMessage用于跨文档消息。使
javascript - javascript 中的 javascript 输入问题
我有一个练习，我需要输入两个输入并检查它们是否都等于一个。如果是 console.log 正则 console.log false 我试过这样的事情: function isPositive(fir
javascript - 在加载其他 javascript 库的页面上嵌入 Javascript？
我正在做一个Web应用程序，计划允许其他网站(客户端)在其页面上嵌入以下javascript: 我的网络应用程序位于 http://example.org 。我不能假设客户端网站的页面有 JQue
javascript - 从 Javascript 内部调用 Javascript
目前我正在使用三个外部 JS 文件。我喜欢将所有三个 JS 文件合而为一。尽一切可能。我创建 aio.js 并在 aio.js 中 src="https://code.jquery.com/
javascript - AngularJS/javascript javascript 对象的特殊排序顺序
我有例如像这样的数组: var myArray = []; var item1 = { start: '08:00', end: '09:30' } var item2 = {
javascript - 在 Javascript 内部执行 Javascript？
所以我正在制作一个 Chrome 扩展，它使用我制作的一些 TamperMonkey 脚本。我想要一个“主”javascript 文件，您可以在其中包含并执行其他脚本。我很擅长使用以下行将其他 jav
javascript - 如何将变量从 javascript 移动到 javascript？
我有 A、B html 和 A、B javascript 文件。并且，如何将 A JavaScript 中使用的全局变量直接移动到 B JavaScript 中？示例 JavaScript) va
javascript - 从 javascript 调用 javascript
我需要将以下整个代码放入名为 activate.js 的 JavaScript 中。你能告诉我怎么做吗？ var int = new int({ seconds: 30, mark
javascript - 将变量值从一个 JavaScript 传递到另一个 JavaScript
我已经为我的 .net Web 应用程序创建了母版页 EXAMPLE1.Master。他们的 I 将值存储在 JavaScript 变量中。我想在另一个 JS 文件中检索该变量。示例1.大师:-
javascript - 有没有开源库可以在浏览器中使用 Javascript 来整理 Javascript？
是否有任何库可以用来转换这样的代码: function () { var a = 1; } 像这样的代码: function () { var a = 1; } 在我的浏览器中。因为我在 Gi
javascript - javascript 中的参数列表后缺少语法 javascript 错误 )
我收到语法缺失 ) 错误 $(document).ready(function changeText() { var p = document.getElementById('bidp
javascript - 第一个 JavaScript 完成后启动第二个 JavaScript
我正在制作进度条。它有一个标签。我想调整某个脚本完成的标签。在找到可能的解决方案的一些答案后，我想出了以下脚本。第一个启动并按预期工作。然而，第二个却没有。它出什么问题了？代码如下: HTML:
javascript - 为什么外部 javascript 库会阻止我页面上的 javascript？
这里有一个很简单的问题，我简单的头脑无法回答:为什么我在外部库中加载时，下面的匿名和onload函数没有运行？我错过了一些非常非常基本的东西。 Library.js 只有一行:console.log(
javascript - 如何区分代码内 javascript 和客户端 javascript
我知道 javascript 是一种客户端语言，但如果实际代码中嵌入的 javascript 代码以某种方式与在控制台上运行的代码不同，我会尝试找到答案。让我用一个例子来解释它: 我想创建一个像 Mi
javascript - 将 Javascript 内联到不显眼的 JavaScript？
我如何将这个内联 javascript 更改为 Unobtrusive JavaScript？谢谢! 感谢您的回答，但它不起作用。我的代码是: PHP js文件 document.getElem
javascript - 如何将 JavaScript 对象导出为 JavaScript？
我正在寻找将简单的 JavaScript 对象“转储”到动态生成的 JavaScript 源代码中的最优雅的方法。目的:假设我们有 node.js 服务器生成 HTML。我们在服务器端有一个对象x。

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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