Trying to use a data tag and click event to trigger a function

Question

I am working on a page and I am trying to reload the page on click and execute a function. This code works on Safara and Firefox, but it doesnt work on Chrome and im not sure about IE. Hoping someone can help me. Below is my code. Not sure if there is a better way of doing this.

Basically i am just create a URL and on click passing a data tag and then grabbing the data tag and assigning the category to the end of a url. Then i am executing the category url function that is called "#tomatoes". I have to reload the page because the function is already called earlier.

var categoryTitle = 'Tomatoes';
$('.activeCategory').html('<a href="#" class="activeCategory" data-caturl="#tomatoes">' + categoryTitle + '</a>');

//change the category dynamically if clicked from individual product page
      $('.activeCategory').click(function(event) {
          var caturl = $(this).children('a').data('caturl');
          var newWindow = window.location.href="http://www.example.com/DEV/product-categories/example.php" + caturl;
          if (newWindow === "http://www.example.com/DEV/product-categories/example.php" + caturl) {
              location.reload();
              $("caturl").click();
          } 
      });

Try to include a working example please. stackoverflow.com/help/mcve — lleaff
– lleaff, Commented Feb 9, 2017 at 14:26

Tumen_t · Accepted Answer · 2017-02-09 14:30:10Z

1

I would reload the page and add hashtag # and then execute your function. There is no way to have a callback on page reload, because your JS application gets re-initialized and starts all over again.

var categoryTitle = 'Tomatoes';
$('.activeCategory').html('<a href="#" class="activeCategory" data-caturl="#tomatoes">' + categoryTitle + '</a>');

//change the category dynamically if clicked from individual product page
      $('.activeCategory').click(function(event) {
          var caturl = $(this).children('a').data('caturl');
          var newWindow = window.location.href="http://www.example.com/DEV/product-categories/example.php" + caturl;
          if (newWindow === "http://www.example.com/DEV/product-categories/example.php" + caturl) {
              if(window.location.hash) {
                $("caturl").click();
              } else {
                 window.location = window.location.href + "#refresh";
                 location.reload();
              }



          } 
      });

answered Feb 9, 2017 at 14:30

Tumen_t

8016 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Tom Over a year ago

is there a way i can reset the click event? because these functions are already initialized prior to running this code. which is why i need to refresh the page. the click event wont work unless page is first reloaded

Tumen_t Over a year ago

Try wrapping it in $( document ).ready(function(){ //place your code here }). This basically means "A page can't be manipulated safely until the document is "ready."

Tom Over a year ago

if i put location.reload(); before the cat url click function it works. not sure why this is. but still doesnt on chrome

Tumen_t Over a year ago

Are you trying to call the click event on caturl element by $("caturl").click()? If so, I would use $("caturl").trigger("click") instead.

Tom Over a year ago

it tells me that its undefined

|

Collectives™ on Stack Overflow

Trying to use a data tag and click event to trigger a function

1 Answer 1

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related