Форум Сайтостроение Веб-строительство

Отложенная загрузка контента во вкладках на jQuery

12
BLACK_DANTE
На сайте с 24.03.2007
Offline
188
BLACK_DANTE
5273

Приветствую.

На сайте есть две вкладки (табы) на jQuery, в каждой из них достаточно объемный контент. При заходе на страницу все вкладки подгружаются одновременно. Как сделать так, чтобы контент загружался только у активной вкладки? И если пользователь переходит на вторую вкладку, то загрузка начиналась-бы и там.

Что-то гуглил, но так ничего и не нашел, хотя знаю что такая функция есть.

Будьте людьми.
alexvaleev
На сайте с 04.02.2010
Offline
55
alexvaleev
#1

При клике на вкладку ajax'ом подгружать контент.

Что-то вроде этого

$.ajax({
url: 'ajax/test.php',
success: function(data) {
$('.result').html(data);
}
});
Блог (http://alexvaleev.ru) Всем роуп! (https://rujump.ru/)
BLACK_DANTE
На сайте с 24.03.2007
Offline
188
BLACK_DANTE
#2

Возможно неверно установил, но никак не хочет подгружать нужный файл :(


<ul class="tabs">
	<li class="current">Вкладка 1</li>
	<li>Вкладка 2</li>
</ul>

	<div class="box visible">
		<p>Содержимое вкладки 1</p>
	</div>

	<div class="box">
	<script>
$.ajax({
url: '/test.php',
success: function(data) {
$('.result').html(data);
}
});
	
	</script>
	</div>
V
На сайте с 05.01.2011
Offline
23
veterinar
#3

$('.result').html(data);

вы пытаетесь записать то что ответил сервер в эллемент с класом result , а его у вас нет ))

BLACK_DANTE
На сайте с 24.03.2007
Offline
188
BLACK_DANTE
#4

Поставил свой класс, в итоге грузится содержимое в обеих вкладках...

Может кто может разжевать как это верно делается? Сайт по ссылке выше лежит уже пару часов.

alexvaleev
На сайте с 04.02.2010
Offline
55
alexvaleev
#5
BLACK_DANTE:
Поставил свой класс, в итоге грузится содержимое в обеих вкладках...

Может кто может разжевать как это верно делается? Сайт по ссылке выше лежит уже пару часов.

Набросал код, в браузере не проверял, по идее должен работать:)

Файл test.php должен лежать в корне сайта и выводить (возвращать) нужный блок текста 


<script>

$(function() {

	$("li.tab2").click(function() {

		if($(".tab2content").is(".loaded") === false) {

			$.ajax({

				url: '/test.php',

				success: function(data) {

					$('.tab2content').addClass("loaded").html(data);

			}

		}

	}

}

</script>

<ul class="tabs">

	<li class="current">Вкладка 1</li>

	<li class="tab2">Вкладка 2</li>

</ul>

<div class="box visible">

	<p>Содержимое вкладки 1</p>

</div>

<div class="box tab2content">

</div>
BLACK_DANTE
На сайте с 24.03.2007
Offline
188
BLACK_DANTE
#6

Видимо на самом сайте какая-то ошибка. Не выводит содержимое подключаемого файла.

В любом случае спасибо.

V
На сайте с 05.01.2011
Offline
23
veterinar
#7

покажи свой исправленный код

BLACK_DANTE
На сайте с 24.03.2007
Offline
188
BLACK_DANTE
#8 

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="js/tabs.js"></script>
</head>

<body>
<div class="section">
  
  <script>
$(function() {
	$("li.tab2").click(function() {
		if($(".tab2content").is(".loaded") === false) {
			$.ajax({
				url: '/vebcam.php',
				success: function(data) {
					$('.tab2content').addClass("loaded").html(data);
			}
		}
	}
}
</script>
<ul class="tabs">
	<li class="current">Вкладка 1</li>
	<li class="tab2">Вкладка 2</li>
</ul>


	<div class="box visible">
		<p>Вкладка 1</p>
	</div>

	<div class="box tab2content">
	Вкладка 2
	</div>
</div><!-- .section -->
</body>
alexvaleev
На сайте с 04.02.2010
Offline
55
alexvaleev
#9

Напутал со скобками слегка в яваскрипте, вот рабочий вариант 

$(function() {

	$("li.tab2").click(function() {

		if($(".tab2content").is(".loaded") === false) {

			$.ajax({

				url: '/vebcam.php',

				success: function(data) {

					$('.tab2content').addClass("loaded").html(data);

				}

			});

		}

	});

});
V
На сайте с 05.01.2011
Offline
23
veterinar
#10

и с этим кодом выводит сразу в обе вкладки ?

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий