Сьогодні ми розберемо як за допомогою ajax-jQuery зробити підвантаження контенту після натискання на посилання. Припустимо, що нам необхідно отримати контент по посиланню і завантажити його в контейнер.
Для початку створимо посилання і контейнер куди у нас все буде завантажуватися.
Нижче, пишемо наступний скрипт.
Тепер розберемо наш код, при натисканні на посилання відбувається ajax-запит, до файлу content.php. Ми також вказуємо, що кешування файлу заборонено. До відправки (подія beforeSend), в контейнері з'являється напис - "Отримуємо контент", коли запит завершено (події success) в контейнер поміщається вміст файлу content.php.
return false; ми вказуємо для того, щоб при кліці ми не переходили за посиланням, в даному випадку по # (щоб не було стрибка сторінки).
Ось так просто отримати контент за допомогою jQuery.
(Visited 10 395 times, 1 visits today)
Можливо вас зацікавить:
Чи не той що я очікував. Наведену конструкцію для N div блоків N-раз копіпаст? Наведіть приклад для N блоків з різними і різними url: '/your-script.php?parametr=1'?
А саме: чи потрібен єдиний JS (ваш але доопрацьований) який при «зустрічі» конструкції виду
...
Буде приховувати і відображати контент з /your-script.php?parametr=N
Чи не той що я очікував. Наведену конструкцію для N div блоків N-раз копіпаст? Наведіть приклад для N блоків з різними і різними url: '/your-script.php?parametr=1'?
А саме: чи потрібен єдиний JS (ваш але доопрацьований) який при «зустрічі» конструкції виду div id = "getContentA» a href = "/ your-script.php? Parametr = A» / a / div div id = "getContentB» a href = "/ your-script.php? parametr = B» / a / div
...
div id = "getContentN» a href = "/ your-script.php? parametr = N» / a / div
Буде приховувати A / a і відображати контент з /your-script.php?parametr=N
і крутив його до тих пір, поки рядок
$ ( «# Feeds»). Load ( «pages / demo.html #areaa»);
не почала працювати
В результаті отримали це:
А це мені і треба, щоб я міг безперешкодно завантажувати інформацію з контейнерів з однаковим id на одній сторінці.
Залишилося тільки навчити запам'ятовувати при перезавантаженні сторінки інформацію, щоб не натискати посилання ще раз, ось цей момент я вобще поки не уявляю як реалізувати;)
Вітаю!
Я вже змучився шукати потрібний мені код. Можливо ви зможете мені допомогти ...
Мені потрібно всього 2 речі:
1. Є діви на сторінці, які повинні оновлюватися без перезавантаження через заданий інтервал часу, а також по команді скрипта, тобто є скрипт, який повинен запускати функцію поновлення цих Дивов.
2. Також інформація в ці діви повинна довантажуватися через пункти меню, нібито навігація без перезавантаження там шапки, футера і т.д.
Але один момент, який я ніде какраз і не можу знайти, в дівах інформація повинна оновлюватися та яка є, тобто ніяких файлів туди довантажуватися не повинно ... просто сам див оновлюється і все ... А ось коли через меню, тоді в див може довантажуватися з файлу інформація, але потім вона повинна знову таки оновлюватися автоматом і скриптом за викликом функції.
Будь ласка, допоможіть, якщо можете. перелопатив купу сайтів, але скрізь тільки файл завантажується ... ((((
Проблема полягає в тому, що Ви намагаєтеся знайти, а не спробувати написати код. І запевняю, якщо не поміняєте тактику, то проблеми так і залишаться.
Спасибі, звичайно за відповідь, але я розраховував на реальну практичну допомогу.
Мені просто легше на базі готового прикладу підігнати код під свої потреби, але в моєму випадки все коди на подгрузку файлів, а у мене завдання інше і ті коди адаптувати не вдається ...
Ну і нарешті, якби я вмів написати код, то запевняю Вас, до Вас би я по медичну допомогу не звертався!
Вибачте, що потурбував.
Якби Ви спробували написати що-небудь, і у Вас не вийшло б. А питання стояло таким: Як зробити оновлення Дивов через інтервал, то і допомога була б інша.
А Ви просите написати за Вас шматок працюючого сайту.
Яке питання, така і відповідь.
Приклади потрібно не підганяти. Приклади створені для того, щоб в них розбиратися.
Дякую за приклад. Але у мене проблемка. Припустимо є дві кнопки. Кожна підвантажує контент з файлу, який містить різні ява скрипти зі слайдшоу. При завантаженні сторінки цілком першу слайдшоу працює. А ось при підвантаження другого не працює, і після першого теж не працює. Таке відчуття ніби скрипти всередині довантажувати контенту ігноруються, і видається тільки статичний контент. Як вирішити проблему зі скриптами в довантажувати контенті?
Тому припустив, що це можна зробити додавши Ваш код в тему WP
Добридень! Другий день б'юся над завданням, і ось нарешті з Вашою допомогою майже вирішила її :)
Мені потрібно було, щоб в форму select довантажувати скрипт php, що витягає з БД відповідні значення. Але ... заковика в тому, що дані завантажуються у вигляді всього одного рядка (а треба у вигляді списку, та ще щоб у кожного елемента був різний value).
Вихідний файл:
Сюди подгружается скрипт
Що подгружается:
echo mysql_result ($ result, $ j, 'district');
А треба:
echo '------ nbsp'. mysql_result ($ result, $ j, 'district'). »; //(т.е. щоб option був тут, а не на вихідній сторінці)
Якщо id привласнюю select - нічого не працює ...
Буду дуже вдячна за підказку :)
$ ( '. 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';
>
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;
>);
>);
Тобто при натисканні у мене ховається один div і подгружается контент в інший. Але разом вони не хочуть працювати! При повторному натисканні повинен з'являється назад 1-ий div і сховатися (можна просто дисплей none, його ж уже нікуди не дінеш) другий. Як мені їх поєднати, підкажіть будь ласка.
Підкажіть по моєму питанню, яке я ставив вище.
Якщо прибрати ваш код, який завантажує контент в ту ж сторінку, то сторінки окривают, тільки вже звичайно в новому вікні а не в тому ж.
Все повинно працювати, поставте FireBug або в Опері є драгонфлай. Ймовірно у Вас невірні URL на ці сторінки, спробуйте відключити яваскрипт і перевірити чи працюють взагалі посилання.
Врахуйте що в яваскрипт кроссдоменние запити заборонені і ви не зможете довантажити.
Як я вже писав, без вашого ява скрипта, всі посилання працюють як і должни.Но тільки в новому вікні, власне як і повинно бути).
Сам не розумію.
В опері все запрацювало, як тільки включив AllowFileXMLHttpRequest.
А хром ось що пише
XMLHttpRequest can not load
Origin null is not allowed by Access-Control-Allow-Origin.
День добрий, бачив у тут у вас питання схожий на мій, але не знайшов на нього відповідь ...
Довантажувати на сторінку Аяксом таблицю яку генерує php:
$ (Document) .ready (function () $ .ajax (url: «mkr8.php»,
cache: false,
dataType: «html»,
success: function (aaa) $ ( «# tables»). html (aaa);
>
>);
>);
все подгружается, але при цьому всі інші скрипти знаходяться на сторінці (утому числі які перебувають в цьому ж $ (document) .ready). не працюють для підвантаженими контентента. Заздалегідь вдячний.
Вам необхідно скрипти вантажити заздалегідь. А до підвантаженим елементам звертатися через .live
Ставлю даний код на wordpress, при натисканні вискакує довантажувати контент, але нічого не відбувається. Намагаюся підключити статичну сторінку wordpress
Дивіться які помилки вилазять. У wordpress вже підключений jquery.
Тут ви можете дивитися роботи в тематичних альбомах.
do
printf ( "% s», $ myrow3 [ «title»]);
>
while ($ myrow3 = mysql_fetch_array ($ result3));
$ (Document) .ready (function () $ ( '# getContent'). Click (function () $ .ajax (url: «/content.php»,
cache: false,
beforeSend: function () $ ( '# divContent'). html ( 'Отримуємо контент');
>,
success: function (html) $ ( «# divContent»). html (html);
>
>);
return false;
>);
>);
а саме список міні-зображень (галерея).
Допоможіть будь ласка. Заздалегідь СПАСИБІ за терпіння і рада. Додаю шматок коду -
do
printf ( "% s», $ myrow3 [ «title»]);
>
while ($ myrow3 = mysql_fetch_array ($ result3));
$ (Document) .ready (function () $ ( '# getContent'). Click (function () $ .ajax (url: «/content.php»,
cache: false,
beforeSend: function () $ ( '# divContent'). html ( 'Отримуємо контент');
>,
success: function (html) $ ( «# divContent»). html (html);
>
>);
return false;
>);
>);
Соррі, уточнення - в файлі content.php у мене міститься запит до бази за витягуванням міні-іміджів з таблиці pictures з побудовою списку мініатюр. Як зробити, щоб скрипт працював?
Дякую ще раз.
Вітаю! Велике спасибі за скрипт.
Але допоможіть мені, будь ласка, ще з одним завданням, суть в наступному:
У вас реалізована подгрузка контенту в div по click.
Але мені потрібно не тільки по click, але і по hover, там ерундовое відмінності в стилях, тобто при наведенні контент обрізається, а при кліці з'являється прокрутка справа.