0

我有/只能有一个 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.

4

1 回答 1

2

open函数中,逻辑检查Thank you消息容器是否可见(假设它仅在用户使用优惠时可见),如果可见,则隐藏close(在您的情况下为“稍后提醒我”)或显示它。

此外,您正在使用非常通用的代码来操作open. 您应该使用该ui变量来使您的代码仅特定于当前对话框

有关变量的操作和示例用法,请参阅此线程closeui

编辑:进行四项更改

1)给跨度一个id

注意:仍然需要特定于该对话框。请参考上面提到的线程。

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

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

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

3) 使用dataoncomplete

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

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

function removeReminder(availed){
if(availed == 'true' ||  availed == true)
$('#reminder').hide(); // or remove() decide as per your requirement
}
于 2013-05-10T05:51:50.590 回答