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

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

26.02.2016, 15:38. Показов 3605. Ответов 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
13205 / 7733 / 1681
Регистрация: 25.05.2015
Сообщений: 23,567
Записей в блоге: 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
Ответ Создать тему
Новые блоги и статьи
Знаешь почему 90% людей редко бывают счастливыми?
kumehtar 14.04.2026
Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.
Фиксация колонок в отчете СКД
Maks 14.04.2026
Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .
Настройки VS Code
Loafer 13.04.2026
{ "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .
Оптимизация кода на разграничение прав доступа к элементам формы
Maks 13.04.2026
Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений
Maks 12.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .
Архитектура слоя интернета для сервера-слоя.
Hrethgir 11.04.2026
В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .
Подстановка значения реквизита справочника в табличную часть документа
Maks 10.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .
Очистка реквизитов документа при копировании
Maks 09.04.2026
Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru