如何渲染/不渲染 Jquery 对话框的关闭链接？

Question

我有/只能有一个 Jquery 对话框。该对话框对用户有一些广告内容。 在阅读它时，用户可以使用该优惠或暂时忽略它。

用户可以通过单击对话框内的提交按钮来使用该优惠。 或者他可以通过单击“稍后提醒我”链接来忽略它，这将关闭对话框。 对话框内的内容通过 Ajax 更新。所以当点击提交按钮时， 感谢信息显示在同一对话框中。

当用户使用优惠时，“稍后提醒我”链接仍然存在。如果用户在逻辑上单击该对话框 框应再次显示。但是，用户已经使用了该优惠！

如何以编程方式呈现或不呈现 Jquery 对话框的关闭链接？

对话框代码如下，

$h(document).ready(function() {

            $h("#showForm").dialog({
                 open: function(event, ui) {
                     jQuery('.ui-dialog-titlebar-close').html('<span>Remind me later</span>');
                     jQuery('.ui-dialog-content').removeClass("ui-dialog-content").addClass("advertise-upgrade-content");
                 },
                duration: 800,
                height: 727,
                minWidth: 811,
                width: 811,
                position: ['middle', 154],
                zIndex: 99999999,
                modal: true,
                show: {
                    effect: 'puff',
                    duration: 400
                },
                hide: {
                    effect: 'puff',
                    duration: 400
                }

            });
        });



   <div id="showForm" height: 670px;">
    <div class="submitClass">
        <a4j:commandLink immediate="true" action="#{myBean.clickToAvail}" reRender="renderSuccess" value="Submit">
        </a4j:commandLink>
    </div>

    <h:panelGroup id="renderSuccess">
        <h:outputText value="Thank you for availing this offer">     
    </h:panelGroup>
  </div>

我正在使用jquery.min.js、jquery-1.6.2.js、jquery-ui.min.js。

Answer 1

在open 函数中，逻辑检查Thank you 消息容器是否可见（假设它仅在用户使用优惠时可见），如果可见，则隐藏close（'稍后提醒我' 在你的情况下），否则，显示它。

另外，您正在使用一个非常通用的代码来操作open 中对话的属性。您应该使用 ui 变量来使您的代码仅特定于 current 对话框

有关close 操作和ui 变量的示例用法，请参阅this thread

编辑：进行四项更改

1) 给 span 一个 id

注意：这个仍然需要特定于此对话框。请参考上面的线程。

jQuery('.ui-dialog-titlebar-close').html('<span id=\'reminder\'>Remind me稍后');

2) 在你的 bean 中定义一个布尔变量 availed 并在你的 clickToAvail 方法中设置它

public void clickToAvail(){
// business logic here
this.availed = true;
}

3) 使用data 和oncomplete

<a4j:commandLink immediate="true" action="#{myBean.clickToAvail}" data="#{myBean.availed}" reRender="renderSuccess" value="Submit" oncomplete="removeReminder(event.data);">
        </a4j:commandLink>

4) 在页面的<head> 中定义一个removeReminder javascript 函数

function removeReminder(availed){
if(availed == 'true' ||  availed == true)
$('#reminder').hide(); // or remove() decide as per your requirement
}