Issue regarding Tabclick event.

[Apeksha SinghParticipant]

Hi,

I have used the following code to display different views on tabclick event.

But it is creating an issue i.e., every other tabs inside this tab is getting directed to this pages in respect of their index.

I have used title here to differentiate but then too its creating conflict .

Please reply me as soon as possible.

Thanks & Regards,
Apeksha

[DimitarParticipant]

Hello Apeksha,

Please re-post your code.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Apeksha SinghParticipant]

Hi,

I have used the following code to display different views on tabclick event.

 $(’#jqxTabs’).jqxTabs({  width: ’100%’,autoheight:true,keyboardNavigation: false,  position: ‘top’, theme:  ‘ui-start’ });
 $(’#jqxTabs’).on(‘tabclick’, function (event) 
      { 
   var clickedItem = $(’#jqxTabs’).jqxTabs(‘getTitleAt’, event.args.item);    
   switch (clickedItem) {
 case ”Home”:
  self.goToPage(’display_main_dashboard’);
  break;
 case ”Accounts”:
  self.goToPage(’display_main_accounts’);
  break;
 case ”Reports”:
  self.goToPage(’display_main_reports’);
  break;
 case ”Contacts”:
  self.goToPage(’display_main_contacts’);
  break;
 case ”Settings”:
  self.goToPage(’display_main_settings’);
  break;
    }
      });

But it is creating an issue i.e., every other tabs inside this tab is getting directed to this pages in respect of their index.

I have used title here to differentiate but then too its creating conflict .

Please reply me as soon as possible.

Thanks & Regards,
Apeksha

[DimitarParticipant]

Hi Apeksha,

Unfortunately, the provided code is not sufficient for us to determine the source of the issue. Could you, please, provide us with a larger code sample, which also includes your HTML code?

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Apeksha SinghParticipant]

Hi Dimitar,

As you asked I am adding my code below.

This is the HTML for tab :-

<div id='jqxTabs' >
     <ul class="tabbed_font-size" style="margin-left:20%!important;">
	   <li>Home</li>
	   <li>Accounts</li>
	   <li>Reports</li>		
	   <li>Contacts</li>
	   <li>Settings</li>
           <span class="user_section"> 
	       <span id="userNameId">Hello Finapp</span>
	       <span> | <a href="#" title="Sign Out" style="font-size:0.9em;">Sign Out</a></span>
           </span>
      </ul>           
      <div id="content1" class="content"></div>		
      <div id="content2" class="content"></div>
      <div id="content3" class="content"></div>
      <div id="content5" class="content"></div>
      <div id="content4" class="content"></div>
 </div>

And the script part is :-

$('#jqxTabs').jqxTabs({  width: '100%',autoheight:true,keyboardNavigation: false,  position: 'top', theme:  'ui-start' });
               
             //START:Code to display the first view always on click of a tab
              $('#jqxTabs').on('tabclick', function (event) 
				{ 
				   var clickedItem = $('#jqxTabs').jqxTabs('getTitleAt', event.args.item); 				   
				   switch (clickedItem) {
					case "Home":
					  self.goToPage('display_main_dashboard');
					  break;
					case "Accounts":
					  self.goToPage('display_main_accounts');
					  break;
					case "Reports":
					  self.goToPage('display_main_reports');
					  break;
					case "Contacts":
					  self.goToPage('display_main_contacts');
					  break;
					case "Settings":
					  self.goToPage('display_main_settings');
					  break;
				   }
				});

Till now you can see that I am loading different view on each tabclick and it is working fine.
But if there is another sub tabs in these view , it is also following the main tab click event as mentioned above.
Why is this happening.
Please reply me as soon as possible.

Thanks & Regards,
Apeksha

[DimitarParticipant]

Hi Apeksha,

This is called event bubbling. To stop it, bind to the inner tab’s event and return false, i.e.:

$('#jqxTabsSub1').on('tabclick', function (event) {
    return false;
});

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Apeksha SinghParticipant]

Hi Dimitar,

Thanks for your reply it resolved my issue.

Regards,
Apeksha

[Author]

Posts