Доброго времени суток. На этот раз еще немножечко про JavaScript. Появилась необходимость обновлять содержимое блока по нажатию на кнопку, без перезагрузки страницы, чтобы не свести пользователя с ума. Благодаря этой небольшой заметке можно раз и навсегда запомнить, как такое реализовать.
Обновлять можно не только , но и ,
Прежде всего, нам нужен блочный элемент. Пусть это будет , создадим его на странице и присвоим ему уникальный идентификатор, по которому его узнает jQuery.
Hello World
Важно понимать, что идентификатор должен быть уникальным на всей странице, поэтому вызовом $(‘#block’) мы получим первый элемент на странице с таким id. Если нужно изменить содержимое нескольких элементов, стоит использовать классы.
Hello World
|
Hello World |
Hello World
Пусть в качестве кнопки выступает обычная ссылка , с заглушкой href=# . В обычных условиях, заглушка вернет пользователя на верх веб-страницы. На ссылку повесим событие onclick , в котором вызовем js функцию setNewEntry() , которая, например, получит новое содержимое для нашего блочного элемента.
Button 1
Button 2
Button 3
Clear block
return false; после вызова нужен для того, чтобы отменить переход по url из href , в нашем случае мы не вернемся вверх страницы, а останемся на месте.
Теперь рассмотрим саму функцию на JS, менять содержимое блока будем с помощью метода .html() . Если использовать его без аргументов, то он вернет нам текущее содержимое блока, если передать ему один аргумент, например строку, то он заменить содержимое блока на нее. В более приближенных к реальности случаях, методу передается функция, которая отрабатывает для блока и возвращает ему новое содержимое. Но пока мы ограничимся передачей строки.
function setNewEntry(entry) { //#block - найти элемент по индентификатору //.block - найти по имени класса $("#block").html(entry); }
Вот как будет выглядеть код веб-странички.
js .html demo
Hello World
Button 1
Button 2
Button 3
Clear block
function setNewEntry(entry) { //#block - найти элемент по индентификатору //.block - найти по имени класса $("#block").html(entry); } Пример передачи функции в метод.html()
Я придумал совсем простенькую функцию, которая будет накапливать нашу историю нажатий на кнопки, и очищать ее, когда мы захотим. Для демонстрации вполне достаточно.
function setNewEntry(entry) { $("#block").html(getNewEntry($("#block").html(), entry)); } function getNewEntry(oldHTML, newHTML) { if(newHTML == "") return newHTML; else return oldHTML + newHTML; }
ЗаключениеНу вот и все, если разобраться, то ничего сложного, но с помощью этого метода можно вершить «великие дела» и создавать динамические веб-страницы на любой вкус. Спасибо за внимание!
Допустим, у меня есть страница index.html с навигационным меню, и у меня есть еще 15 других html-страниц с тем же меню.
Возможно ли, если html / css / js обновит ОДИН файл (скажем, файл index.html), и все обновления применяются во всех 15 документах?
Я знаю вас может сделать это с PHP, но на странице, которую я запускаю, не используется индексный файл PHP, поэтому я ищу другой способ.
Возможно, есть какой-то другой способ добиться этого? Возможно, угловой JS? Любые предложения или ссылки, которые вы можете предложить прочитать / узнать, как это сделать?
Попробуйте следующее:
document.getElementById("sideBar").innerHTML="";
Можете ли вы использовать JQuery? : D
Пример Page 1:
$(document).ready(function() { $("#sideBar").load("side_content.html"); });
Да - это возможно и требование для любого типа нетривиального размера сайта.
Общий способ делать такие вещи без слишком сложного заключается в этом. В ваших файлах HTML вы включаете некоторые шаблоны. Эти шаблоны контролируют общий внешний вид вашего сайта. Все ваши HTML-файлы содержат те же шаблоны. Если вы хотите что-то другое на определенной странице, вы переопределяете свои шаблоны в этом конкретном html-файле.
В результате он выглядит следующим образом:
my content in here.
В вашем style.css и вашем custom.js вы можете пойти в городскую настройку. Вы можете добавить больше таблиц стилей и больше скриптов javascript по мере необходимости. Большинство сайтов имеют больше стиля и javascript, чем контент.
Моим любимым сайтом, чтобы узнать об этих технологиях, является Mozilla Developer Network , но есть и множество других больших ресурсов.
Синхронизация вкладок доступна через localStorage и StorageEvent . Больше информации вы можете найти на MDN
После обновления nav вы вызываете localStorage.setItem(someKey, someValue) , а с window.addEventListener("storage", this.handleStorageEvent) обрабатываете изменение localStorage на других вкладках. Tab, на котором было запущено событие, не будет распространять изменение localStorage .
Надеюсь, что мой ответ помог: 3
вы можете сделать это с помощью XML http request ... вам просто нужно определить весь заголовок навигации, меню в одном файле и обратиться к одному div на всех страницах...
function includeHTML() { var z, i, elmnt, file, xhttp; /*loop through a collection of all HTML elements:*/ z = document.getElementsByTagName("*"); for (i = 0; i < z.length; i++) { elmnt = z[i]; /*search for elements with a certain atrribute:*/ file = elmnt.getAttribute("include-html"); if (file) { /*make an HTTP request using the attribute value as the file name:*/ xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4) { if (this.status == 200) {elmnt.innerHTML = this.responseText;} if (this.status == 404) {elmnt.innerHTML = "Page not found.";} /*remove the attribute, and call this function once more:*/ elmnt.removeAttribute("include-html"); includeHTML(); } } xhttp.open("GET", file, true); xhttp.send(); /*exit the function:*/ return; } } }; includeHTML();
AJAX и jQuery. Динамическое обновление контента. Основы (изменения от 03.01.2012)В данной статье речь пойдет о том, что же такое AJAX и jQuery и будут рассмотрены примеры, как их использовать.
AJAX - инструмент для построения веб-приложений, обменивающихся данными с сервером в фоновом режиме. При этом пользователь получает приложение с динамическим обновлением контента, без перезагрузки всей страницы.
jQuery - JavaScript-framework, библиотека, позволяющая более удобно использовать некоторые возможность Javascript, такие как: создание визуальных эффектов, обработка событий, работа с DOM и поддержка AJAX.
Скачать последнюю версию jQuery и подробно ознакомиться со всеми возможностями можно на сайте разработчика: http://www.jquery.com/
В данной статье мы будем рассматривать только одну функцию библиотеки jQuery, а именно функцию $.ajax(). Эта функция позволяет нам как передавать данные на сервер, так и получать ответы от сервера и все это в фоновом режиме, без перезагрузки страницы. Настройка приема или передачи данных зависит от параметров, с которыми вызывается функция $.ajax(). Основные из них будут рассмотрены ниже. Подробнее о параметрах можно прочесть в руководстве по jQuery.
Перейдем к рассмотрению примеров.
Важно!
Для того, чтобы примеры работали корректно, необходимо:
1. Все файлы должны быть записаны в кодировке UTF-8.
2. Скрипты должны выполняться на веб-сервере, а не запускаться в браузере, как файл.
Создадим простенькую программу, отображающую текущее время, обновляемое раз в секунду по таймеру. Особенностью данной программы будет получение информации о текущем времени из другого внешнего файла.
Содержимое файла index.html.
function show() { $.ajax({ url: "time.php", cache: false, success: function(html){ $("#content").html(html); } }); } $(document).ready(function(){ show(); setInterval("show()",1000); });
В коде имеются несколько особенностей, поясним их.
1. Подключение библиотеки jQuery происходит в заголовке HTML файла, для этого записана данная строка.
Сам файл jquery.js - находится в той же папке, что и файлы примера.
2. В теле документа создается контейнер, в который мы будем загружать контент.
3. Странная, на первый взгляд, функция $(document).ready() требуется для корректной работы jQuery, к тому же в ней мы можем выполнить все приготовления к работе программы. В нашем случае мы вызываем функцию show(), в которой прописан механизм получения контента из другого файла, и настраиваем таймер, так, чтобы функция show() вызывалась один раз в секунду.
$(document).ready(function(){ show(); setInterval("show()",1000); });
4. Функция show() состоит из обращения к функции $.ajax() с определенным рядом параметров, которая позволяет нам в фоновом режиме получить информацию из внешнего файла на сервере.
$.ajax({ url: "time.php", cache: false, success: function(html){ $("#content").html(html); } });
Рассмотрим используемые параметры функции $.ajax().
Url: "time.php"
Обращается к файлу time.php для получения контента.
cache: false
Результаты запросов не кэшируются.
success: function(html){
$("#content").html(html);
}
При успешном выполнении запроса, управление переходит функции, которая получает контент в качестве параметра и записывает его контейнер. Запись в контейнер происходит вот в этой строке:
$("#content").html(html);
Содержимое файла time.php.
Смысл работы файла time.php - выводим текущее время на экран.
Скачать исходные файлы примера (16,6 кб):
Программа, динамически загружающая контент, по выбору пользователя.
Содержимое файла index.html.
Какую страницу желаете открыть?
$(document).ready(function(){ $("#btn1").click(function(){ $.ajax({ url: "page1.html", cache: false, success: function(html){ $("#content").html(html); } }); }); $("#btn2").click(function(){ $.ajax({ url: "page2.html", cache: false, success: function(html){ $("#content").html(html); } }); }); });В теле документа создана форма, имеющая две кнопки, посредством которых пользователь осуществляет выбор желаемого контента. И контейнер для загрузки контента.
Событие нажатия на кнопку "Страница 1" обрабатывается функцией $("#btn1").click(), а событие нажатия на кнопку "Страница 2" обрабатывается функцией $("#btn2").click().
Содержимое файлов page1.html и page2.html, которые загружаются в область контента динамически, представляет собой простые HTML-страницы или текстовые файлы с контентом.
Скачать исходные файлы примера (18,4 кб):
Рассмотрим пример, отправляющий введенное имя пользователя на сервер. Сервер при получении имени выдает приветствие и подсчитывает количество символов в введенном имени.
Содержимое файла index.html.
Введите имя:
$(document).ready(function(){
$("#myForm").submit(function(){
$.ajax({
type: "POST",
url: "greetings.php",
data: "username="+$("#username").val(),
success: function(html){
$("#content").html(html);
}
});
return false;
});
});
В теле документа создана форма для ввода имени пользователя. И контейнер для загрузки динамического контента.
Заметим, что сама форма не имеет привычных полей action и method. В качестве обработчика события нажатия на кнопку "Отправить", выступает функция $("#myForm").submit(). Рассмотрим эту функцию.
$("#myForm").submit(function(){ $.ajax({ type: "POST", url: "greetings.php", data: "username="+$("#username").val(), success: function(html){ $("#content").html(html); } }); return false; });
Как мы видим, основная работа опять связана с функцией $.ajax(). В этот раз появляются дополнительные параметры, не рассмотренные в примерах 1 и 2. А именно:
Type: "POST"
Тип передачи данных.
data: "username="+$("#username").val()
Параметры, передаваемые серверу. В данном случае мы передаем содержимое поля username - имя пользователя. В общем случае, параметры записываются также, как в методе GET, одной строкой, например:
data: "username=Vasya&age=18&sex=male"
Обратим внимание, что в конце написана строка:
Return false; Это сделано для того, чтобы форма не пыталась передать данные файлу, из которого она запускается и не происходило перезагрузки страницы.
Содержимое файла greetings.php.
Выводим на экран приветствие и подсчитываем количество символов в имени.
Скачать исходные файлы примера (16,8 кб):
Стоит сказать в заключении, что кроме очевидных плюсов создания страниц с использованием динамического обновляющегося контента, есть ряд недостатков, которые следует учитывать при разработке сайта, а именно:
1. На страницах с динамическим обновлением контента, кнопка "Назад" в браузере не работает корректно.
2. Страницы с динамическим обновлением контента не меняют URL, в зависимости от своего содержимого, поэтому не могут быть добавлены в закладки.
3. Страницы с динамическим обновлением контента не индексируются поисковыми системами, т.к. они не выполняют команды JavaScript.
От приведенных недостатов можно избавиться программным путем. В данной статье такие способы не рассматриваются.