How to render/not render Close link of Jquery dialog box?

Question

I have/can have only one Jquery dialog box. This dialog box has some advertisement content to the User. On reading it, a User can avail the offer or ignore it for the time being.

User can avail the offer by clicking on Submit button inside the dialog box. Or he can ignore it by clicking on "Remind me later" link which will close the dialog box. Contents inside dialog box are updated through Ajax. So when Submit button is clicked, a thank you message is shown inside the same dialog box.

When User avails the offer, "Remind me later" link would still be there. If User clicks on that, logically, dialog box should be shown again. But, User has already availed the offer!

How can I render or not render Close link of Jquery dialog box programatically?

Code for dialog box is below,

$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>

Am using jquery.min.js, jquery-1.6.2.js , jquery-ui.min.js.

score 2 · Accepted Answer · edited May 23 '17 at 12:29

2

In the open function, make a logical check whether Thank you message container is visible (assuming that it's visible only if the user has availed the offer) and if it's visible, hide close ('Remind me later' in your case) or else, show it.

Also, you're using a very generic code to manipulate the attributes of dialogue in open. You should make use of the ui variableto make your code specific to only the current dialog

Refer to this thread for both close manipulation and example usage of ui variable

EDIT: making four changes

1) Give an id to the span

NB: This still needs to be specific to this dialog. Please refer to the thread mentioned above.

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

2) Define a boolean variable say availed in your bean and set it in your clickToAvail method

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

3) Use data and oncomplete

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

4) Define a removeReminder javascript function in the <head> of your page

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

edited May 23 '17 at 12:29

Community

1
1

answered May 10 '13 at 05:51

Niks

4,802
4
36
55

If offer is availed, I can set a `boolean` in bean. Question is how can I make a logical check whether this `boolean` is `true` or `false` in dialog box? – Vikas V May 10 '13 at 06:31
You update the dialog content after `Submit` click through ajax right? Can you hide the `close` on `success` of that ajax request? – Niks May 10 '13 at 10:12
Well.. that is my question. I don't know how to hide the `Close` (in my terms its called "Remind me later") based upon the value in my bean. – Vikas V May 10 '13 at 10:33
Can you post the submit button code? That might help us to help you! :) – Niks May 10 '13 at 10:48
I have updated my question with contents inside `showForm`. Contents inside `showForm` are shown inside dialog box and this contains Submit button. – Vikas V May 10 '13 at 11:12
Am getting `undefined` as the value for `availed` inside the Java Script. What could be the cause? – Vikas V May 10 '13 at 13:36
Which version of RichFaces are you using? RichFaces 3.x makes use of `data` instead of `event.data` I suppose – Niks May 10 '13 at 18:11

How to render/not render Close link of Jquery dialog box?

1 Answers1