Re-randomize content of popup modal

  • Resolved rhombusinc

    (@rhombusinc)


    2 years, 8 months ago

    Thanks for the great plugin – it’s doing (almost) exactly what I need!

    I have a button on my home page which randomly displays an item from my portfolio in a modal popup window using your plugin’s querystring parameters. That’s all working great but if the user closes the modal and then clicks the button again, it will always display the same portfolio sample again when the modal reopens – it does not re-randomize. Is it possible to force the content of the modal to re-randomize using the plugin?

    Of course, if the user reloads the home page and then clicks the button again, they will see a new randomly-chosen sample, but I’d prefer they didn’t have to do that.

    • This topic was modified 2 years, 8 months ago by rhombusinc.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Christoph

    (@camthor)

    The problem seems to be caused by the browser that shows the same content, wrongly assuming that the link will always load the same page. I suggest to use JavaScript to add a different random number on every click to force the browser to reload every time. Add the following into the HTML of that page, somewhere at the end (after the button):

    <script>
    const redirectButtonHref = document.querySelectorAll(
      '.random-project-btn a'
    )[0];
    
    redirectButtonHref.addEventListener('click', (e) => {
      const random = Math.ceil(Math.random() * 10000000);
      if (e.target.href.indexOf('&randomizer=') >= 0) {
        e.target.href = e.target.href.replace(
          /&randomizer=[0-9]+/g,
          '&randomizer=' + random
        );
      } else {
        e.target.href += '&randomizer=' + random;
      }
    });
</script>

    Instead of .random-project-btn a you could also use a class name that you add directly to the random link.

    Thread Starter rhombusinc

    (@rhombusinc)

    Thank you, Chris. That worked perfectly!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Re-randomize content of popup modal’ is closed to new replies.