Why is the back button on the browser breaking this code? It works otherwise

Question

This code ensures that when an image is clicked on a page of portfolio images to go to the corresponding gallery, the image that was clicked on shows up as the first image. It does this by comparing chars from the src attributes and using .prependTo. It all works fine when I navigate back and forth between the portfolio and gallery pages using the links on the pages, but it all gets wonky when I use the back button on the browser, sometimes prepending over and over. Is it something to do with the click event firing over and over? I'm not sure...

$(document).on('click',"a.project",function(){
  $("a.project").on('click', function(event) {
    var portfolioLastTwoChars = $(event.target).attr('data-src').slice(-8, -4);
    var galleryLastTwoChars = $("img").first().attr('data-src').slice(-8, -4);
  if (portfolioLastTwoChars === galleryLastTwoChars) {
   return;
  } else {
   var prePendedImage = $("div").children('img[alt*=' + portfolioLastTwoChars + ']').not(".loaded");
   $(prePendedImage).not(':first').remove();
   prePendedImage.prependTo("div.image-list");
   $('div.image-list > img:not(:first-child)').remove();
}
});
});

$( document ).ready(function() {
 $("a.project").eq(0).trigger('click');
});

What are: `testAgain`, `test`, `PortLastTwoChars`, and `PortLastTwo`? You seem to have some substantial issues here in this short code segment OR do not provide everything needed. Note there are also 7 unused variables/objects. — Mark Schultheiss, Apr 15 '16 at 02:39
I renamed the variables to try to make it clearer. Basically, I'm getting the src (via the data-src attribute) attributes for two images on two different pages and comparing four characters in the src attributes to see if they're the same image. If not, that means I have to find that image that is in a gallery on the following page and move it (via prependTo) to the top, so that the image that I clicked on in the first portfolio page corresponds with the first image at the top of the image gallery on the next page. There must be a better way to do this that is also back-button-proof! — jpo45, Apr 15 '16 at 03:58

score 0 · Answer 1 · edited May 23 '17 at 10:33

0

Is there a cross-browser onload event when clicking the back button?

The back button is notorious for messing with javascript scripts. There are several links that may point to caching as an issue.

This may not be a proper answer but I don't have enough points to make a comment on SO.

Do you have an example of the HTML defaults before the $("a.project").click event?

edited May 23 '17 at 10:33

Community

1
1

answered Apr 15 '16 at 01:09

Daniel Gale

595
2
13

The default behavior of the link is to go from a Portfolio page of thumbnail images to the corresponding gallery of those images. I'm adding an event to make sure that the thumbnail image on the Portfolio page will be the same as the first image in the corresponding Gallery page. – jpo45 Apr 15 '16 at 01:40
It may have to do with your line var MoveMeAddClass = $('img[alt*='+PortLastTwo+']').addClass("moveMe"); Is it possible that you are adding the class "moveMe" to multiple images and by clicking the back button the class isn't cleared so that many images are a part of that class and being pre-pended? – Daniel Gale Apr 15 '16 at 01:59
I added the following code to the bottom, right before where the $.ready function closes: $('img.moveMe').removeClass( "moveMe firstGalleryImage" ); But the images are still hanging on to that class, for some reason. – jpo45 Apr 15 '16 at 02:29

Mark Schultheiss · Accepted Answer · 2016-04-15T05:15:45.373

0

I believe this may be due to the class(s) you are adding...thus I removed those on the click, then simplified the code using the benefits of jQuery chaining.

$(document).ready(function() {
  $("a.project").on('click', function(event) {
    // remove old classes
    $('.moveMe').removeClass('moveMe');
    $('firstGalleryImage').removeClass('firstGalleryImage');
    // get the characters of the clicked element
    var portfolioLastTwoChars = $(event.target).attr('data-src').slice(-8, -4);
    var galleryLastTwoChars = $("img").first().addClass("firstGalleryImage").attr('data-src').slice(-8, -4);
    if (portfolioLastTwoChars === galleryLastTwoChars) {
      return;
    } else {
      $('img[alt*=' + portfolioLastTwoChars + ']').addClass("moveMe");
      $("div").children('.moveMe').not(".loaded").prependTo("div.image-list");
    }
  });
});

Now, as to the odd function getImageName() within your document ready, not sure what exactly you are attempting with that; That may actually BE your issue if you are trying to re-execute that event handler for the $("a.project").on('click', If you simply want to execute the click handler that is one thing, if NOT and you wish to attach that to some NEW elements then perhaps you need to attach it differently such as:

$(document).on('click',"a.project",function(){...

Put the $(document) on some wrapper of the a.project elements to be more efficient.

Then you can trigger that from somewhere with

$("a.project").trigger('click');

Note that trigger may need to be activated on some other element (an image?) like: (hard to guess without any markup to go by)

$("a.project").find('img').eq(0).trigger('click');

edited Apr 15 '16 at 05:15

answered Apr 15 '16 at 05:04

Mark Schultheiss

28,892
9
63
88

Well I think this is getting me closer. I rewrote the code above so I could avoid adding a class at the end (which I suspected was causing problems). The code works when "back to previous page" links are clicked, but still not when the browser's back buttons are clicked. It is somehow cumulatively storing in memory all the images that are being prepended, so that on the click it prepends one image, on the next click it prepends two images, the next click, three images, and so on. I am clicking on different elements with the "project" class, maybe that's the issue? I'll keep researching. – jpo45 Apr 15 '16 at 06:02
That is the reason I put that last example in there, trigger the click using the `img` inside the `.project`? As I said, difficult to tell without the markup in your question which might be pretty large; Thus I am afraid you are either going to need to provide that OR as you indicate keep researching on your own. I left both classes as I did not know if you used them for styling etc. – Mark Schultheiss Apr 15 '16 at 12:08
Thanks, I researched event handlers and, using your suggestions, attached the event handler differently. This works if you navigate using the "back to portfolio" and home page links. It also works if you use the browser back button, BUT after a certain amount of times of clicking back and forth something gets wonky and it starts appending the wrong image. This code seems to only be bulletproof if the page is refreshed. Here's the link: http://roxanna-baer.squarespace.com/ – jpo45 Apr 15 '16 at 23:20
To make it more robust you are looking at cookies or some other such stored method (local storage) and some kind of on-page indicator that you can track and sync the two. Otherwise, you are going to see that after lots of back and forth and cache challenges. – Mark Schultheiss Apr 15 '16 at 23:54

Why is the back button on the browser breaking this code? It works otherwise

2 Answers2