ajax срабатывает со второго раза - JavaScript, Ajax

Erilar · 04.01.2015, 09:19

Есть файлы:
main.php:

Код HTML:

<html>	
<head>	
	<script type="text/javascript" src="scripts.js"></script>	
</head>
<body>
<ul>
    <li><a href="#" class="nav" id="news">первая</a></li>
    <li><a href="#" class="nav" id="news2">вторая</a></li>
</ul>
   <section>
<? include "news.php" ?>
   </section>

<?
$crs = trim(strip_tags($_POST['crs']));

if(file_exists($crs.'.php'))
{ 	
	include($crs.'.php');
}
else
{		
	include('news.php');
}
?>


</body>
</html>

-----------------------------
scripts.js:

Код HTML:

$(document).ready(function(){//загрузка контента (для main.php)
    $('.nav').click(function(){ 
        var clkid = this.id; 

            $.ajax({ 
                type: "POST",
                url: "main.php",
                data: "crs="+clkid,
                success: function(data){ 
                $("section").html(data);
                history.replaceState(null, null, "cont="+clkid);
                },beforeSend: function(){                       
                    $("#loader").css("display", "block");
                }
            }).done(function(data){                
                $("#loader").css("display", "none");
                window.scrollTo(0,600);  
                });
        return false; 
    });
});//загрузка контента (для main.php)

$(document).ready(function(){//загрузка Полной новости (для news.php)
    $('.view').click(function(){ 
        var clkid = this.id; 
            $.ajax({ 
                type: "POST",
                url: "view.php",
                data: "id="+clkid,
                success: function(html){ 
                $("section").html(html);
                history.pushState(null, null, url);
                window.scrollTo(0,600);
                }
            });
        return false; 
    });
});//загрузка Полной новости (для news.php)

-----------------------------------
news.php
В этом файле из базы данных вытягиваются статьи типа:

Код HTML:

<h3>Заголовок</h3>
<p>текст</p>
<a href="#" class="view" id="id статьи">подробнее</a>

При нажатии на ссылку, в этом же файле обработчик вытаскивает текст полной статьи
--------------------------------------
Проблема вот в чем:
При загрузке страницы загружается news.php и, при нажатии на "подробнее", в "section" загружается полная статья. Всё правильно. Но, когда нажимаю на ссылку

Код HTML:

<ul>
    <li><a href="#" class="nav" id="news">первая</a></li>
    <li><a href="#" class="nav" id="news2">вторая</a></li>
</ul>

"первая", чтобы загрузить news.php в "section", всё загружается хорошо, но ссылка "подробнее" перезагружает всю страницу.

Gorychev · 04.01.2015, 09:49

Хм.., а чего у вас ссыль "подробнее" с классом id? И еще, так-как этот контент выплевывается динамически на страницу, обычный onclick не привязан к нему. Для того чтобы работало, нужно привязать это событие методом on или явно указывать функцию обработчик onclick="myFunction();"
В общем, я как-то так это вижу:

Код:

<a href="#" class="view" id="id статьи">подробнее</a>
.........
$('.view').on('click', function(){
        var clkid = this.id; 
            $.ajax({ 
                type: "POST",
                url: "view.php",
                data: "id="+clkid,
                success: function(html){ 
                $("section").html(html);
                history.pushState(null, null, url);
                window.scrollTo(0,600);
                }
            });
        return false; 
    });

Erilar · 04.01.2015, 12:32

Просто пример для вопроса написал вручную, вместо id нужно view написать.
Объясните пожалуйста чем отличается "$('.view').on('click', function(){"
от "$('.view').click(function(){ ".

Цитата:

Сообщение от Gorychev

В общем, я как-то так это вижу:

Код:

