0

I have a page with multiple web-parts. I have four buttons in a web-part: 

<div id="buttons">
   <div class="gmcButton" id="About GMC">About GMC</div> 
   <div class="gmcButton" id="Key Features">Key Features &amp; Changes</div> 
   <div class="gmcButton" id="Implementation And Rollout">GMC Implementation<br/>and Rollout</div> 
   <div class="gmcButton" id="GMC Resources">GMC Resources<br/></div>
</div>

In a second web-part zone there are four list view web parts. On page load, I have a JQuery function that loops through the four web-parts and hides all but the default web-part. 

function loadPanels() {
   $('.js-webpart-titleCell').each(function (j) {
       var title = $(this).find('h2.ms-webpart-titleText').text();
       if(title!="About GMC") {
           $(this).parent().parent().parent().addClass("hidden");
       }
   });
}

This works. All but the default "About GMC" web part hide. What happens though when I click the buttons on the page is that the title of the web part changes to the appropriate title, but the contents of the web part do not change.

If I examine the CSS in the DOM explorer, the entire web part has the correct class applied, but it is not changing the display from the default web part content.

What am I doing wrong?

edit: the code for hiding/showing the web parts on the button click. The action is the same, add or remove class. When I examine the page in the DOM explorer, I see the class addded to the appropriate web parts, but the behavior isn't changing for the contents of the web part (only the titles of the web parts change, but the content still shows the default web part content):

$(".gmcButton").click(function() {
    var btnName = $(this).attr("id");
    $('.js-webpart-titleCell').each(function (j) {
        var title = $(this).find('h2.ms-webpart-titleText').text();
        if(title!=btnName) {
            $(this).parent().parent().parent().addClass("hidden");
        }
        else {
            $(this).parent().parent().parent().removeClass("hidden");                               
        }                   
    }); 
});
Improve this question
5
  • Where is the code you written on button click? What it does after clicking the buttons? Can you please add that code as well to your question? Commented Oct 23, 2019 at 6:10
  • See edit to OP above. Essentially the same code - adding/removing a class to the appropriate web parts based on the button clicked. And yes, the value of the button ID is the same as the title of the web part - I've double-checked. Commented Oct 23, 2019 at 12:14
  • if(title!="About GMC") -> here you have applied "hidden" class for other classes only. Does "loadPanels()" function run on page load? Commented Oct 23, 2019 at 12:48
  • Yes, LoadPanels runs on page load. Commented Oct 23, 2019 at 12:55
  • Found the problem- this was a page that had been migrated from 2010 - so all the views reset after migration and all four views were showing the same content instead of different content. Commented Oct 23, 2019 at 14:53

1 Answer 1

Reset to default
0

The problem was with the views- this was a page that had been migrated from 2010 to SP Online. In migration, the views got reset so they all showed the same data instead of different data. The Javascript was working just fine.

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.