Tab content jumbles up on IE9 and Crome when rendered programatically. [#1865660]

Tab content jumbles up on IE9 and Google Chrome when rendered through program and the tab key is a number. It has been also tested by adding quotes to the '$tabs' key value (e.g. $tabs['159']) Below is the example of the code used.

<?php
$tabs[159] = array(
	'title' => t('abc'),
	'type' => 'view',
	'vid' => 'my_view',
	'display' => 'classes',
	'args' => '159',
);
$tabs[134] = array(
	'title' => t('xyz'),
	'type' => 'view',
	'vid' => 'my_view',
	'display' => 'classes',
	'args' => '134',
);

$quicktabs['qtid'] = 'any-unique-id';
$quicktabs['tabs'] = $tabs;
$quicktabs['style'] = 'Excel';
$quicktabs['ajax'] = FALSE;

print theme('quicktabs', $quicktabs);
?>

Comments

Comment #1

sudip.dey CreditAttribution: sudip.dey commented 13 December 2012 at 13:59

The quicktabs content do not work in IE 9 if the numeric has been used in the key.
While iterating through the objects to hide and show the current object, IE 9 and Chrome gets the wrong object reference to active for the clicked tab.

It works fine in IE9 and Chrome if strings have been used in the key.
The above code should be used like below or a small change to the quicktabs.js file will resolve this issue and work fine with the numeric in key also.

$tabs['159-tab'] = array(
    'title' => t('abc'),
    'type' => 'view',
    'vid' => 'my_view',
    'display' => 'classes',
    'args' => '159',
);
$tabs['134-tab'] = array(
    'title' => t('xyz'),
    'type' => 'view',
    'vid' => 'my_view',
    'display' => 'classes',
    'args' => '134',
);

Here '-tab' has been added to make the key String rather than only numeric. This will resolve the issue and the respective tab content will displayed correctly.

Fix in the quicktabs.js file:

  if (tab.tabpage.hasClass('quicktabs_tabpage')) {
	// Fix for IE and Chrome starts - ADDED
	 $.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase()); 
	 if(($.browser.msie || $.browser.chrome){
		$('#quicktabs_tabpage_'+qtid+'_'+active_tab_id).removeClass('quicktabs-hide');
	}else{
	// Fix for IE 9 and Chrome ends
    	        tab.tabpage.removeClass('quicktabs-hide');
	 }
  }

We will post this fix soon as a patch of this module.