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

New Issue

iLoveElysia · 2019-10-18T06:37:56-05:00

Christian1998 commented

2019-10-18 06:37:56 -05:00

(Migrated from github.com)

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 ))

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 commented

2019-10-19 21:00:31 -05:00

(Migrated from github.com)

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()
    }
  });

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 commented

2019-10-22 03:49:35 -05:00

(Migrated from github.com)

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.

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!

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. <img width="251" alt="grafik" src="https://user-images.githubusercontent.com/13522681/67270641-5a24d080-f4b9-11e9-9a9a-12068fe2107d.png"> 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 commented

2019-11-14 09:20:26 -05:00

(Migrated from github.com)

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');
  });

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'); }); ```

👍 1

Christian1998 commented

2019-11-23 12:09:06 -05:00

(Migrated from github.com)

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

regards from switzerland :)

Thanks for your suggestion. I'll try it next week and will reply here. regards from switzerland :)

iLoveElysia closed this issue

2025-04-04 12:54:46 -05:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: iLoveElysia/pjax#218