Dialog appears on every refresh

Question

I have to build a dialog in my entry site. The problem is, it appears every time and I can't close it (click on the button just refreshes the site, with the dialog appearing again). I also thing that I know the reason, but I'm able to fix it.

This is my dialog

<p:dialog id="ac-wrapper" widgetVar="test" style='display: none; background:white;' modal="true"
                resizable="false" closeOnEscape="true" closable="true" visible="true">
                <div id="popup">    
                    <h2>Some Content</h2>
                        <input type="submit" name="submit" value="Submit"
                                onclick="DialogBox('hide')" />
                </div>
            </p:dialog>

Here is the javascript that should handle this:

 <script type="text/javascript">

            $ = jQuery;
            function DialogBox(hideOrshow) {

                if (hideOrshow == 'hide') {
                    localStorage.setItem("isShown",1);
                    document.getElementById('ac-wrapper').style.display = "none";
                    document.getElementById('ac-wrapper').visible="false";
                    $("#ac-wrapper").close();
                }
                else  if(localStorage.getItem("isShown") == null) {
                    document.getElementById('ac-wrapper').removeAttribute('style');
                    localStorage.setItem("isShown",1);
                }
            }

            window.onload = function () {
                setTimeout(function () {
                    if(localStorage.getItem("isShown") != 1 ){
                        DialogBox('show');
                    }
                    else if(localStorage.getItem("isShown")){
                        $("#ac-wrapper").remove();
                    }}, 1000);
            }
            </script>

By rendering the site, the dialog always appeares because the visible attribute is set on "true". I guess the order is incorrect. It should frist check the local storage and then render the elements, I'm not getting it to work correctly. I also looked for answeres here with similar problems, but nothing helped.

Never call anything submit, Do not use submit for a button, change to `type="button" value="Close"` — mplungjan, May 17 '18 at 16:37
Also why all the mixture of DOM and jQuery??? Use jQuery if you have it — mplungjan, May 17 '18 at 16:39
Something like this. I may have the opposite effect you want since your choice of isShown vs show `function DialogBox(hideOrshow) { var show = hideOrshow != 'hide'; // makes more sense localStorage.setItem("isShown", show); $('#ac-wrapper').toggle(show) if (!show) $("#ac-wrapper").close(); } $(function() { setTimeout(function() { var show = localStorage.getItem("isShown") == 1; if (show) { DialogBox('show'); } else $("#ac-wrapper").remove(); }, 1000); } ` — mplungjan, May 17 '18 at 16:45
Feel free to delete the question if the comments solve your problem — mplungjan, May 17 '18 at 17:14
you have a `visible="true"` so it is normal to show each time — Kukeltje, May 17 '18 at 18:49
@Kukeltje I figured that on my own, my question is how to change it with javascript.. when I don't put the visible atribute, it won't show at all.. — Lazar Zoltan, May 17 '18 at 19:02
That is not a useful comment. It likely does work when implemented correctly — mplungjan, May 17 '18 at 19:07
@mplungjan well, the difference is that the dialog isn't shown at all.. — Lazar Zoltan, May 17 '18 at 19:14
As I said the code was s guess. Turn the tests around and look at the console — mplungjan, May 17 '18 at 19:31
did you use the PrimeFaces showcase? https://www.primefaces.org/showcase/ui/overlay/dialog/basic.xhtml showing and hiding is all in there — Kukeltje, May 17 '18 at 20:04
Possible duplicate of [Controlling primefaces dialog from javascript](https://stackoverflow.com/questions/31108476/controlling-primefaces-dialog-from-javascript) — Kukeltje, May 17 '18 at 23:02

TheCog19 · Answer 1 · 2018-05-17T17:10:45.270

0

The issue is this

 <input type="submit" name="submit" value="Submit"
                            onclick="DialogBox('hide')" />

because its an input type submit, its defaulting to the form behavior... which is to redirect to the same url using GET. Change the type and value to "button" and "close" and your problem will be resolved

edited May 17 '18 at 17:10

answered May 17 '18 at 16:40

TheCog19

1,129
12
26

I already commented this under the question. BTW Default behaviour of a form is GET – mplungjan May 17 '18 at 16:47
Edited, thanks. If you wanna repost your comment as an answer, I'm happy to delete mine – TheCog19 May 17 '18 at 17:11
It's ok. I prefer the question to be deleted - it is not super useful for others – mplungjan May 17 '18 at 17:13

Dialog appears on every refresh

1 Answers1