Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.78/18: Рейтинг темы: голосов - 18, средняя оценка - 4.78
0 / 0 / 0
Регистрация: 19.10.2015
Сообщений: 23

Асинхронный сайт (переключение разделов без перезагрузки страницы)

26.02.2016, 15:38. Показов 3559. Ответов 11
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Всем привет.
Нужна помощь в доработке скрипта позволяющего передвигаться по сайту без перезагрузки страницы.
Скрипт взял отсюда http://e-proger.ru/moduli-dlya... klama.html
AJax почти не знаю, по этому до ума довести не смог!
Поставил сие чудо здесь http://aricosmo.ru/
В чём проблема: скрипт не запоминает ссылку на которую переходишь и грузит её ещё раз.
И хотелось бы подробней узнать, как можно применить тут window.history для смены url'a страницы при переходе в другой раздел.

Добавлено через 13 часов 35 минут
Кто нибудь поможет?

Добавлено через 24 минуты
Есть кто?
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
26.02.2016, 15:38
Ответы с готовыми решениями:

Загрузка данных из другой страницы без перезагрузки основной страницы
Не знаю в правильной ли ветке я задаю вопрос. Ответьте пожалуйста как сделать чтобы при нажатии, например, на определённую кнопку...

Динамическая подмена контента страницы по клику на ссылку, без перезагрузки всей страницы
Здравствуйте! Честно говоря точно не знал какими средствами можно реализовать, то что мне нужно, но думаю что скорее всего это jQuery. ...

Подмена контента страницы по клику на ссылку меню, без перезагрузки всей страницы
Доброго времени суток! у меня имеется два блока, один блок - меню иерархическое аккордеон на jquery, во втором блоке должен появляться...

11
 Аватар для Lazy_Den
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
26.02.2016, 15:45
Цитата Сообщение от AriCosmo Посмотреть сообщение
В чём проблема
Проблема ваша сформулирована так, что желания отвечать, мало у кого возникает.
Цитата Сообщение от AriCosmo Посмотреть сообщение
И хотелось бы подробней узнать, как можно применить тут window.history
Почитать, что такое History API. Использовать jQuery-плагин History API
0
Эксперт .NET
 Аватар для Rius
13092 / 7651 / 1672
Регистрация: 25.05.2015
Сообщений: 23,314
Записей в блоге: 14
26.02.2016, 15:46
У мозиллы пример рассмотрите: Ajax navigation example
Задача не такая тривиальная, как могло показаться...
0
0 / 0 / 0
Регистрация: 19.10.2015
Сообщений: 23
26.02.2016, 16:09  [ТС]
Все привет!
надеюсь, что найдутся специалист которые смогут помочь мне!
В общем нашёл я такой скрипт:
Пишем в header.php до </head>
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<script type="text/javascript" src="/jquery.js" charset="windows-1251"></script>
<script type="text/javascript" charset="windows-1251">
 
var AjaxContent = function(){
var container_div = '';
var content_div = '';
return {
getContent : function(url){
    $(container_div).animate({opacity:0}, //Прозрачность на 0
        function(){ // загружает контент с помощью ajax
        $('#gif_loader').show(); //показываем лоадер
        $(container_div).load(url+" "+content_div, //загружает только выбранную часть
        function(){
            $(container_div).animate({opacity:1}); //возвращает прозрачность обратно на  1
            $('#gif_loader').hide();  //скрываем лоадер при загрузке
            }
        );
    });
},
ajaxify_links: function(elements){
    $(elements).click(function(){
        AjaxContent.getContent(this.href);
        return false; //предотвращает нажатие на ссылку
    });
},
init: function(params){ //задает первоначальные настройки
    container_div = params.containerDiv;
    content_div = params.contentDiv;
    return this; //выводит объект
    }
    }
}();
 
</script>
<script type="text/javascript" charset="windows-1251">
    $(function(){
        AjaxContent.init({containerDiv:"#ajax-wrap",contentDiv:"#text"}).ajaxify_links("#ajaxgo a");
    });
    </script>
следом пишем стиль
CSS
1
2
3
4
5
6
7
8
<style type="text/css">
#gif_loader {
   position: fixed;
   top: 50%;
   left: 50%;
   background-color: #fff;
}
</style>
добавляем лоадер после <body>
PHP
1
2
3
4
5
6
7
<div id="gif_loader" style="display:none;" align="center" >
<fieldset>
<font size='1' color="black">
Пожалуйста,подождите!</font><br/>
<img src="/loader.gif" alt="Loading" />
</fieldset>
</div>
В самый конец header.php пишем:
PHP
1
2
<div id="ajax-wrap">
<div id="text">
В footer.php закрываем
PHP
1
2
</div>
</div>
Качаем файл jquery.js >ТЫК<

СИЕ ЧУДО у меня работает >ТЫК<, но оно нуждается в доработке.
Которую я сделать не в состояние из за недостаточных знаний!

Что необходимо сделать -
1-е сделать чтобы скрипт смог запоминать страницы,
то есть как бы человек находится в разделе НОВОСТИ, при повторном запроси этой страницы,
скрипт проверяет, если человек на ней, то не грузит её.
2-е смена url'а при помощи history api в html5, тоже не понимаю как это сделать!

Ребята, кто понимает - выручайте!
0
 Аватар для Lazy_Den
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
26.02.2016, 18:32
AriCosmo, по поводу первого - где-нибудь вначале функции AjaxContent, например, после var content_div = '';, допишите var currentURL;. Сделайте изменения в методе ajaxify_links:
JavaScript
1
2
3
4
5
6
7
8
9
ajaxify_links: function(elements) {
    $(elements).click(function() {
      var url = this.href;
      if (url === currentURL) return false;
      currentURL = url;
      AjaxContent.getContent(url);
      return false;
    });
}
Кроме того, на вашей странице несколько псевдоссылок с одинаковым id "ajaxgo", чего быть не должно, поэтому измените его на класс.
По поводу второго, я давал вам ссылку на плагин в предыдущей теме. Там всё описано на русском.
0
0 / 0 / 0
Регистрация: 19.10.2015
Сообщений: 23
26.02.2016, 18:51  [ТС]
Lazy_Den, ого! Первая проблема решена, не могли бы вы немного пояснить, что делает код?
0
 Аватар для Lazy_Den
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
26.02.2016, 19:14
Цитата Сообщение от AriCosmo Посмотреть сообщение
пояснить, что делает код?
Там объяснять, собственно, нечего. В переменную currentURL записывается текущий url и сравнивается с url при следующем клике на ссылку. Если они идентичны, то останавливаем дальнейшее выполнение сценария.
0
0 / 0 / 0
Регистрация: 19.10.2015
Сообщений: 23
26.02.2016, 19:34  [ТС]
Lazy_Den, так примерно и понял!
Со второй проблемой тоже почти разобрался благодаря материалам, что вы дали.
Но появилась третья проблема -
При выполнение submit в скрипте php обновляется целиком страница.
Нашёл способ решения в котором можно создать файл в корне сайта,
при запросе на него будут отправляться данные и возвращать ответ, при этом
страница не будет обновляться.
Вопрос- можно сделать, чтобы при выполнение скрипта обновлялся только блок?
0
 Аватар для alexsamos33
669 / 640 / 335
Регистрация: 26.04.2014
Сообщений: 2,122
27.02.2016, 10:30
Цитата Сообщение от AriCosmo Посмотреть сообщение
При выполнение submit в скрипте php обновляется целиком страница.
Есть же событие onsubmit...

JavaScript
1
2
3
4
5
6
7
8
9
10
$("form").submit(function() {
    $.ajax({
        "type":$(this).attr("method"),
        "url":$(this).attr("action"),
        "success":function(data){
            $("#your_block").html(data);
        }
    });
    return false; // отмена перезагрузки страницы
});
0
0 / 0 / 0
Регистрация: 19.10.2015
Сообщений: 23
27.02.2016, 14:28  [ТС]
alexsamos33, можете объяснить, что оно делает?
0
 Аватар для alexsamos33
669 / 640 / 335
Регистрация: 26.04.2014
Сообщений: 2,122
27.02.2016, 18:33
Цитата Сообщение от AriCosmo Посмотреть сообщение
alexsamos33, можете объяснить, что оно делает?
Формы отправляет через ajax.
0
0 / 0 / 0
Регистрация: 19.10.2015
Сообщений: 23
27.02.2016, 21:12  [ТС]
alexsamos33, не получается воспользоваться кодом, можете более подробно объяснить?
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
27.02.2016, 21:12
Помогаю со студенческими работами здесь

Изменение содержания страницы без перезагрузки страницы
Всем привет, подскажите как сделать изменение содержания страницы без перезагрузки страницы?

Страницы без перезагрузки!
Здравствуйте!Кратко напишу в чем нужна ваша помощь: Есть сайт и на нем есть страницы,где после нажатия кнопки происходит собитие и...

Страницы без перезагрузки!
Всем привет :) Вообщем нужна помощь, хочу сделать несколько страниц без перезагрузки страницы (Думаю понятно) Как тут:...

Загрузка без перезагрузки страницы
Всем доброе время суток!!! Есть вопрос как можно на JavaScript написать так чтобы при вводе в форму и по нажатию на кнопку какой-то текст...

Изменение без перезагрузки страницы
Вообще есть таблица вида У каждого значка есть два положения. Например я работают на 10 странице и щелкаю на переключатель, после...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
12
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве
8Observer8 02.02.2026
Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf
8Observer8 01.02.2026
Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm
8Observer8 30.01.2026
Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru