Uncaught Error: Syntax error, unrecognized expression: #x-legacy-tab-https://mysalus.org/"]

[dsthompson]

Hi. I am getting the following error in my console - on several (if not all) pages. https://mysalus.org

Uncaught Error: Syntax error, unrecognized expression: #x-legacy-tab-https://mysalus.org/"]
at Function.fa.error (jquery.js:2)
at fa.tokenize (jquery.js:2)
at fa.select (jquery.js:2)
at Function.fa (jquery.js:2)
at Function.a.find (jquery-migrate.min.js:2)
at n.fn.init.find (jquery.js:2)
at n.fn.init.a.fn.find (jquery-migrate.min.js:2)
at a.fn.init.n.fn.init (jquery.js:2)
at new a.fn.init (jquery-migrate.min.js:2)
at n (jquery.js:2)

I do have the following js in my theme-customize js panel based upon my previous ticket and the code provided there. https://theme.co/apex/forum/t/will-it-be-possible-to-use-tabs-in-url-navigation-with-xpro-v2-1-x-going-forward/35599

// Tabs js - working?

jQuery( function($){

$( window ).on(‘load resize’, function(){
scroll_to_tab ( location.href.split("#tab-").slice(-1)[0] );
});
function scroll_to_tab ( tab_id ) {
console.log(tab_id);
var tab_nav = $(’#x-legacy-tab-’ + tab_id + ‘"]’);
var tab_content = $(’#x-legacy-panel-’ + tab_id + ‘"]’);
if(tab_nav.length >=1) {
$( tab_nav ).trigger(‘click’);
$(‘html,body’).stop().animate({scrollTop: $(tab_content).offset().top - ( $(’.x-navbar’).height() + 50 ) },700 ,‘swing’);
}
}
});

Has something changed recently? Thank you

[ruenel]

Hello @dsthompson,

Thanks for writing in!

Please use this code:

jQuery( function($){

$( window ).on('load resize', function(){
	scroll_to_tab ( location.href.split("#tab-").slice(-1)[0] );
});

function scroll_to_tab ( tab_id ) { 
	console.log(tab_id);
	var tab_nav = $('#x-legacy-tab-' + tab_id + '');
	var tab_content = $('#x-legacy-panel-' + tab_id + '');
	if(tab_nav.length >=1) {
		$( tab_nav ).trigger('click');
		$('html,body').stop().animate({scrollTop: $(tab_content).offset().top - ( $('.x-navbar').height() + 50 ) },700 ,'swing');
	}
  }
});

And do not place this code in X > Theme Options > Custom JS. You will need to add this code on the page’s Cornerstone > Custom CSS ONLY when a tab content element is present on the page.

Hope this helps. Kindly let us know.

[dsthompson]

Thank you for the instructions here. I have removed the js from customize > js but the pages I have with tabs were not buil in cornerstone and are siply html with tab short codes - which has worked well for a couple years now. I tried adding the js into my tabbed pages at the bottom of the page as below - but that gives me the error of Uncaught SyntaxError: Unexpected token <

---

I have the header/footer plugin installed and tried the code on the page level but that did not work either.
Other ideas to try?
Thank you

[rad]

Hi @dsthompson,

That was for the old version and only good to the time it was given. We can’t provide maintenance for the old codes.

May I know which exact page has this issue? Maybe it’s a v2 element where it doesn’t need this custom code anymore.

It’s a tab item feature in its customize section. If the hash matches the URL hash, then the tab will automatically set to active. And you may check this as well https://theme.co/apex/forum/t/tabbed-content-url-link-to-go-to-a-specific-tab/50220

Thanks!

[dsthompson]

Thanks for that Rad. All my tabed pages require login, but example can be seen here https://mysalus.org/my-well-being/my-wellness/

Again, my tabbed pages were not build with cornerstone and are built with the tab shortcodes from http://demo.theme.co/integrity-1/shortcodes/tabbed-content/ Which I believe your saying are no longer supported by js code snippets (the article link you reference.

So to get tab nav to work again, I think I need to consider either (new to both the following here so bear with me)

1. Making a tabbed page template using cornerstone with v2 tab elements and hoping I can get the same look (all html/css) or
2. Possibly making a block template for tabbed elements and then using the block within my html pages - replacing the tab shortcodes that now house my tab content?

Can you guide how best to proceed based upon my two scenarios here?
Thank you and always appreciate your help and guidane

[ruenel]

Hello @dsthompson,

Well you can still resolve this issue without editing anything. Simply add this updated custom JS back in Theme Options > Custom JS section:

jQuery( function($){
  $( window ).on('load resize', function(){
    var pageAddress = window.location.hash;

    if ( pageAddress || pageAddress != '' ) {
      scroll_to_tab ( location.href.split("#tab-").slice(-1)[0] );
    }
  });

  function scroll_to_tab ( tab_id ) { 
    console.log(tab_id);
    var tab_nav = $('#x-legacy-tab-' + tab_id + '');
    var tab_content = $('#x-legacy-panel-' + tab_id + '');
    
    if(tab_nav.length >=1) {
      $( tab_nav ).trigger('click');
      $('html,body').stop().animate({scrollTop: $(tab_content).offset().top - ( $('.x-navbar').height() + 50 ) },700 ,'swing');
    }
  }
});

We would loved to know if this has work for you. Thank you.