Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » mmm...Ajax!

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки
Страницы: 1 2

Открыть новую тему     Написать ответ в эту тему

koreets2011



Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Добрый день!
Скажу честно, весь ajax код  тупо скопипастен с просторов Интернета, отсюда собственно и проблема...
Так вот о проблеме, найденный код показывает анимацию во время загрузки страницы, все прекрасно работает по следующему принципу (если я все правильно понял):

Код:
 
<ul id=\"nav\">
   <li><a href=\"test.php\">Тест</a></li>
</ul>
<div id=\"wrapper\">
   <div id=\"content\">  
    ...Контент
   </di>
</di>
 

Значит что происходит, при нажатии на ссылку в div content загружается содержимое файла test.php выпилив от туда предварительно старое, причем с анимацией и показом собственно div на котором анимация. Все чудесно до того момента пока ссылка не окажется внутри div content.  
 
Прикрутил все в рабочее состояние и выложил test.taxi-69.ru
посмотрите пожалуйста, что можно сделать чтобы скрипт работал даже если ссылка внутри div content.
Файл отвечающий за эту кухню loader.js

Всего записей: 410 | Зарегистр. 13-10-2011 | Отправлено: 20:08 27-06-2013
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
koreets2011
почитайте внимательно правила о том, как следует называть темы

Цитата:
Все чудесно до того момента пока ссылка не окажется внутри div content.

где именно по ссылке это происходит?

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 20:50 27-06-2013
koreets2011



Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Cheery извиняюсь...
Я может выразился не правильно, если ссылка находится в блоках  

Код:
 
<div id=\"wrapper\">  
<div id=\"content\">  
<a href=\"index.php\">Home</a>
</di>  
</di>  
 

То обновляется все целиком, а не между  

Код:
 
<div id=\"wrapper\">  
<div id=\"content\">  
...Контент  
</di>  
</di>
 

Как предполагалось изначально.

Всего записей: 410 | Зарегистр. 13-10-2011 | Отправлено: 21:21 27-06-2013
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
koreets2011

Цитата:
Я может выразился не правильно, если ссылка находится в блоках  

ну и? вы переписываете и саму ссылку при обновлении блока
в чем проблема то?
 
ps: опишите словами или укажите куда кликать дальше по ссылке, чтобы воспроизвести проблему.

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 21:22 27-06-2013 | Исправлено: Cheery, 21:59 27-06-2013
koreets2011



Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Cheery
Да конечно, и так:
1) На сайте test.taxi-69.ru имеется панель навигации с 2 рабочими ссылками "Главная" и "Автомобили". Все они, как и сама панель навигации находятся вне блоков  

Код:
 
<div id=\"wrapper\">  
<div id=\"content\">  
 

Кликая по ним видно как обновляется содержимое внутри вышеупомянутых блоках.
2) Если кликнуть ссылку на панели навигации "Автомобили", а затем на вновь воспроизведенном контенте нажать ссылку красного цвета "Нажми меня", то как предполагалось произойдет обновление контента в вышеупомянутых блоках, однако перерисовывается вся страница целиком.
 
Основываясь на этом наблюдение, я сделал вывод, что всему виной это нахождение данной ссылки как раз внутри этих блоков.
Вот код подключаемого скрипта:

Код:
 
$(document).ready(function() {
    
    var hash = window.location.hash.substr(1);
    var href = $('#nav li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-4)){
            var toLoad = hash+'.html #content';
            $('#content').load(toLoad)
        }
    });
 
    $('#nav li a').click(function(){
 
        var toLoad = $(this).attr('href')+' #content';
        $('#content').hide(600,loadContent);
        $('#load').remove();
        $('#wrapper').append('<div id="load"><img class="image" src="img/ajax-loader.gif" width="100" height="100" alt="Loading..." border="0"></div>');
        $('#load').fadeIn(700);
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);
        function loadContent() {
            $('#content').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            $('#content').show(700,hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut(700);
        }
        return false;
    });
});
 

 
P.S: Естественно ссылка в блоке с ID nav.
Посмотрите пожалуйста...

Всего записей: 410 | Зарегистр. 13-10-2011 | Отправлено: 23:41 27-06-2013 | Исправлено: koreets2011, 23:42 27-06-2013
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
koreets2011

Цитата:
контента в вышеупомянутых блоках, однако перерисовывается вся страница целиком.  

потому что для вновь загруженного контента нет обработчка нажатия на ссылку.
1) если хотите использовать javascript обработчики в подгруженном контенте, то их надо цеплять после загрузки контента или же использовать функцию .on у jquery
2) ваш код работает только со ссылками внутри навигационной панели, о чем и говорит

Цитата:
$('#nav li a')



----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 23:48 27-06-2013
Zver13



Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
У вновь загружаемого контента не установлены обработчики событий. Используйте .delegate()
 
