/    Sign up×
Community /Pin to ProfileBookmark

Hide element after redirect

Hi,
I have login button which opens a modal on click. The modal can be closes in three different ways:

  • clicking the close button

  • clicking outside the modal (on its background container)

  • pressing the escape key
  • The modal xhr loads a login or registration form. After submitting the form (POST), the server (Python Flask) sends a redirect to the home page. My problem is that the modal is still open after this redirect which leads to a glitched view.

    How can I close the modal after receiving the redirect? I could pass a url parameter but I feel there must be an easier, cleaner solution.

    PS: I am very new to JS and also new to webdev in general.

    to post a comment
    JavaScript

    12 Comments(s)

    Copy linkTweet thisAlerts:
    @SempervivumAug 16.2022 — Hi @protector0473 and welcome to the forum!

    How do you create that modal? Please post some code.
    Copy linkTweet thisAlerts:
    @shock8029authorAug 16.2022 — @Sempervivum#1645976

    Hey, when I try to reply it says I don't have permission to do that.

    Is it possible that I can't post code for some reason?
    Copy linkTweet thisAlerts:
    @SempervivumAug 16.2022 — Unfortunately the forum software refuses posting script tags. Try to modify them like this:

    `<_script_> ... </_script_>`
    Copy linkTweet thisAlerts:
    @shock8029authorAug 16.2022 — @Sempervivum#1645980 Thanks for the hint!

    But actually my code doesn't include script tags.

    I posted it externally:

    https://privatebin.net/?755057b8f52ba26c#F2wVbUPMo398diVqNcBPZP5Bv7ohK5UBrXxQ2U32x75A

    (Link is valid for 1 week)
    Copy linkTweet thisAlerts:
    @SempervivumAug 16.2022 — PS: If you did not try to post script tags you can ignore the message, posting will be possible in spite of it.
    Copy linkTweet thisAlerts:
    @SempervivumAug 16.2022 — The code on privatebin seems to be fine. Usually everything you modified in the DOM by javascript gets lost, when you redirect to a different page. Therefore I have no explanation why the modal keeps visible.

    Please post the code that performs the redirect.
    Copy linkTweet thisAlerts:
    @shock8029authorAug 16.2022 — I tried to ignore the "no permission" warning but I'm still not able to post code here.

    I will stick to the pastebin, hope this is acceptable.

    In the following code I stripped out some unrelevant code (e.g. classes) to make it more readable:

    https://privatebin.net/?72a07e89e2f0d55e#J7GEqqKH9eL1uZKwHxVmVLaemvBaUy6j8Sd8K4Z93SQQ

    In the developer console I can see that the "redirect" loads as XHR. So this is not a full page reload I guess? This might be the issue?
    Copy linkTweet thisAlerts:
    @SempervivumAug 16.2022 — Unfortunately I'm not familiar with Flask.
    > In the developer console I can see that the "redirect" loads as XHR. So this is not a full page reload I guess?

    Surely this is the reason why the modal stays visible.

    Try this javascript, it should hide the modal when the form is submitted:
    ``<i>
    </i>document.querySelector('form').addEventListener('submit', event =&gt; {
    hideElement('modal');
    });<i>
    </i>
    ``

    (not tested)
    Copy linkTweet thisAlerts:
    @shock8029authorAug 16.2022 — Thanks! But this doesn't work for me. And also it feels like a very hacky solution.

    Tomorrow I will try to make this thing do a full page reload instead of xhr.

    Probably this is the right way.
    Copy linkTweet thisAlerts:
    @NogDogAug 16.2022 — Just trying to paste it here from the first pastebin link:


    This is the button that opens the modal:
    <i>
    </i>&lt;!-- Had to add hyphen to "on-click" so this would post here --&gt;
    &lt;button on-click="showElement('modal')"&gt;Login&lt;/button&gt;


    And that is my related JS code:
    <i>
    </i>function hideElement(id) {
    document.getElementById(id).classList.add("hidden");
    }

    function showElement(id) {
    document.getElementById(id).classList.remove("hidden");
    }

    // Hide modal when clicking on background
    document.getElementById("modal").addEventListener('click', function (event) {
    let modalContainer = document.getElementById("modalContainer");
    if (!modalContainer.contains(event.target)) {
    hideElement('modal');
    }
    });

    // Hide modal with escape key
    document.addEventListener('keydown', function (event) {
    if (event.key == 'Escape') {
    hideElement('modal');
    }
    });


    **Hmm... had to change "onclick" to "on-click". Sure wish the forum owners would fix this. :( **
    Copy linkTweet thisAlerts:
    @thermalbagsAug 16.2022 — @Sempervivum#1645982

    You're right, as you mentioned, this is the main [problem. ](https://thermalbags.com/)
    Copy linkTweet thisAlerts:
    @shock8029authorAug 17.2022 — I have solved it by sending the form as normal POST, without htmx or xhr.

    No Idea why I wanted to use xhr here if I redirect afterwards anyway.

    Works! :)
    ×

    Success!

    Help @shock8029 spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 6.24,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ,
    analytics: Fullres
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @Marika,
    tipped: article
    amount: 1000 SATS,

    tipper: @hatem774,
    tipped: article
    amount: 1 SATS,

    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,
    )...