[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 245
  • Last Modified:

Jquery tabs click

Hello.

Please tell me what is wrong here:

$("#featured > ul").bind("tabsselect", function(event, ui) {
  	selectedTab =$("#featured > ul").tabs().data("selected.tabs");
	alert (ui.index);
)}

Open in new window


ui.index is undefined. I need that for click event.

Please Help.
0
radugheorghies
Asked:
radugheorghies
  • 4
  • 4
1 Solution
 
Gurvinder Pal SinghCommented:
if ui is the element that is clicked, you can replace it with

alert($(this).index());
0
 
radugheorghiesAuthor Commented:
Hello gurvinder372

alert($(this).index()) in my fuction is always -1 (for all tabs).
0
 
Gurvinder Pal SinghCommented:
okay, tell me one thing

$("#featured > ul").bind("tabsselect", function(event, ui) {
        //selectedTab =$("#featured > ul").tabs().data("selected.tabs");
      //alert (ui.index);
     alert($(this).html());
)}

when you select tab, does this alert the correct tab?
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
radugheorghiesAuthor Commented:
this is what I get on any tab:

            
 <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><div class="spatiu1"><a href="#fragment-1"><img src="images/gol.gif" alt="" height="100" width="138"></a></div></li>
	        <li class="ui-tabs-nav-item" id="nav-fragment-2"><div class="spatiu2"><a href="#fragment-2"><img src="images/gol.gif" alt="" height="100" width="138"></a></div></li>
	        <li class="ui-tabs-nav-item" id="nav-fragment-3"><div class="spatiu3"><a href="#fragment-3"><img src="images/gol.gif" alt="" height="100" width="138"></a></div></li>
	        <li class="ui-tabs-nav-item" id="nav-fragment-4"><div class="spatiu4"><a href="#fragment-4"><img src="images/gol.gif" alt="" height="100" width="138"></a></div></li>
            <li class="ui-tabs-nav-item" id="nav-fragment-5"><div class="spatiu5"><a href="#fragment-5"><img src="images/gol.gif" alt="" height="100" width="138"></a></div></li>

Open in new window


This is what alert($(this).html()) is doing.
0
 
Gurvinder Pal SinghCommented:
why don't you simply do

alert($(".ui-tabs-selected").index());

since by now you know which one is selected, because .ui-tabs-selected class is attached to it
0
 
radugheorghiesAuthor Commented:
hmmm.

alert($(".ui-tabs-selected").index()); is always -1.
0
 
Gurvinder Pal SinghCommented:
even if you select some other tab also?

In that case, whatever plugin you are using, is not assigning the class properly
0
 
radugheorghiesAuthor Commented:
i did it in other way:

var mycheckedtab=setInterval("checktabs()",200);

function checktabs(){
	if ($("#nav-fragment-2").hasClass("ui-tabs-selected")){
		$("#fragmentelemele-1").show();
		$("#fragmentelemele-2").hide();
		$("#fragmentelemele-3").hide();
		$("#fragmentelemele-4").hide();
		$("#fragmentelemele-5").hide();	
	}
	
	if ($("#nav-fragment-3").hasClass("ui-tabs-selected")){
		$("#fragmentelemele-1").hide();
		$("#fragmentelemele-2").show();
		$("#fragmentelemele-3").hide();
		$("#fragmentelemele-4").hide();
		$("#fragmentelemele-5").hide();	
	}
	
	if ($("#nav-fragment-4").hasClass("ui-tabs-selected")){
		$("#fragmentelemele-1").hide();
		$("#fragmentelemele-2").hide();
		$("#fragmentelemele-3").show();
		$("#fragmentelemele-4").hide();
		$("#fragmentelemele-5").hide();	
	}
	
	if ($("#nav-fragment-5").hasClass("ui-tabs-selected")){
		$("#fragmentelemele-1").hide();
		$("#fragmentelemele-2").hide();
		$("#fragmentelemele-3").hide();
		$("#fragmentelemele-4").show();
		$("#fragmentelemele-5").hide();	
	}
	if ($("#nav-fragment-1").hasClass("ui-tabs-selected")){
		$("#fragmentelemele-1").hide();
		$("#fragmentelemele-2").hide();
		$("#fragmentelemele-3").hide();
		$("#fragmentelemele-4").hide();
		$("#fragmentelemele-5").show();	
	}
	}

Open in new window


Thanks for suggestion gurvinder372.

I think it is something wrong with jQuery UI.
I am using 1.3.2 version.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now