http://api.jquery.com/delegate/
т.е $('#nav li').delegate("a", "click" ,function(){  
с учетом того что (#nav li) не перезагружаются
 
Sory! delegate оказывается устарела с версии 1.7 и заменена на on. Давно не пользовался JQuery.

Всего записей: 1 | Зарегистр. 02-09-2011 | Отправлено: 06:30 28-06-2013 | Исправлено: Zver13, 06:42 28-06-2013
koreets2011



Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Zver13
Спасибо!!!

Код:
 
$("div").delegate("a", "click" ,function(){
 

Все ссылки в Div обрабатываются как надо!

Всего записей: 410 | Зарегистр. 13-10-2011 | Отправлено: 23:07 30-06-2013 | Исправлено: koreets2011, 23:13 30-06-2013
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
koreets2011
delegate уже устарело. нужно обновлять jquery и использовать, как и писал, .on функцию.
 

Цитата:
Подскажите как убрать анимацию, а сделать просто плавное исчезновение и появление контента.

.fadeIn
.fadeOut

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 23:09 30-06-2013
koreets2011



Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Cheery Спасибо за  
.fadeIn  
.fadeOut
 
а  jquery не могу обновить, может позже... Просто придется пару скриптов модернизировать...
 
А так не есть гуд использовать  

Код:
 
$("div").delegate("a", "click" ,function(){  
 

 
iframe в fancybox перестает отображаться.

Всего записей: 410 | Зарегистр. 13-10-2011 | Отправлено: 23:37 30-06-2013
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
koreets2011

Цитата:
iframe в fancybox перестает отображаться.

скорее вы что то не так делаете

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 01:26 01-07-2013
koreets2011



Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Еще вопрос касательно этого скрипта, возможно ли его доработать. Проблема в следующем
при переходе по ссылкам например "http://test.taxi-69.ru/rental_cars/rental_cars.php" скрипт формирует вот это "http://test.taxi-69.ru/#rental_cars/rental_cars".
А вот если забить "http://test.taxi-69.ru/#rental_cars/rental_cars" в адресную строку браузера, то выдает главную страницу.
Или же придется писать все на php, что-то типа $_SERVER['REQUEST_URI'] и substr ?

Всего записей: 410 | Зарегистр. 13-10-2011 | Отправлено: 21:25 02-07-2013
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
koreets2011

Цитата:
Или же придется писать все на php, что-то типа $_SERVER['REQUEST_URI'] и substr ?

берете после загрузки с помощью javascript то, что идет после # и подгружаете с помощью ajax

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 21:28 02-07-2013
koreets2011



Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Ну то есть  

Код:
 
<script type="text/javascript">
var inurl = window.location.hash.substr(1);
var outurl = inurl + '.php';
if (outurl!='.php')
  {
  window.location=outurl;
  }
</script>
 

Не пойму как передать её обработке ajax ?

Всего записей: 410 | Зарегистр. 13-10-2011 | Отправлено: 23:13 02-07-2013
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
koreets2011

Цитата:
Не пойму как передать её обработке ajax ?

через ajax отсылаете кусок серверу, а тот уже решает, что выдавать по нему.


----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 23:14 02-07-2013
koreets2011



Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Cheery
Как?

Всего записей: 410 | Зарегистр. 13-10-2011 | Отправлено: 23:44 02-07-2013
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
koreets2011

Цитата:
Как?

что как??  
вы же использовали ajax возможности..
берете rental_cars/rental_cars, добавляете .php в конце, делаете запрос к серверу, ответ вставляете куда хотели

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 00:06 03-07-2013
koreets2011



Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Cheery
Спасибо догнал, теперь вот какая проблема.

Код:
 
<script type="text/javascript">
var inurl = window.location.hash.substr(1);
var outurl = inurl + '.php';
if (outurl!='.php' || outurl!='index.php')
{
 $.ajax({
    url: outurl,
    cache: false,
    success: function(html){
    $("#content").html(html);
    }
});
}
</script>
 

Почему то, оператор или не работает. То есть если в строке ".php" то $.ajax не выполняется, а если "index.php", то выполняется хотя не должен.
 
Добавлено:
Не пойму я этот JS

Код:
 
<script type="text/javascript">
var inurl = window.location.hash.substr(1);
var outurl = inurl + '.php';
if (outurl!='index.php')
{
 $.ajax({
    url: outurl,
    cache: false,
    success: function(php){
    $("#content").html(php);
    }
});
}
</script>
 

 
Вот так, что надо... Странно.
 
 
Добавлено:

Код:
 
RewriteRule ^rental_cars/rental_cars.php #rental_cars/rental_cars [NC,L,NE]
 

Я так понимаю такое правило невозможно, как можно выйти из ситуации?

Всего записей: 410 | Зарегистр. 13-10-2011 | Отправлено: 00:31 03-07-2013
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
koreets2011

Цитата:
Я так понимаю такое правило невозможно, как можно выйти из ситуации?

зачем вам такое правило, что вы мудрите??

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 02:07 03-07-2013
koreets2011



Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Cheery ну вот смотрите, есть файл rental_cars.php лежит в папке rental_cars.
Если к нему обратиться на прямую, то не загрузится header.php и footer.php, нужно как то запретить обращаться к ним напрямую, но это плохо для ботов...
Вот я и подумал делать перенаправление из .htaccess в ajax

Код:
 
RewriteEngine on
RewriteRule ^rental_cars/rental_cars.php /#rental_cars/rental_cars [R,NE]
 

и в header.php

Код:
 
<script type="text/javascript">
var inurl = window.location.hash.substr(1);
var outurl = inurl + '.php';
if (outurl!='index.php')
{
 $.ajax({
    url: outurl,
    cache: false,
    success: function(php){
    $("#content").html(php);
    }
});
}
</script>
 

 
Но все зацикливается.

Всего записей: 410 | Зарегистр. 13-10-2011 | Отправлено: 02:18 03-07-2013
Открыть новую тему     Написать ответ в эту тему

Страницы: 1 2

Компьютерный форум Ru.Board » Интернет » Web-программирование » mmm...Ajax!


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru