pass attribute on click link instead hash

Question

I have a link in my menu. It has an attributte like title=.roc. When I click on this link, I want to save this attribute and click on element with the same attribute on the destination page.

Page example.com. I click in the next link.

<li class="menu-item"><a title=".roc" href="https://example.com/port/#flash">Roc</a></li>

So now, in example.com/port/, it should click the element with title=".roc":

<a id="flash" href="#" title=".roc">ROC2</a>

I have this code, but I dont know how pass the attribute instead the hash:

jQuery(function ($) {
  var activeTab = document.querySelector(location.hash);
  history.replaceState(null, null, ' ');
  window.addEventListener('load', function () {
    if (activeTab) {
      setTimeout(function(){ activeTab.click(); }, 100);
    }  
  })
});

activeTab = location.hash==='#flash' ? $('[title]=".roc"') : $(location.hash)? Also why are you binding the load event in your DOM ready hook? If you want ot pass parameters other than just hash, you should use query parameters. URLSearchParams can build it for you — user120242
– user120242, Commented May 29, 2020 at 21:57
I dont want the parameters in the url. The load its because I should wait to load the full page to make the click. If its too fast wont work (If I dont use the load). — Jose
– Jose, Commented May 29, 2020 at 22:01
you can use sessionStorage and localStorage to persist data. if cross domain the only way to communicate values is to use query params or have a server-side api that stores and returns data. it's not clear what you're trying to achieve, but those are the ways to pass data across pages — user120242
– user120242, Commented May 29, 2020 at 22:20
so I'm still not sure what exactly your use case is, but if you want to just save some data that the other page can also access, you can use sessionStorage.setItem('title','.roc') and then sesionStorage.getItem('title') on the next page to retrieve .roc — user120242
– user120242, Commented May 29, 2020 at 22:29

user120242 · Accepted Answer · 2020-05-29 22:55:39Z

1

on the pages you want to hook transfer 'title' from:

jQuery(function ($) {
  $(document.body).on('click','a[title]', function(event) {
    sessionStorage.setItem('title', event.target.getAttribute('title'));
  });
});

then on the other page:

jQuery(function ($) {
  var activeTab = document.querySelector(`[title="${sessionStorage.getItem('title')}"]`);
  window.addEventListener('load', function (event) {
    if (activeTab) {
      setTimeout(function(){ activeTab.click(); }, 100);
    }  
  })
});

edited May 29, 2020 at 22:55

answered May 29, 2020 at 22:35

user120242

15.3k3 gold badges43 silver badges53 bronze badges

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

6 Comments

user120242 Over a year ago

You want all links with title attribute to do that?

Jose Over a year ago

Sorry, ur code is working well. If i am in example.com and I click in your link all its fine. But if i am in the destination url and i click in your link, the browser will reload the page and after It make the click with the attibute. (I dont want the reload when i am in the destination page)

user120242 Over a year ago

that is because the code hooks page load to execute that code on page load. when do you want it to try to click activeTab?

Jose Over a year ago

Sorry, Its my fault again. If i am in example.com/port/ and i click a link to example.com/port/ browser will reload. Sorry do you have any idea to avoid this?

user120242 Over a year ago

you have to hook click and event.preventDefault() to prevent default behavior

|

Collectives™ on Stack Overflow

pass attribute on click link instead hash

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related