$('.view').on('click', function(){

Сделал. Но не помогло...

Naive · 04.01.2015, 13:53

Нужно вешать живое событие на статичный блок, который будет ловить всплывание от динамических дочерних по селектору (это если тонкости курить будешь, что гуглить).

Код:

$('body').on('click','.view',function(){ /*...*/ })

Здесь тело документа выступает этим статичным блоком, клик - отлавливаемое событие, класс вью - где ищем событие, дальше все также.
Это синтаксис молодых версий jQuery, в старых вместо этого использовались методы .live и/или .delegate, но работали они криво-косо, посему от них отказались.

Erilar · 04.01.2015, 14:05

Спасибо! Работает.

Цитата:

Сообщение от Naive

Код:

$('body').on('click','.view',function(){ /*...*/ })

Не повлияет ли такой способ на быстродействие? (извините если чушь ляпнул)

Naive · 04.01.2015, 17:14

Цитата:

Сообщение от Erilar

Не повлияет ли такой способ на быстродействие? (извините если чушь ляпнул)

Не в таких объемах.

Erilar · 04.01.2015, 18:42

Цитата:

Сообщение от Naive

Не в таких объемах.

А в таких?

Код HTML:

$(document).ready(function(){
$('body').on('click','.nav', function(){
var clkid = this.id;
$.ajax({
type: "POST",
url: "/cont/main.php",
data: "crs="+clkid,
success: function(data){ 
$("section").html(data);
history.replaceState(null, null, "?option=main&cont="+clkid);
},beforeSend: function(){                       
$("#loader").css("display", "block");
}
}).done(function(data){                
$("#loader").css("display", "none");
window.scrollTo(0,580);  
});
return false; 
});
});

$(document).ready(function(){
$('body').on('click','.view', function(){
var clkid = this.id; 
$.ajax({ 
type: "POST",
url: "../../cont/view.php",
data: "id_text="+clkid,
success: function(html){ 
$("section").html(html);
history.pushState(null, null, "?option=main&cont=view&id_text="+clkid);
},beforeSend: function(){                       
$("#loader").css("display", "block");
}
}).done(function(data){                
$("#loader").css("display", "none");
window.scrollTo(0,580);  
});
return false; 
});
});

$(document).ready(function(){
$('body').on('click','.g_news', function(){
var clkid = this.id; 
$.ajax({ 
type: "POST",
url: "../../cont/group_news.php",
data: "page="+clkid,
success: function(html){ 
$("section").html(html);
history.pushState(null, null, "?option=main&cont=group_news&page="+clkid);
},beforeSend: function(){                       
$("#loader").css("display", "block");
}
}).done(function(data){                
$("#loader").css("display", "none");
window.scrollTo(0,580);  
});
return false; 
});
});

$(document).ready(function(){
$('body').on('click','.a_news', function(){
var clkid = this.id; 
$.ajax({ 
type: "POST",
url: "../../cont/all_news.php",
data: "page="+clkid,
success: function(html){ 
$("section").html(html);
history.pushState(null, null, "?option=main&cont=all_news&page="+clkid);
},beforeSend: function(){                       
$("#loader").css("display", "block");
}
}).done(function(data){                
$("#loader").css("display", "none");
window.scrollTo(0,580);  
});
return false; 
});
});

$(document).ready(function(){
$('body').on('click','.disk', function(){
var clkid = this.id; 
$.ajax({ 
type: "POST",
url: "/cont/disk.php",
data: "id="+clkid,
success: function(html){ 
$("section").html(html);
history.pushState(null, null, "?option=main&cont=disk&id="+clkid);
},beforeSend: function(){                       
$("#loader").css("display", "block");
}
}).done(function(data){                
$("#loader").css("display", "none");
window.scrollTo(0,580);  
});
return false; 
});
});

$(document).ready(function(){
$('body').on('click','.del_wall', function(){
var clkid = this.id; 
$.ajax({ 
type: "POST",
url: "/cont/profile.php",
data: "id_val="+clkid,
success: function(html){ 
$("section").html(html);
history.pushState(null, null, "?option=main&cont=profile");
},beforeSend: function(){                       
$("#loader").css("display", "block");
}
}).done(function(data){                
$("#loader").css("display", "none");
window.scrollTo(0,580);  
});
return false; 
});
});

$(document).ready(function(){
$('body').on('click','.song', function(){
var clkid = this.id; 
$.ajax({ 
type: "POST",
url: "/cont/song.php",
data: "id="+clkid,
success: function(html){ 
$("section").html(html);
history.pushState(null, null, "?option=main&cont=song&id="+clkid);
},beforeSend: function(){                       
$("#loader").css("display", "block");
}
}).done(function(data){                
$("#loader").css("display", "none");
window.scrollTo(0,580);  
});
return false; 
});
});

Naive · 05.01.2015, 05:04

И в таких не страшно, тупить может начать на таблицах с 100к+ строками (по слухам)
Сам я таких шедевров не вершил еще.
пс. код я бы оптимизировал, выбросив функцию с аяксом отдельно, разбив логику по параметрам, ужмется раз в ~7. Основные блоки можно закешировать, а статичным вешать обычные события, не живые.

Erilar · 06.01.2015, 11:15

Цитата:

Сообщение от Naive

пс. код я бы оптимизировал

Можно пример? Голова не соображает уже...

Naive · 06.01.2015, 11:48

Да так оставь, ничего страшного.

04.01.2015, 09:49	#2
Gorychev Участник клуба Регистрация: 08.03.2008 Сообщений: 1,537	Хм.., а чего у вас ссыль "подробнее" с классом id? И еще, так-как этот контент выплевывается динамически на страницу, обычный onclick не привязан к нему. Для того чтобы работало, нужно привязать это событие методом on или явно указывать функцию обработчик onclick="myFunction();" В общем, я как-то так это вижу: Код: `<a href="#" class="view" id="id статьи">подробнее</a> ......... $('.view').on('click', function(){ var clkid = this.id; $.ajax({ type: "POST", url: "view.php", data: "id="+clkid, success: function(html){ $("section").html(html); history.pushState(null, null, url); window.scrollTo(0,600); } }); return false; });` Последний раз редактировалось Gorychev; 04.01.2015 в 10:07.

04.01.2015, 13:53	#4
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Нужно вешать живое событие на статичный блок, который будет ловить всплывание от динамических дочерних по селектору (это если тонкости курить будешь, что гуглить). Код: `$('body').on('click','.view',function(){ /.../ })` Здесь тело документа выступает этим статичным блоком, клик - отлавливаемое событие, класс вью - где ищем событие, дальше все также. Это синтаксис молодых версий jQuery, в старых вместо этого использовались методы .live и/или .delegate, но работали они криво-косо, посему от них отказались. Alar, верни репу!

05.01.2015, 05:04	#8
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	И в таких не страшно, тупить может начать на таблицах с 100к+ строками (по слухам) Сам я таких шедевров не вершил еще. пс. код я бы оптимизировал, выбросив функцию с аяксом отдельно, разбив логику по параметрам, ужмется раз в ~7. Основные блоки можно закешировать, а статичным вешать обычные события, не живые. Alar, верни репу!

06.01.2015, 11:48	#10
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Да так оставь, ничего страшного. Alar, верни репу!

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Уведомление о создании файла срабатывает 2 раза	HellMercenariess	Общие вопросы Delphi	4	07.06.2013 19:22
Меню второго уровня.	artur7373888	HTML и CSS	0	05.02.2013 22:45
Комп заводится со второго или третьего раза	victorshkoda	Компьютерное железо	32	14.04.2012 18:59
Выход из аккаунта, сесии удаляются со второго раза	gufon	PHP	5	04.05.2011 22:54
Загружается со второго раза	Xardas	Компьютерное железо	10	10.03.2008 08:51