1

I am showing a random carousel on my index page. It works just fine when we refresh but there are some items on my page which redirect the user to another page when the user clicks on the back button to go back on index.html both carousel show up.

Here is the code:

$(document).ready(function() {
  var random = Math.floor(Math.random() * 2);
  if (random === 0) {
    $('#myCarousel').show();
    $('#my3').hide();
  } else {
    $('#my3').show();
    $('#my3').show();
    $('#myCarousel').hide();
  }
});

Why the jQuery is not working in this scenario?

Ivan
  • 34,531
  • 8
  • 55
  • 100
ThisisFish
  • 416
  • 1
  • 6
  • 14
  • Would need a more complete example here to see what's going on. – abney317 Jun 29 '18 at 15:09
  • 1
    AFAIK, hitting the back button does not cause the page to re-run javascript. If you want script to run on a back button, you have to do something with a popState event on the window, or something of that nature. https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate – Taplar Jun 29 '18 at 15:12
  • you can see here web.kyetees.com:4200 click on some items and then you will redirect to another page . then click on back button to go index.html you can see two carousel. thats the error – ThisisFish Jun 29 '18 at 15:13
  • @ThisisFish What browser are you using? Anyway, I suppose regardless of browser a similar fix applies. https://stackoverflow.com/questions/2638292/after-travelling-back-in-firefox-history-javascript-wont-run – Nope Jun 29 '18 at 15:21
  • @Taplar would using IIFE wrapper make any drastic changes in this situation? – Alex Jun 29 '18 at 15:25
  • I don't believe so? The issue is the code does not inherently get re-evaluated again. So using or not using an IIFE, as far as I can think of, wouldn't make a difference. – Taplar Jun 29 '18 at 15:26
  • i tried everything you guys suggested . it won;t work at all.i dont know what to do now – ThisisFish Jun 29 '18 at 15:36

1 Answers1

1

You have 2 carousels on your page and you use this JS to randomly show one or the other.

«hitting the back button does not cause the page to re-run javascript», as Taplar correctly said in comments. Now it seems like the page is returned to its state as it was before the document ready handler is executed...

EDIT

Since the .remove() trick isn't working either...

I would try to use only one slider. But based on the random number, replace or not the image slide set.

So you have to have the image replacements in an array.

var replacementImageArray = ["assets/img/4.jpg", "assets/img/1.jpg", etc...]

Then on document ready, check the random number and proceed with replacement...

$(document).ready(function() {
  var random = Math.floor(Math.random() * 2);
  if (random === 0) {
    $('#myCarousel').find("img").each(function(index){
      $(this).attr("src", replacementImageArray[index]);
    }
  }
});

Disclaimer: the script above is an untested suggestion... Just as a strategy hint.

Bonus, a code "cosmetic" and performance hint: 
if (Math.random() >= 0.5) {

The Math.random() function returns a floating-point, pseudo-random number in the range 0–1 (inclusive of 0, but not 1)

Documentation

Louys Patrice Bessette
  • 33,375
  • 6
  • 36
  • 64