jQuery UI Tabs проблема получения имени таба

Сделал табы jQuery UI tabs.
Сами табы и их содержимое генерируется скриптом на основе данных полученных из базы данных.
В имени таба указывается ID элемента который относится к табу:

<li><a href="#tabs-3">tab3</a></li>
<div id="tabs-3">
...
</div>


Тоесть там не последовательные значения, а некие произвольные номера.

Контент же для каждого таба одинаковый на 100% и генерируется один раз и просто вкладывается в каждый таб. Я привел всего один элемент SELECT, на самом деле там их будет много и они будут привязаны к этому селекту. Скажем так — при выборе в селекте пунктов будут отображаться и скрываться элементы — интерактивно будет меняться форма.

Вот код странички целиком. При смене селекта выводится алерт просто в котором показывается что выбрано сейчас.
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf8"/>
	<title>jQuery tabs test</title>

	<link type="text/css" href="css/redmond/jquery-ui-1.8.24.custom.css" rel="stylesheet" />
	<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.24.custom.min.js"></script>
	<script>
		$(document).ready(function(){
			$("#edit_tabs").tabs();
			$('#edit_tabs #select_type').change(function(){
				var gTabSelect = $('#edit_tabs').tabs("option", "selected");
				var gSelectType = $(this).val();
				alert('type:' + gSelectType + '\ntab:' + gTabSelect);
			})
		});
	</script>

</head>
<body>

<div id="edit_tabs">
	<ul>
		<li><a href="#tabs-3">tab3</a></li>
		<li><a href="#tabs-5">tab5</a></li>
		<li><a href="#tabs-9">tab9</a></li>
	</ul>

	<div id="tabs-3">
		<select id="select_type" size="1">
			<option value="4">data4</option>
			<option value="6">data6</option>
			<option value="7">data7</option>
		</select>
	</div>
	<div id="tabs-5">
		<select id="select_type" size="1">
			<option value="4">data4</option>
			<option value="6">data6</option>
			<option value="7">data7</option>
		</select>
	</div>
	<div id="tabs-9">
		<select id="select_type" size="1">
			<option value="4">data4</option>
			<option value="6">data6</option>
			<option value="7">data7</option>
		</select>
	</div>
</div>
</body>
</html>

А теперь проблема.
Чтобы узнать какой таб сейчас выбран достаточно спросить у него:

var gTabSelect = $('#edit_tabs').tabs("option", "selected");

И вот тут и кроется проблема — так как таб говорит свой индекс начиная с нуля и ему наплевать на мои заранее заданные имена табов. Как следствие я не могу далее управлять контентом так как не знаю в каком идентификаторе мне что надо править…

тоесть мое обращение к данным внутри таба может быть таким:
$('#tabs-3 #select_type')...

но у меня есть лишь индекс таба, но не его имя для такого обращения… А индекс и номер не совпадают…

В общем как обойти эту проблему? Мне потом надо передавать через AJAX данные и указывать не индекс таба, а его имя так как ано привязано у меня к базе данных. Плюс я даже не могу скрипт сделать чтобы извне менять активный таб — я так же должен индекс таба указывать, а не его имя чтобы сделать активным…

Как получить имя таба, а не его индекс?
Как изменять активный таб по имени, а не указывая его индекс?
Как получить доступ к элементам текущего таба, если в каждом табе все элементы имеют одинаковые имена?
  • Вопрос задан
  • 7382 просмотра
Пригласить эксперта
Ответы на вопрос 5
wscms
@wscms
А зная его индекс, разве сложно получить его ID?

$('#edit_tabs div').eq(gTabSelect).attr('id');
Ответ написан
Как получить имя таба, а не его индекс?

Можно так jsfiddle.net/34QJv/1/
Возможно средствами UI это можно сделать более изящно, но в документации я этого не нашел
Как изменять активный таб по имени, а не указывая его индекс?

Опять таки можно так: jsfiddle.net/34QJv/2/
А можно покапаться в апи и найти более правильное решение)
Как получить доступ к элементам текущего таба, если в каждом табе все элементы имеют одинаковые имена?

Зная id таба примерно так:
$(tabname).find('element');
Ответ написан
@petuhov_k
Не так давно я убил кучу времени на эти табы (несколько дней, если ни неделя). На динамическое добавление, на открытие нужного, на узнавание, того, кто открыт и т.д. Всё это осложнялось тем что табы внутри layout-а, и layout внутри каждого таба.

В один счастливый момент, я взял и за час переписал всё на knockoutjs, с которым до этого был едва знаком. Радуюсь по сей день, чего и Вам желаю. Удачи.
Ответ написан
demimurych
@demimurych
Индекс diva который содержит контент текущего открытого таба можно получить так

var id = '#ui-tabs-' + ($('#edit_tabs').tabs(«option», «selected»)+1);
именно внутри дива с id будет находится нужный вам контент.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы