Creating a JavaScript file which can trigger 2 clicks events to select the web part default view

Question

I have spent many hours to try to write a script which allow me to do the following :-

1. Currently i have a Discussion Board list which contain many items. where inside my site home page i added a new App Part representing the Discussion Board list.

2. Now i edit the app part setting and i select the "Subject" as the view.

3. So the final result i got is as follow. where there are links named; Recent, What's hot, My discussions... and inside the list menu i got links named; unanswered question, answered questions and Featured, as follow:-

4. Now i tried to find a way to set the default view for the app part to be "Featured" instead of "Recent".. but seems inside the app part setting we can not have these settings.

5. Now i already know that inside the App part there is a view named "Featured Discussions", but this view will only show the discussion item title and created by, without showing the number of replies or the number of likes..so that why i need to use the "Featured" link inside the "Subject" app part view.

6. so i tried this script to mimic clicking on the "..." link >> then clicking on the "Featured" link.

<script type="text/javascript">
var timer1
$(document).ready(function(){
      if($("#MSOZoneCell_WebPartWPQ2").find("a:contains('Featured')").length==0)
      {
        ($("#MSOZoneCell_WebPartWPQ2").find("img.ms-ellipsis-icon")).trigger('click');
        time1= setTimeout(test,1000);
      }

  });

 function test()
 {
   $("a:contains('Featured')").trigger('click');
 }
  clearTimeout(timer1);
</script>

At first i thought the script worked well. but seems with some extra testing it did not, as currently i am facing these issues:-

1. on google chrome, Firefox and safari the script will work well. where when i first visit the page the list menu will open and the "Featured" view will be selected automatically. but when i open many tabs and refresh them all (where the response time will increase), then on some tabs i have noted that either the list menu is shown without selecting the "Featured" link (as shown in the above picture). and on other tabs the app part will be rendered as white area!!.

2. now on IE (currently i am using IE 11), the situation was as follow:-

   • If i do a hard refresh for the page (CTRL + F5), the list menu menu will be shown, but the "Featured" link will not get clicked.
   • If i access the page without doing a hard refresh (CTRL + F5) the script will not have any effect... even the list menu will not get shown.

Now I think that the issue i am facing is that the script will be accessing some components/markups that have not been rendered yet. due to performance delay or due to having 2 .trigger('click'); where one is depending on the other... so i am not sure if i can modify my script to work on a more robust way? and to eliminate the browser differences and performance issues which are breaking the script...

Edit

now based on @Aveenav reply, i added the following script inside a script editor web part:-

<script  type="text/javascript">
(function () {
    // String overrides
    function DiscussionListViewStringOverride() {

    SP.UI.Discussions.SortFilterItem.onPivotControlMenuOptionClick("SortItem4");
    }

    DiscussionListViewStringOverride();
    ExecuteOrDelayUntilScriptLoaded(DiscussionListViewStringOverride, "strings.js");

})();
</script>

but this did not have any effect and still the Recent link will be selected. also i should mention that inside the page i have added 2 app parts for the Discussion Board list. now i need the first app part to have the "Featured" as the default , while for the other app part to keep the "Recent" as the defualt.. Thanks

Answer 1

I think "window.onload" method should do the trick. This should be affected only for the first app part on the page and it should show up Featured items by default while second app part should keep Recent as default. Please give it a try.

<script type="text/javascript">

window.onload = function() {
    SP.UI.Discussions.SortFilterItem.onPivotControlMenuOptionClick('SortItem4');
};

</script>

Answer 2

Take a look at sp.ui.discussions.debug.js

Here's one way to trigger Featured link. You may have to use ExecuteOrDelayUntilScriptLoaded or some sort of setTimeOut delay.

$(doucument).ready(function() {
   // SortItem4 is for Featured
   setTimeout(function(){ SP.UI.Discussions.SortFilterItem.onPivotControlMenuOptionClick('SortItem4'); }, 500);
};