Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove CSS-Class from old link and attach "active"-class to selected link #218

Open
Christian1998 opened this issue Oct 18, 2019 · 4 comments

Comments

@Christian1998
Copy link

Hi, ive a small problem and cant find a solution for it...
I use the plugin normally, and its working fine. But after the loaded page i want to assign a CSS-Class to the clicked element (Menu and add class to the clicked item).
Anyone a hint or a parameter i could use?

Thank you ))

@donShakespeare
Copy link

Please can you show how you use it?
In the mean time, is this helpful?

new Pjax({
  elements: "a",
  selectors: [
    "body"
  ],
  switches: {
    "body": function(oldBody, newBody, options) {
        /*
          do anything you want here.
          $('body').find('.that-link').addClass('active'); //<-jquery code
        */
        oldBody.outerHTML = newBody.outerHTML;
        this.onSwitch()
    }
  });

@Christian1998
Copy link
Author

Christian1998 commented Oct 22, 2019

Hi @donShakespeare,
thank you for your reply. All from pjax is working as well.
This is my menu. Its working as expected but i want to add the class "active" to the clicked item. I dont know how to get the clicked element to attach the css-class.
grafik

I already tried it with:
$(document).on('click', 'a[data-pjax-state]', function(e){ // do it }
and
document.addEventListener("pjax:click", function(options) { // do it }
But it wont work :(

Edit:
I found out that i could use the pjax:success-listener but it isnt very smart 🗡
Removed code-tag and moved it to pasteee: https://paste.ee/p/OV7CS

Any other idea? :D Thank you!

@donShakespeare
Copy link

I use something like what you have and works nicely.
Make sure that link is not within any element that gets replaced by PJAX. You can test it by manually adding a class to said link via the browser console, then click to pjax, and see if you lose that class you added.

$(document).on('click', 'a[data-pjax-state]', function(e){
  $(this).addClass('activeStuff');
});

You can also use pjax:send

//Fired after the Pjax request begins.
//might be better than the above ... since it is catered for by pjax itself
  document.addEventListener('pjax:send', function(e){
    console.log(e);
    console.log(e.triggerElement);
    $(e.triggerElement).addClass('activeStuff');
  });

@Christian1998
Copy link
Author

Thanks for your suggestion. I'll try it next week and will reply here.

regards from switzerland :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants