jQuery dialog box to remember user

Question

I'm using the jQuery Dialog box on my website, to display a form. I don't want the Dialog box to pop up more than once, for the same user. So once they have either filled out their details or clicked on X (close) I don't want them to see this message again. I've read I can use cookies within the form, but unable to find any exact code I could use. Here's the code so far:

<script>
  $(function() {
    $( "#dialog" ).dialog();
  });
  </script>
        <div class="site-container">

<div id="dialog" title="Basic dialog">


  <?php echo do_shortcode( '[contact-form-7 id="92" title="Test"]' ); ?>
</div>

What's the best solution for this?

Many thanks Rachael

http://stackoverflow.com/questions/1458724/how-to-set-unset-cookie-with-jquery — j08691, Nov 19 '14 at 14:33

score 0 · Answer 1 · edited May 23 '17 at 12:28

0

You can use the localStorage-Oject in the close-function:

Javascript

<script>
    $(function() {
        if(localStorage.getItem("closed") !== 'yes'){
            $( "#dialog" ).dialog({
                close: function(){
                     localStorage.setItem("closed", "yes");
                }
             });
         }
     });
</script>

HTML

<div class="site-container">

     <div id="dialog" title="Basic dialog">


     <?php echo do_shortcode( '[contact-form-7 id="92" title="Test"]' ); ?>
</div>

You can have a look at this answer, were I get more precise about the localStorage-Object and Cookies

Demo (onLoad) Demo2 (onClick)

edited May 23 '17 at 12:28

Community

1
1

answered Nov 19 '14 at 14:35

empiric

7,825
7
37
48

Thanks Empiric. I've added the above code, to inside the script tags. I've read your post on the other Q but it's new to me so I must be missing something - it's still popping up after I've entered details then refreshed the page. – RachJenn Nov 19 '14 at 14:53
please try a `console.log(localStorage.getItem("closed"))` to see if the object is set correctly in the close-function – empiric Nov 19 '14 at 14:58
@RachJenn i added a fiddle in my answer. Close the dialog there and just re-run the fiddle. – empiric Nov 19 '14 at 15:01
Not 100% sure where to add that. I've tried.... close: function(){ localStorage.setItem("closed", "yes"); console.log(localStorage.getItem("closed")) } – RachJenn Nov 19 '14 at 15:02
And... close: function(console.log(localStorage.getItem("closed"))){ localStorage.setItem("closed", "yes"); } – RachJenn Nov 19 '14 at 15:02
Both didn't stop the box reappearing? – RachJenn Nov 19 '14 at 15:03
@RachJenn `console.log()` just add output to to console in e.g. firebug, where you can check if the right value is set. Have you checked my fiddle ? – empiric Nov 19 '14 at 15:10
I just have, thanks for that. Here's the link, http://www.peakdistricttradefair.co.uk/test/ I"m getting NULL in the console. – RachJenn Nov 19 '14 at 15:28
@RachJenn, in your code, replace your dialog-function with the code I posted, this should work – empiric Nov 19 '14 at 15:32
Thanks for that, I've done it but it's still popping up. There was a JS issue with another file which I've removed. – RachJenn Nov 19 '14 at 15:43
@RachJenn i updated my answer on how your code should look like on your testpage – empiric Nov 20 '14 at 13:48

score 0 · Answer 2 · answered Nov 19 '14 at 14:36

0

You can use cookies: https://github.com/carhartl/jquery-cookie.
When user interact with close button you can set the cookie and the next time you can load the cookie and conditionally open dialog.

answered Nov 19 '14 at 14:36

bemol

381
3
18

jQuery dialog box to remember user

2 Answers2