Динамическая подгрузка контента Ajax
Сегодня мы разберем как с помощью ajax-jQuery сделать подгрузку контента по нажатию на ссылку. Предположим, что нам необходимо получить контент по ссылке и загрузить его в контейнер.
Для начала создадим ссылку и контейнер куда у нас все будет загружаться.
<a href="#" id="getContent">Загрузить контент</a> <div id="divContent"></div>
Ссылкее и контейнеру необходимо присвоить id, в данном случае ссылка имеет id="getContent", а контейнер id="divContent".
Ниже, пишем следующий скрипт.
$(document).ready(function(){
$('#getContent').click(function(){
$.ajax({
url: "/content.php",
cache: false,
beforeSend: function() {
$('#divContent').html('Получаем контент');
},
success: function(html){
$("#divContent").html(html);
}
});
return false;
});
});
Теперь разберем наш код, при нажатии на ссылку происходит ajax-запрос, к файлу content.php. Мы также указываем, что кэширование файла запрещено. До отправки (событие beforeSend), в контейнере появляется надпись - "Получаем контент", когда запрос завершен (события success) в контейнер помещается содержимое файла content.php.
return false; мы указываем для того, чтобы при клике мы не переходили по ссылке, в данном случае по # (чтобы не было прыжка страницы).
Вот так просто получить контент с помощью jQuery.
(20 votes, average: 4,35 из 5)
Loading ...
Loading ...
135 Комментариев на «Динамическая подгрузка контента Ajax»
почему то кодировка меняется и другие скрипты не работают которые находятся на страницы которая загружается в контент
Ответить
Используйте только UTF-8, а файлы должны быть кодированы как UTF-8 без BOM. Воможно у Вас где-то используется windows-1251, поэтому так происходит. Или пробуйте поиграться c header или iconv
Ответить
Здравствуйте!
Ваш код работает, спасибо!
Но у меня один вопрос, как можно реализовать подгрузку контента без нажатия на ссылку.
То есть, загружается основная страница а после, что бы не держать загрузку происходит подкачка данных в заданный див.
Собственно это необходимо для данного каталога
Спасибо!
Ответить
Очень просто, нужно поместить сам код загрузки ($.ajax) непосредственно в конструкцию $(document).ready(function(){, которая срабатывает только когда документ полностью загружен.
Т.е. из того кода что в примере, нужно убрать обработчик клика.
$(‘#getContent’).click(function(){
return false;
});
После чего код можно поместить в функцию и вызывать через нее.
Ответить
Спасибо!
Но что-то не получается у меня.
Вам не сложно готовый код написать в комментарии.
Вообще, вопрос Вы занимаетесь платной доработкой, разработкой , я думаю не больших скриптов?
В частности сейчас требуется реализовать такую динамическую подгрузку результата работы парсера.
Это один PHP скрипт, которому будет так же передаваться значение переменной , допустим через GET.
Дальше идет обработка и результат, как в Вашем примере подгружается динамически уже после загрузки основной страницы.
Ответить
Занимаюсь, но давайте попробуем так решить Вашу проблему.
Вот код.
// Подключаете jQuery
$(document).ready(function(){
$.ajax({
url: ‘/your-script.php?parametr=1′,
cache: false,
beforeSend: function() {
$(«#getContent»).html(‘Подождите, загружается контент’);
},
success: function(html){
$(«#getContent»).html(html);
}
});
});
Должно работать 100%.
Ответить
Скрипт побился чутка. Вот по ссылке он же
Ответить
Вот так получается весь код выглядит?
В див «getContent» у меня ничего не подгружается.
// Подключаете jQuery
$(document).ready(function(){
$.ajax({
url: ‘/wp-content/themes/katalog/parscat/parscat.php?parametr=1′,
cache: false,
beforeSend: function() {
$(«#getContent»).html(‘Подождите, загружается контент’);
},
success: function(html){
$(«#getContent»).html(html);
}
});
});
Ответить
Все, спасибо!
Скопировал отсюда
Все работает!
Вопрос, как теперь назначить на «Подождите, загружается контент» индикатор загрузки, гиф анимацию.
И возможно ли выполнение 5-ти таких дивов одновременно на странице в один поток?
Ответить
Сделал рабочий пример. Смотрите исходный код примера
http://makecode.ru/samples/ajaxload/
Ответить
Можно хоть 10 дивов.
Индикатор загрузки вставить просто.
Конструкция вида .html
$(«#getContent»).html(‘Подождите, загружается контент’)
Означает что можно вставлять HTML код. Следовательно делайте![]()
и все. Хоть что угодно.
Ответить
Код рабочий, спасибо!
Уже проверил на сайте.
Если не сложно ответьте:
Как теперь назначить на «Подождите, загружается контент» индикатор загрузки, гиф анимацию.
И возможно ли выполнение 5-ти таких дивов одновременно на странице в один поток.
Возможно дивы придется пронумеровать getContent1, getContent2
Ответить
Понял, спасибо!
Попробую
Загрузка будет в дивы как бы одновременная или поочередно?
Все дивы будут иметь id=getContent?
Ответить
ID дивов должны быть уникальные. Следовательно код придется дублировать. Поэтому лучше вынести его в функцию, и передавать два параметра — ID контейнера и URL.
Загрузка начнется сразу, но загружаться будет быстрее тот, кто быстрее скачает контент.
Ответить
Если у Вас есть время, Вы не смогли бы написать такую функцию?
С меня на пиво.
Суть работы: есть каталог, допустим вот так
Со страницы передаем 10 url в каждом диве и соответсвенно подгружаем результат в соответсвующий для url див.
Надеюсь, Вы меня поняли.
Результат — это проверка наличия сайта в популярных каталогах.
Собственно, скрипт parscat.php тот , которому мы отдаем текущий url из дива проверяемого сайта.
Спасибо!
Ответить
Дивы могу динамически нумеровать для уникальности ,допустим getContent1, getContent2 …
Также динамически будет изменятся url
/wp-content/themes/katalog/parscat/parscat.php?parametr= «Переменная»
Сайты выводятся в цикле.
То есть нужна функция для обработки этих изменяемых дивов
Ответить
Сделал Вам функцию, пример по той же ссылке. Но рекомендую Вам ознакомится с основами яваскрипта, это позволит в будущем избежать ошибок.
Функцию можете вызывать сколько угодно раз. Только указывайте URL и ID контейнера.
Ответить
Спасибо!
Только по какой ссылке?
http://makecode.ru/samples/ajaxload/
Здесь старый код.
Ответить
http://makecode.ru/samples/ajaxload/
Новый. Смотрите внимательнее.
Ответить
Да, код новый, извеняюсь.
Странно, скопировал код с исходника один в один у меня не работает.
Ладно, спасибо, не буду Вас отвлекать, попробую сам разобратся.
Напишите номер кошелька.
Ответить
Эмм.. не работает потому наверное, что кроссдоменные запросы запрещены. Вам придется грузить локально куски кода.
Или может ошибка в синтаксисе. Но тут все работает. Установите firebug — это чудо вещь, все скажет.
Денег не надо, можете в качестве благодарности подписаться на RSS или рассказать друзьям о проекте.
Обращайтесь.
Ответить
Спасибо!
Думаю, теперь разберусь сам.
Друзьям расскажу и опубликую Ваш сайт в каталоге.
Ответить
Добрый день!
Подскажите пожалуйста, у меня такая ситуация: контейнер находится на одной php-странице, а все ссылки, при нажатии на которые контейнер должен заполняться соответствующей информацией, прописаны на другой php-странице. Куда именно мне необходимо прописать приведенный Вами код?
Ответить
Юлия, не совсем понятен вопрос. Если у Вас из этих двух файлов .php собирается сайт, например один файл это навигация, а другой контент, то вставляйте куда угодно. В итоге они все равно будут на странице. Javascript рекомендую убрать в отдельный файл конечно.
Ответить
Система сайта такова: есть основное меню, но в одном из пунктов основного меню появляется вспомогательное меню. Необходимо, чтобы при переключении по пунктам вспомогательного меню, основное меню и соответственно оформление страницы оставалось прежним.
Да, каждая страница собирается из отдельных файлов .php, грубо говоря, top и bottom — контентная часть. А вспомогательное меню прописывается в файле .php соответствующего пункта основного меню.
И вот я все никак не могу понять. Если я вставляю код в файл bottom после контейнера, то разве там обработается событие нажатия на ссылку. По крайней мере у меня обновляется все равно целая страница.
Ответить
Обработается. Если обновляется целая страница, то возможно где-то ошибка в javascript или не подключен jQuery.
Ответить
Спасибо большое, разобралась.
Появился еще вопрос: а можно ли помещать в контейнер содержимое не отдельного файла, а функции, которая прописана в том же файле, что и данный скрипт?
Ответить
Юлия, всмысле поместить функции вызывающие содержимое контейнера в сам контейнер? Нет, они тогда не смогут выполнится.
Ответить
Ну то есть положить в контейнер результаты выполнения функции. То есть в url вместо отдельного файла как-то указать функцию. Возможно ли это?
Ответить
makecode Ответил:
Апрель 7th, 2011 at 13:49
Вы имеете ввиду чтобы поместить этот код в функцию, а потом вызывать ее?
Если да, то смотрите исходный код
http://makecode.ru/samples/ajaxload/
Если нет, то уточните вопрос.
Ответить
у меня есть файл index.php, в котором содержится:
function menu() {…}
В файле script_ajax.js находится приведенный Вами скрипт. Вопрос в том, как в строке url: «/content.php» вместо файла content.php вызывать мою функцию menu() из файла index.php?
Ответить
makecode Ответил:
Апрель 7th, 2011 at 15:10
В файле content.php
include «index.php»;
menu();
Ответить
Так файла content.php нету у меня. Это в примере так было. У меня только два файла: index.php и script_ajax.js.
Вся проблема в том, чтобы в файле js в одной строчке при вводе url достучаться до функции из файла php.
Ответить
makecode Ответил:
Апрель 7th, 2011 at 15:41
Мне кажется вы что-то усложнили:)
Функцию PHP через javascript не вызвать. Можно сделать так.
Сделайте для index.php параметр, например $_GET["menu"] таким образом, чтобы если это параметр указан то вызывается только функция menu.
Я так понимаю функция menu() у вас выводит меню.
Следовательно, запрашивая index.php?menu вы получаете только меню.
Потом, в самом javascript вызывая index.php?menu вы будете получать само меню.
Расскажите что конкретно вы хотите реализовать, возможно это можно сделать еще проще.
Ответить
Да, я уже сама чувствую, что что-то намудрила)
Есть меню и под ним соответственно контент. При нажатии на соответствующий пункт меню, меняется и контент. Это я сделала. Но мне еще нужно, чтобы при этом же и меню изменялось (т.е. нажатый пункт становился неактивным, а все остальные были ссылками). Изменение меню происходит функцией menu(), которая в файле index.php.
Вот это изменение меню я также прописала, как и контент, в javascript’е. Отсюда и сложность с вызовом функции)
Ответить
makecode Ответил:
Апрель 7th, 2011 at 18:18
Написал демо-скрипт, в нем происходит изменение пунктов (активен/неактивен) с помощью javascript. Думаю поможет вам решить проблему
http://makecode.ru/samples/menu
Ответить
Спасибо. Буду разбираться)
Ответить
здравствуйте. у меня проблема такая. у меня есть скрипт, advice.php который рандомно подгружает контент из текстового файла. его код такой —
я хочу чтобы он был реализован с помощью ajax и поэтому добавил на сайт ваш код + путь к моему скрипту. получилось вот так —
не могли бы вы подсказать почему он не работает?
Ответить
Скрипт написан правильно, проверьте работает ли сам advice.php. И jQuery Вы надеюсь подключили?
Ответить
Заработало, спасибо! Вот только при первой загрузке страницы контейнер пустой, а хотелось бы чтобы он был заполнен содержимым content.php. не подскажете как это реализовать?
Ответить
makecode Ответил:
Апрель 11th, 2011 at 07:49
Скрипт нужно поместить в функцию, а функцию вызывать непосредственно после загрузки документа (событие .ready()).
Вот в примере как раз это и реализовано:
http://makecode.ru/samples/ajaxload/ (см. исходный код)
Ответить
Можите подсказать что нужно добавить чтоб после того как контент подгрузился он плавно появлялся
Ответить
makecode Ответил:
Апрель 15th, 2011 at 10:29
Скрыть, потом медленно появить
Ответить
Появился вопрос: при изменении контента в контейнере (в моем случае при переходе по ссылкам в меню), если нажать F5, то загрузится опять исходный контент (первый пункт меню). Это можно как-то исправить? Чтобы просто обновлялся текущий контент?
Ответить
makecode Ответил:
Апрель 20th, 2011 at 10:22
Ставьте хэши к ссылкам (значок #), т.е. при клике допустим на Контактную информацию ссылку будет такая: сайт.ру/#contacts
Потом хэш можно поймать через функцию location.hash и грузить то что надо.
Ответить
Доброго времени суток.
У меня есть меню, в которой ссылки имеют вид — page.php?параметр=значение. Т.е. я не знаю, по какой именно ссылке кликнет пользователь. На странице-цели идет подгрузка текста из БД.
Вопросы:
1. Как передать эту ссылку в скрипт
2. Будет ли в таком случае он работать.
Просто в JS я пока еще слабо шарю, хоть и стараюсь его учить.
Заранее спасибо.
Ответить
makecode Ответил:
Апрель 28th, 2011 at 09:27
Да, это возможно. Принцип такой. В каждую свою ссылку добавьте id=»параметр» и один и тот же класс.
Потом, с помощью jQuery отслеживайте клик по ссылке с этим классом. В конце ставьте return false; чтобы не было перехода по ссылке указанной в href.
Потом ловите id это ссылки, $(this).attr(‘id’);
И уже получите параметр, а потом по нему грузите то, что нужно.
Вот, есть пример, думаю он Вам поможет
http://makecode.ru/samples/menu/
Ответить
Добрый День!
Не подскажете, подгружаю страницу через Ajax, как сделать, чтобы она подгружала только то что мне надо а не полностью с шапкой и подвалом и тому подобным?
К примеру надо чтобы он вытащил только форму для заплонения…
С уважением Михаил!
Ответить
makecode Ответил:
Май 30th, 2011 at 23:10
Здравствуйте, я делаю так:
1) Страница с ключами, типа таких
?get=header
?get=footer
?get=menu
?get=content
Если что-то надо подгрузить, то просто вызываю этот URL.
2) Создаю отдельные функции. Функции вызова профиля, меню и т.д. и т.п. Потом создаю файл, например profile.php. В этом файле вызываю функцию profile(), так и гружу.
Т.е. в вашем случае форму лучше перенести в отдельный файл или вызывать функцией в том же файле.
Грузить страницу и потом выдерать кусок я не советую. Скажется на производительности, времени загрузки и т.д.
Ответить
Ответил:
Май 31st, 2011 at 07:39
Добрый День! А готового примерчика у вас часом не завалялось, а то все равно не могу разобраться :(
Я работаю на Битрикс в основном с API
Обычно все делаю на php, но не очень силен в этом, подскажите на примере пожалуйста
С уважением Михаил!
Ответить
makecode Ответил:
Май 31st, 2011 at 10:43
Мой готовый пример Вам не поможет, у меня самописная CMS, а Битрикс я не знаю.
Это Вам нужно на форуме Битрикса скорее всего спросить, как можно вызывать только определенную часть сайта.
Ответить
Хорошо!Спасибо за совет!
Ответить
Добрый День!Я к вам уже обращался, подскажите пожалуйста, если вы знакомы с JavaScript.
Как сделать чтобы при нажатии на ссылку выходило всплывающее окошко с надписью, но выполняться это скрипт должен только 1, то есть 1 раз появилось окошко и на этой странице уже не происходит выполнение скриптов.
Весь инет перерыл, ничего не нашел.
Вывод у меня есть окошка вот пример:
function display_alert()
{
alert(«Сохраните данные»);
}
ссылка
Подскажите пожалуйста!
С уважением Михаил!
Ответить
script type=»text/javascript»
function display_alert()
{
alert(«Сохраните данные»);
}
/script
a href=»" onclick=»display_alert();return false;»
Ответить
makecode Ответил:
Июнь 2nd, 2011 at 11:59
Вам просто нужно реализовать подобие триггера.
Ответить
Ответил:
Июнь 2nd, 2011 at 12:09
Спасибо большое за помощь!
Ответить
Добрый День!
Такой вопрос у меня на сайте есть Web-форма в ней есть поле с checkbox, значений много у него, и поэтому выводиться результат в столбик, мне бы хотелось разбить как-нибудь массив,чтобы к примеру он выводил в первом столбике 10 значений рядом снова 10
Весь вывод этих чекбоксов зашит в этот код, посмотрите, подскажите!
$arQuestion)
{
?>
<span class="error-fld" title="»>
<?=$arQuestion["IS_INPUT_CAPTION_IMAGE"] == "Y" ? "».$arQuestion["IMAGE"]["HTML_CODE"] : «»?>
Ответить
код не пишется, вот ссылка на него
[url]www.uchmet.ru/tmp/profile/cod.txt[/url]
Ответить
makecode Ответил:
Июнь 7th, 2011 at 14:41
Михаил, Ваш вопрос не соответствует теме топика. Ваш вопрос лучше задать на форуме по PHP.
Но раз спросили, то можно сделать так:
Строка таблицы строится тэгом td, а колонка tr
Значит когда пролистываете свой массив инкрементируйте переменную до 10, потом сбрасывайте и вставляйте tr, таким образом через каждые 10 значений будет столбец.
$i++;
if ($i==10) {
$i = 0;
echo «
}
Ответить
Хорошо, спасибо большое!
Ответить
Здраствуйте, при подгрузки формы не работает скрипт валидации формы, знакомый говорит что вроде есть флаг который разрешает выполнение js полученого от скрипта.
Ответить
makecode Ответил:
Июль 13th, 2011 at 16:34
Ммм, подозреваю что надо делать так. Скрипт грузить сразу а инициализацию делать уже после загрузки формы.
Ответить
Здравствуйте. Помогите, что то никак не могу реализовать следующее.
Имеется в меню форма выбора(вообще в parent-меню будет много форм выбора):
При выборе одного из пунктов либо при определенной комбинации из несколбких пунктов paren-menu подгрузится еще child-меню с чекбоксами и еще с формами выбора.
Как можно подключать эти child-menu html блоки без перезагрузки. Как можно реализовать выбор определенных child menu.
Большое Спасибо!
Ответить
Добрый день! Не особо сильна в аяксе, решила попробовать ваш пример, все работает, но не могу решить следующую задачу.
Предположим мы вытаскиваем записи на страницу, каждая строка есть ссылка, я хотела бы чтобы при нажатии на эту ссылку (одну определенную) шел запрос и показывал записи для этого параметра, при еще одном клике закрывался.
Вопрос в том, как написать такой аякс запрос, помня что у меня массив данных на входе.
Ответить
makecode Ответил:
Июль 13th, 2011 at 16:28
Делаете так:
Каждый такой заголовок-ссылка пусть будет в блоке, а ниже его или в нем будет дополнительный div.
Ссылке назначаете класс и id. Класс одинаковый, id разный. Отслеживаете клик по классу — выдираете id.
У дополнительного div тоже должен быть id совпадающий с родителем, но с префиксом, например child_25.
Собственно запрос когда выполнится — ответ отдаете в этот дополнительный div.
Потом просто по клику хайдите его и все.
Ответить
Julia Ответил:
Июль 14th, 2011 at 11:20
Спасибо большое ) так и сделала , все работает
Ответить
Julia Ответил:
Июль 14th, 2011 at 11:24
Кстати, спасибо за статьи, редко встретишь уроки, которые написаны доступным языком без всяких премудростей и воды :)
Интересно было бы почитать от вас статью о вот таком скрипте особенно первый вариант, когда идет автозаполнение и потом в контейнер помещается автоматически информация.
Ответить
makecode Ответил:
Июль 17th, 2011 at 10:28
Да, даже знаю где есть еще лучше скрипт выполняющий эту же задачу. Можно думаю написать будет.
Ответить
Здраствуйте, ищу решение одной проблемы. Мне надо загружать аяксом в контейнер из контейнера другой страницы. Есть такой код:
$(«#area»).load(«something.html #content»);
или такой
$(«#area»).load(«something.html #area»);
Суть в том, что я не понимаю как его правильно запустить или интегрировать в Ваш пример, чтобы он заработал. Помогите пожалуйста!
Ответить
makecode Ответил:
Сентябрь 22nd, 2011 at 16:58
Вы это тут подсмотрели?
Вам нужно прочитать разницу между .load и .ajax
Вот хорошая вводная статья
Ответить
А получилось ведь:)
буквально вначале на
взял этот код:
$(document).ready(function(){ $(«#loadhtml»).click(function(){
$(«#feeds»).load(«ajax/base.php», function(data){
$(this).text(data);
}).show(«slow»);
});
});
и крутил его до тех пор, пока строчка
$(«#feeds»).load(«pages/demo.html #areaa»);
не начала работать
В итоге получили это:
$(document).ready(function(){ $(«#loadhtml»).click(function(){
$(«#feeds»).load(«pages/demo.html #areaa»);
});
});
А это мне и надо, чтобы я мог беспрепятственно загружать информацию с контейнеров с одинаковым id на одной странице.
Осталось только научить запоминать при перезагрузке страницы информацию, чтобы не нажимать ссылку еще раз, вот этот момент я вобще пока не представляю как реализовать;)
Ответить
Здравствуйте!
Я уже измучился искать нужный мне код. Возможно вы сможете мне помочь…
Мне нужно всего 2 вещи:
1. Есть дивы на странице, которые должны обновляться без перезагрузки через заданный интервал времени, а также по команде скрипта, то есть есть скрипт, который должен запускать функцию обновления этих дивов.
2. Также информация в эти дивы должна подгружаться через пункты меню, якобы навигация без перезагрузки там шапки, футера и т.д.
Но один момент, который я нигде какраз и не могу найти, в дивах информация должна обновляться та которая есть, то есть никаких файлов туда подгружаться не должно… просто сам див обновляется и всё… А вот когда через меню, тогда в див может подгружаться из файла информация, но потом она должна опять таки обновляться автоматом и скриптом по вызову функции.
Пожалуйста, помогите, если можете. перелопатил кучу сайтов, но везде только файл подгружается… ((((
Ответить
makecode Ответил:
Октябрь 7th, 2011 at 14:09
Проблема заключается в том, что Вы пытаетесь найти, а не попробовать написать код. И уверяю, если не поменяете тактику, то проблемы так и останутся.
Ответить
Marat Ответил:
Октябрь 7th, 2011 at 15:38
Спасибо, конечно за ответ, но я рассчитывал на реальную практическую помощь.
Мне просто легче на базе готового примера подогнать код под свои нужды, но в моём случаи все коды на подгрузку файлов, а у меня задача другая и те коды адаптировать не удаётся …
Ну и наконец, если бы я умел написать код, то уверяю Вас, к Вам бы я за помощью не обращался!
Извините, что побеспокоил.
Ответить
makecode Ответил:
Октябрь 7th, 2011 at 16:16
Если бы Вы попробовали написать что-нибудь, и у Вас не получилось бы. А вопрос стоял такой: Как сделать обновление дивов через интервал, то и помощь была бы другая.
А Вы просите написать за Вас кусок работающего сайта.
Какой вопрос, такой и ответ.
Примеры нужно не подгонять. Примеры созданы для того, чтобы в них разбираться.
Ответить
Спасибо за пример. Но у меня проблемка. Допустим есть две кнопки. Каждая подгружает контент из файла, который содержит различные ява скрипты со слайдшоу. При загрузке страницы целиком первое слайдшоу работает. А вот при подгрузке второго не работает, и потом первое тоже не работает. Такое ощущение будто скрипты внутри подгружаемого контента игнорируются, и выдается только статический контент. Как решить проблему со скриптами в подгружаемом контенте?
Ответить
makecode Ответил:
Ноябрь 8th, 2011 at 11:36
Попробуйте подгружать скрипты заранее, а тянуть только контент.
Ответить
Константин Ответил:
Ноябрь 8th, 2011 at 17:22
В этом случае скрипты не будут выполняться. Всё дело в технологии, она не запускает скрипты на лету. Попробовал Fullajax, но теперь скрипт который грузит HTML контент со скриптами конфликтует со скриптами внутри контента и решения не нашлось. Придется либо переделывать контент, либо отказаться от динамической подргрузки.
Ответить
Подскажите, мастера, как мне реализовать следующее действие: чтобы при нажатии на эту же ссылку (Загрузить контент) текст закрывался?
Ответить
makecode Ответил:
Декабрь 11th, 2011 at 14:18
Сделал Вам пример
Ответить
dmitrydeco Ответил:
Декабрь 11th, 2011 at 16:06
Спасибо за оперативно быстрый ответ! Видимо я не точно написал то, что хотел у Вас спросить.
Вот по исходному коду необходимо это реализовать. Я сделал следующее:
Получилось вот какая ситуация:
при нажатии на Показать контент — показывает его, при нажатии скрыть — естественно скрывает. Но при повторном открытии — не открывает. Мне необходимо, чтобы именно была подгрузка контента, по умолчанию не открывался, а только при нажатии, и чтобы после просмотра можно было его закрыть. Прошу меня простить, я не специалист в js)
Ответить
makecode Ответил:
Декабрь 11th, 2011 at 22:03
У Вас там не хватает div)
А вообще раз при нажатии на кнопку «Скрыть» контент скрывается hide(), то при нажатии на кнопку «Загрузить» делайте контейнеру .show() и он будет показываться.
Ответить
dmitrydeco Ответил:
Декабрь 11th, 2011 at 22:47
А можете изменить мой код?) я не понимаю Вас))
Ответить
makecode Ответил:
Декабрь 11th, 2011 at 22:57
Ответить
dmitrydeco Ответил:
Декабрь 12th, 2011 at 00:53
Спасибо большое за оперативные ответы! Очень признателен за помощь.
Ответить
Здравствуйте
у меня вопрос про форму и ajax+Jq
форма посылается на php скрипт и сравнивается на имя,
если имя true после ajax ответа форма удаляется
методом remove(); ,
но если сделать рефреш страницы форма опять появляется ,
как можно этого избежать?
дня три бьюсь и нечего не помогает!! S.O.S
Ответить
Ответил:
Декабрь 18th, 2011 at 09:08
вот что то получилось но выгладит не очень кашерно
function get_cookie ( cookie_name )
{
var results = document.cookie.match ( ‘(^|;) ?’ + cookie_name + ‘=([^;]*)(;|$)’ );
if ( results )
return ( unescape ( results[2] ) );
else
return null;
}
var c= document.cookie;
var name=get_cookie(‘name’);
$(document).ready(function(){
$(‘form’).submit(function(){
$.post(‘serv.php’, $(this).serialize(),function(data,s){
var c= document.cookie;
var name=get_cookie(‘name’);
if(data==’ok’){
$(‘form’).remove();
$(‘#res’).html(name);
}else{
$(‘#res’).html(‘no enter’);
}
});
return false;
});
if(c.length>0){
$(‘#res’).html(name);
$(‘form’).remove();
}
});
Ответить
Ладно фраера разобрался без вас !!!
Ответить
Уважаемые , как можно данный код прикрутить к WP , чтоб контент страницы динамически подргружался? Где, что стоит подправить?
Ответить
makecode Ответил:
Декабрь 29th, 2011 at 15:24
Думаю стоит поискать плагины к WP типа ajaxpage или ajaxload не помню как называются но точно помню чо были такие.
Ответить
Ответил:
Декабрь 29th, 2011 at 15:52
Искал и находил… Находил причем много разных… Про то что Вы говорите, называется Ajax Page Loader . Помимо данного плагина есть и другие, но почему то они не работают на новых WP . Специально выключал все плагины ,ставил стандартные тему .. Увы…
Во всех найденных данного характера плагинов не осуществляется переход на страницу. Даже если вручную вписать адрес, то загружается сначала вбитый адрес и сразу переходит на главную.. Даже удалил .htaccess всё равно не работают…
Поэтому предположил, что это можно сделать добавив Ваш код в тему WP
Ответить
Добрый день! Второй день бьюсь над задачей, и вот наконец-то с Вашей помощью почти решила её:)
Мне нужно было, чтобы в форму select подгружался скрипт php, вытаскивающий из БД соответствующие значения. Но… загвоздка в том, что данные подгружаются в виде всего одной строки (а надо в виде списка, да ещё чтобы у каждого элемента был разный value).
Исходный файл:
Сюда подгружается скрипт
Что подгружается:
echo mysql_result($result, $j, ‘district’);
А надо:
echo ‘ —————— ’. mysql_result($result, $j, ‘district’).»; //(т.е. чтобы option был здесь, а не на исходной странице)
Если id присваиваю select — ничего не работает…
Буду очень благодарна за подсказку:)
Ответить
$(document).ready(function() {
$(‘.item’).click(function(){
$(this).removeClass(‘active’);
$(this).addClass(‘active’);
$(‘#content’).load($(this));
});
});
На главную
О нас
Продукция
Контакты
Хотел сделать, чтобы при клике,страницы грузились в это же окно,а они грузятся только в новом окне.
Что я не так сделал?
Ответить
$(document).ready(function() {
$(‘.item’).click(function(){
$(this).removeClass(‘active’);
$(this).addClass(‘active’);
$(‘#content’).load($(this));
});
});
/*
На главную
О нас
Продукция
Контакты
*/
Страницы грузятся только в новом окне.
Что я не так сделал?
Ответить
Пожалуйста подскажите мне с решением проблемы!
Я делаю подкачку с помощью вашего скрипта, но у меня ссылка такого вида
То есть при нажатии у меня исчезает один див (так задумано), и при нажатии опять появляется, это что-то вроде переключения между режимами.
Так вот когда добавляю id=»getContent», то что отвечает за загрузку данных в div, ничего не работает. И наоборот. Как мне сделать чтобы одновременно они могли работать?
вот функция даун
function down()
{
var obj=document.getElementById(‘mode’);
if(obj.style.display==’block’)
obj.style.display=’none’;
else
obj.style.display=’block’;
}
Ответить
Видимо из за тега «a» мой предыдущий коммент весь поехал. Решил уточнить проблему.
function down5()
{
var obj=document.getElementById(‘mode’);
if(obj.style.display==’block’)
obj.style.display=’none’;
else
obj.style.display=’block’;
}
$(document).ready(function(){
$(‘#getContent’).click(function(){
$.ajax({
url: «load.php»,
cache: false,
beforeSend: function() {
$(‘#divContent’).html(‘Подождите немного’);
},
success: function(html){
$(«#divContent»).html(html);
}
});
return false;
});
});
У меня в ссылке следующее: href=»javascript: down5();» id=»getContent».
То есть при нажатии у меня прячется один div и подгружается контент в другой. Но вместе они не хотят работать! При повторном нажатии должен появляется обратно 1-ый div и спрятаться (можно просто дисплей none, его же уже никуда не денешь) второй. Как мне их совместить, подскажите пожалуйста.
Ответить
Что никто тут не знает как мне помочь?
Ответить
makecode Ответил:
Январь 30th, 2012 at 12:44
На чистом jQuery Ваша функция была бы короче. Для кода используйте
Опишите саму задачу. Я так понял у Вас при нажать на ссылку «Показать/Спрятать», в первом случае подгружается контент, а во втором — див прячется?
Ответить
Антон Ответил:
Январь 30th, 2012 at 20:04
Да, возможно проще, я не силен в языках этих.
Моя ситуация. Есть ссылка «Показать». Есть сайт, где основной контент заключен в Контент. Я сделал так, чтобы при нажатии этот div исчезал, при повторном нажатии он опять появлялся. Тут все просто, я использовал код:
function down5()
{
var obj=document.getElementById(‘mode’);
if(obj.style.display==’block’)
obj.style.display=’none’;
else
obj.style.display=’block’;
Теперь моя проблема. К ссылке «Показать» я решил добавить вам код динамической подгрузки контента. Идея такая, мой первый Контент прячется (вверху я это реализовал) и подгружается новый отдельный. Именно отдельный потому что там такая задумка с дизайном.
И когда я сделал так Почитать еще… У меня почему то все это не заработало вместе.
Прошу помочь!
Ответить
Хотел сделать, чтобы при клике,страницы грузились в это же окно,а они грузятся только в новом окне.
Что я не так сделал?
Ответить
makecode Ответил:
Январь 30th, 2012 at 21:41
Ммм, вот ловите, поправил. Ошибок несколько.
Ответить
извиняюсь, сразу не увидел. Разместил там всю свою проблему.
Ответить
makecode Ответил:
Январь 30th, 2012 at 21:48
Краткая версия того что Вы хотите
Ответить
Антон Ответил:
Январь 31st, 2012 at 01:17
Спасибо большое! Идею вы поняли правильно.
Я добавил подгрузку контента как хотел, но что-то видимо неправильно. При повторном нажатии туда сюда, видимо подгрузка опять срабатывает и блок появляется с миганием чтоли, что-то вроде того. Можно как-то сделать чтобы он при повторном нажатии второй раз не грузился?
Ответить
makecode Ответил:
Январь 31st, 2012 at 01:35
Если Вы поняли как работает trigger (тригер) то будет просто.
Создайте переменную, например isLoaded по умолчанию присвойте false.
Когда контент загрузится (функция success) присваивайте isLoaded = true.
Таким образом Вы будете знать что контент вероятно загружен. А при непосредственной загрузкой проверяйте чему равен isLoaded, если false, то грузите.
Ответить
Антон Ответил:
Январь 31st, 2012 at 19:54
Попытался реализовать сам. Проверьте пожалуйста.
Ответить
makecode Ответил:
Февраль 1st, 2012 at 12:14
success это функция, она же у Вас выше. Сравнивать isLoaded надо по двойному знаку равно (см. операторы javaScript).
Ответить
Антон Ответил:
Февраль 1st, 2012 at 17:24
Спасибо большое! Работает все отлично.
Теперь сижу разбираюсь с toggle, хотя точно не уверен она ли нужна для того чтобы сделать смену текста той ссылки, которая прячет и показывает контент.
Хочу чтобы «Показать» менялось на «Обратно». нужно делать я так понял в этом же коде, иначе не будет работать правильно появление блоков див. Можете подсказать решение? Я пока даже не представляю себе как это сделать, потому как у меня текст между тегами ссылки, как добавить такое событие..?
Ответить
makecode Ответил:
Февраль 1st, 2012 at 18:01
Ответить
Антон Ответил:
Февраль 1st, 2012 at 18:04
А чтобы он обратно поменялся? Чтобы всегда чередовался.
Ответить
makecode Ответил:
Февраль 1st, 2012 at 18:08
Ответить
Антон Ответил:
Февраль 1st, 2012 at 18:49
Я себе всю голову сломал уже. У вас все работает по той ссылке. Ставлю себе
Ничего не работает, уже и версии jguery обновил, не могу понять из-за чего…
Антон Ответил:
Февраль 1st, 2012 at 18:05
И как быть если у меня в ссылке уже есть id=getcontent? указать так id=»getcontent link» как с классами?
Ответить
Антон Ответил:
Февраль 1st, 2012 at 21:59
Спасибо вам на помощь! Проблему удалось решить самому, путем перестановки кода js в конец страницы, почему так не знаю, но заработало! :)
Ответить
Спасибо за предыдущий ответ.
Все работает,но не везде.
В фаерфоксе,эксплорее,сафари — все нормально,а в опере,хроме — не грузятся страницы.Если жмешь на кнопку — ничего не происходит.Не грузит именно другие страницы в основную.
Как починить?
Ответить
UPD.
Уже разобрался.Надо было в настройках оперы,поставить галку для
AllowFileXMLHttpRequest.
В хроме — хз,так и не работает.
Интересно,если у всех по умолчанию галки нет,значит у большинства людей не будет работать?
Ответить
Помогите пожалуйста, перелопатил кучу сайтов,и нигде нет конкретного ответа как реализовать, уже замучился: Использовал метод описанный тут .
Только в моем случае подгружаю страницу с лайтбоксом, и после того как подгрузил, лайтбокс не работает.
И так пробовал Ссылка та же песня.
Ответить
makecode Ответил:
Февраль 12th, 2012 at 13:31
Думаю что проблема в этом:
http://makecode.ru/2010/09/jquery-and-loading-dom-elements/
Ответить
Подскажите по моему вопросу,который я задавал выше.
Без включения в опере AllowFileXMLHttpRequest, этот код не работает. Страницы не открываются,не то что в том же окне,а вообще не реагируют на клик по ссылке.В хроме тоже не работает.В файерфокс и эксплорере все работает.
Если убрать ваш код,который подгружает контент в ту же страницу,то страницы окрываются,только уже конечно в новом окне а не в том же.
Что делать?
Ответить
makecode Ответил:
Февраль 13th, 2012 at 21:10
Все должно работать, поставьте FireBug или в Опере есть драгонфлай. Вероятно у Вас неверные URL на эти страницы, попробуйте отключить яваскрипт и проверить работают ли вообще ссылки.
Учтите что в яваскрипте кроссдоменные запросы запрещены и вы не сможете подгрузить.
Я подправил код на файлы того же джейсифиддла, все прекрасно работает и в Опере тоже.
Ответить
Как я уже писал,без вашего ява скрипта,все ссылки работают как и должны.Но только в новом окне,собственно как и должно быть).
Сам не понимаю.
В опере все заработало,как только включил AllowFileXMLHttpRequest.
А хром вот что пишет
XMLHttpRequest cannot load
Origin null is not allowed by Access-Control-Allow-Origin.
Погуглил про эту проблему.
Похоже это потому,что я работаю с сайтом локально,не через сервер.
Через сервер говорят должно работать.
Ну тогда ок.
Ответить
makecode Ответил:
Февраль 13th, 2012 at 22:34
Интересная проблема. Возьму на заметку.
Ответить
Добрый вечер )
У меня сcылка вида :
мне нужно чтобы произошла подгрузка на url
Делал как в примере , просто пустой экран выводит ((
Помогите пжл, заранее спасибо!
Ответить
makecode Ответил:
Февраль 15th, 2012 at 21:44
Покажите код на jsfiddle.net, а то не понятно.
Ответить
promax Ответил:
Февраль 15th, 2012 at 21:55
ну все как в примере , я хочу прикруть к dle
Ответить
makecode Ответил:
Февраль 15th, 2012 at 22:01
Ну по идее должна происходить подгрузка в контейнер #content, сам jQuery подключили?
Ответить
Да подключил , нажимаю на ссылку , и через секунды 2 белый экран (
Ответить
makecode Ответил:
Февраль 15th, 2012 at 22:08
Попробуйте тогда подгрузить какой-нибудь статический файл, или другой раздел. Возможно проблема в самом разделе. Может конфликт какой.
Ответить
Здравствуйте! У меня такой вопрос, у меня есть три файла которые я хотела бы подключить к index.php в виде трех ссылок и при нажатии на 1ю подгрузилася контент в div как и надо, но при нажатии на 2ю ссылку, первой контент исчезал и появлялся контент второй ссылки? Пыталася сделать так как в самом начале говорится, однако получается только что все открывается и и не исчезает :( Помогите пожалуйста, а то я вообще в Ajax не разбираюсь :(
Ответить
makecode Ответил:
Март 21st, 2012 at 16:27
Ответить
Инна Ответил:
Март 21st, 2012 at 18:45
Я Очень ВАМ Благодарна за помощь!!! (:
Как хорошо, что есть такие люди!
СПАСИБО!
Ответить
Подскажите пожалуйста.
Я использовал немного другой способ, но думаю у вас та же проблема как видно в самом первом посте.
Подгружая контент подгружается только html а все что в » <? " не подгружает. Просто у меня фрома регистрации и когда человек неправильно вписывет данные то выводится инклюд файл php.
Как сделать так что б подгружало контент полностью как страницу php(Не игнорируя ничего.)? Мб знаете библиотеку какую?Желательно с демо.
Очень благодарен!
Ответить
makecode Ответил:
Апрель 9th, 2012 at 16:31
Подгружайте файл .php и все.
Вероятно у Вас код в .html файле, Вы его грузите вот и невыполняется.
Ответить
День добрый, видел у тут у вас вопрос похожий на мой, но не нашел на него ответ…
Подгружаю на страницу аяксом таблицу которую генерит php:
$(document).ready(function() {
$.ajax({
url: «mkr8.php»,
cache: false,
dataType: «html»,
success: function(aaa){
$(«#tables»).html(aaa);
}
});
});
всё подгружается, но при этом все остальные скрипты находящиеся на странице (втом числе которые находятся в этом же $(document).ready) , не работают для подгруженного контентента.. Заранее благодарен.
Ответить
makecode Ответил:
Апрель 20th, 2012 at 00:02
Вам необходимо скрипты грузить заранее. А к подгруженным элементам обращаться через .live
Ответить