header("Content-type: text/css; charset=windows-1251");
echo "
<b>new script</b>
<script lang='JavaScript'>
<!--
links([аргументы для замены ссылок]);
// -->
";
Замена ссылок на странице после загрузки яваскрипта с помощью AJAX
Привет всем.
Хочу провернуть следующее
с помощью Ajax-запроса возвращается текст с ява-скриптом,
содержимое определенного div'a заменяется этим текстом,
после чего должен сработать новый скрипт
однако скрипт невыполняется :(
После Ajax запроса текст для замены у меня возвращаяется вот таким образом
как можно заставить сработать яваскрипт?
мож собака зарыта в значении Content-type?Замена ссылок на странице после загрузки яваскрипта с помощью AJAX
Хочу провернуть следующее
с помощью Ajax-запроса возвращается текст с ява-скриптом,
содержимое определенного div'a заменяется этим текстом,
после чего должен сработать новый скрипт
однако скрипт невыполняется :(
После Ajax запроса текст для замены у меня возвращаяется вот таким образом
Код:
header("Content-type: text/css; charset=windows-1251");
echo "
<b>new script</b>
<script lang='JavaScript'>
<!--
код замены ссылок
// -->
";
echo "
<b>new script</b>
<script lang='JavaScript'>
<!--
код замены ссылок
// -->
";
как можно заставить сработать яваскрипт?
мож собака зарыта в значении Content-type?Замена ссылок на странице после загрузки яваскрипта с помощью AJAX
Если сам скрипт заменяющий приезжает в страницу вместе с текстом по AJAX'у, то тут надо применять функцию eval().
Кстати у тебя проблем с кодировкой не возникает? Насколько мне известно в AJAX очень желательна кодировка UTF-8
Кстати у тебя проблем с кодировкой не возникает? Насколько мне известно в AJAX очень желательна кодировка UTF-8
Нет, проблем с кодировкой не возникает, какраз благодаря charset=windows-1251, т.к. данные у меня имено в этой кодировке, а если не указать windows-1251 то они как раз и вернуться в utf-8
А с eval() надо поэкспериментировать..
А с eval() надо поэкспериментировать..
Просто интерестно, а почему "Content-type: text/css;", а?
На странице, в которой следует изменить ссылки, должна быть функция, допустим links(). Если ссылки формируются в зависимосит от пришедшего зароса, то соответственно функции links() надо передать аргументы, с которыми она могла бы работать и изменять ссылки в зависимости от зароса.
Следовательно фозвратить можно следующую строку:
Надеюсь я правильно понял вопрос.
Следовательно фозвратить можно следующую строку:
Код:
Надеюсь я правильно понял вопрос.
Unglued
Совершенно верно поняли! Я и так пробовал, вот только как я раньше и говорил, вызов функции links не происходит, браузеры просто невоспринимают этот кусок кода.. (как будто его вообще нет)
shaelf
Да хоть Content-type: text/html; или Content-type: text/JavaScript;
одинаково.
На одном форуме мне посоветовали смотреть в сторону библиотеки prototype.js и цитирую:
Совершенно верно поняли! Я и так пробовал, вот только как я раньше и говорил, вызов функции links не происходит, браузеры просто невоспринимают этот кусок кода.. (как будто его вообще нет)
shaelf
Да хоть Content-type: text/html; или Content-type: text/JavaScript;
одинаково.
На одном форуме мне посоветовали смотреть в сторону библиотеки prototype.js и цитирую:
Цитата:
Надо ведь сделать так, чтобы сценарий попал в память браузера... А вставляя код просто в страницу и с аяксом, и без аякса ни чего не получится.
Чтобы функции пришедшии с помощью AJAX работали - необходимо их сначала пихать в eval(). Самая большая трудность для тебя будет придумать свой протокол и отделять JavaScript от тегов и служебной информации.
Да, впринципе может и не работать если подумать.
Есть другой вариант, вставлять этот текст не в дескриптор <div>, а в <ifrme>. <ifrme> - это отдельный полноценный документ со своими объектами, но он полностью находится в подчинениии у документа, создавшего его.
Я не знаю как там у тебя что устроено, но вот тебе пример основанный на форме, он же и пища для размышлений:
Основной документ:
[HTML]
<script>
function links(arg){
/* что-то с чем-то */
}
</script>
<!-- ля ля тополя, вся фигня -->
<form name="myForm" id="myForm" action="<скрипт>" method="post" target="myIframe ">
<!-- ля ля тополя, вся фигня -->
</form>
<!-- ля ля тополя, вся фигня -->
<iframe name="myIframe " id="myIframe " style="display:none;"></iframe>
<!-- ля ля тополя, вся фигня -->
[/HTML]
При отправке запроса скрипту ответ придет в новый документ, в данном случае в <ifrme>.
Тогда серверный ответ должен быть абсолютно простым состоящим из 3х строк:
В принципе это тоже самое что я предлагал в первом случае, за исключением того, что возможно, когда идет замена дескриптора <div> браузер игнорирует написанное. В этом же примере то, что помещается в новый документ (в <ifrme>) выполняется строка за строкой.
Собственно вот. Думай, пробуй.
Есть другой вариант, вставлять этот текст не в дескриптор <div>, а в <ifrme>. <ifrme> - это отдельный полноценный документ со своими объектами, но он полностью находится в подчинениии у документа, создавшего его.
Я не знаю как там у тебя что устроено, но вот тебе пример основанный на форме, он же и пища для размышлений:
Основной документ:
[HTML]
<script>
function links(arg){
/* что-то с чем-то */
}
</script>
<!-- ля ля тополя, вся фигня -->
<form name="myForm" id="myForm" action="<скрипт>" method="post" target="myIframe ">
<!-- ля ля тополя, вся фигня -->
</form>
<!-- ля ля тополя, вся фигня -->
<iframe name="myIframe " id="myIframe " style="display:none;"></iframe>
<!-- ля ля тополя, вся фигня -->
[/HTML]
При отправке запроса скрипту ответ придет в новый документ, в данном случае в <ifrme>.
Тогда серверный ответ должен быть абсолютно простым состоящим из 3х строк:
Код:
echo "<script>";
echo "links([аргументы для замены ссылок]);";
echo "</script>";
echo "links([аргументы для замены ссылок]);";
echo "</script>";
В принципе это тоже самое что я предлагал в первом случае, за исключением того, что возможно, когда идет замена дескриптора <div> браузер игнорирует написанное. В этом же примере то, что помещается в новый документ (в <ifrme>) выполняется строка за строкой.
Собственно вот. Думай, пробуй.
Unglued
Хм, оригинальное способ. Неплохая пищя.
Хм, оригинальное способ. Неплохая пищя.
Хочет вот что уточнить. А зачем нужен этот скрипт? Какова его задача? Только перебить атрибут href у тегов <a>?
Тогда лучше воспользоваться DOM функциями.
Кстати можно этот JS скрипт не передавать с сервера на клиент через Ajax-приложение, а просто на странице создать тег в духе:
А при Ajax-запросе серверный скрипт будет не отсылать клиенту данные, а просто изменять файл script.js на сервере в соответствии с поступившим запросом.
Тогда лучше воспользоваться DOM функциями.
Кстати можно этот JS скрипт не передавать с сервера на клиент через Ajax-приложение, а просто на странице создать тег в духе:
Код:
<script type="text/javascript" src="script.js"></script>
А при Ajax-запросе серверный скрипт будет не отсылать клиенту данные, а просто изменять файл script.js на сервере в соответствии с поступившим запросом.
Кстати вдогонку. Предлагаю вот с этим ознакомиться: http://dklab.ru/lib/Subsys_JsHttpRequest/
Еще выскажу некоторые соображения. У тебя не работает скрипт, потому что ты его неправильно добавляешь в на страницу. Для динамического изменения страницы, без обновления нужно изменять объектную модель документа DOM. Поэтому для вставки на страницу нового JavaScript нужно использовать API DOM.
Пояснию конкретным примером. Путь у нас есть 3 файла. Это сама HTML страница. Вот листинг файла index.html:
Так же есть JavaScript который является AJAX-движком. Вот листинг файла ajax.js:
А так же есть серверный скрипт который при AJAX запросе отдаст движку код JavaScript-а который нужно добавить на страницу. Вот листинг файла script.php:
Работает это так. Если до Ajax-запроса нажать кнопку "CLICK", то ни чего не произойдет, т.к. на странице нет функции clk(). Однако после запроса (жмем кнопку "ЗАПРОС") на странице такая функция появляется и кнопка работает мы видим сообщение "ОК".
Такая схема работает в IE (если ActiveX не вырублено конечно), Opera и FireFox. В других не пробывал, но думаю будет работать во всех последних версиях браузеров.
Пояснию конкретным примером. Путь у нас есть 3 файла. Это сама HTML страница. Вот листинг файла index.html:
Код:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>AJAX</title>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body onload="httpRequest()" id="body">
<input type="button" value="ЗАПРОС" onclick="requestURL()"><br>
<input type="button" value="CLICK" onclick="clk()">
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>AJAX</title>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body onload="httpRequest()" id="body">
<input type="button" value="ЗАПРОС" onclick="requestURL()"><br>
<input type="button" value="CLICK" onclick="clk()">
</body>
</html>
Так же есть JavaScript который является AJAX-движком. Вот листинг файла ajax.js:
Код:
function httpRequest() {
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
request = new ActiveXObject("Msxml2.XMLHTTP");
if (!request) {
request = new ActiveXObject("Microsoft.XMLHTTP");
};
};
};
function requestURL() {
request.onreadystatechange=handleResponse;
request.open('POST','script.php',true);
request.send(null);
};
function handleResponse() {
if(request.readyState == 4) {
if(request.status == 200) {
alert(request.responseText);
var body = document.getElementById('body');
var element = document.createElement('script');
element.text = request.responseText;
var arrtibute_type = document.createAttribute('type');
arrtibute_type.value = 'text/javascript';
element.setAttributeNode(arrtibute_type);
body.appendChild(element);
} else {
alert("A problem occurred with communicating between the XMLHttpRequest object and the server program.");
};
};
};
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
request = new ActiveXObject("Msxml2.XMLHTTP");
if (!request) {
request = new ActiveXObject("Microsoft.XMLHTTP");
};
};
};
function requestURL() {
request.onreadystatechange=handleResponse;
request.open('POST','script.php',true);
request.send(null);
};
function handleResponse() {
if(request.readyState == 4) {
if(request.status == 200) {
alert(request.responseText);
var body = document.getElementById('body');
var element = document.createElement('script');
element.text = request.responseText;
var arrtibute_type = document.createAttribute('type');
arrtibute_type.value = 'text/javascript';
element.setAttributeNode(arrtibute_type);
body.appendChild(element);
} else {
alert("A problem occurred with communicating between the XMLHttpRequest object and the server program.");
};
};
};
А так же есть серверный скрипт который при AJAX запросе отдаст движку код JavaScript-а который нужно добавить на страницу. Вот листинг файла script.php:
Код:
<?php
print 'function clk() {alert("OK");}';
?>
print 'function clk() {alert("OK");}';
?>
Работает это так. Если до Ajax-запроса нажать кнопку "CLICK", то ни чего не произойдет, т.к. на странице нет функции clk(). Однако после запроса (жмем кнопку "ЗАПРОС") на странице такая функция появляется и кнопка работает мы видим сообщение "ОК".
Такая схема работает в IE (если ActiveX не вырублено конечно), Opera и FireFox. В других не пробывал, но думаю будет работать во всех последних версиях браузеров.
[QUOTE=alekciy]Хочет вот что уточнить. А зачем нужен этот скрипт? Какова его задача? Только перебить атрибут href у тегов <a>?
Тогда лучше воспользоваться DOM функциями.
...[/QUOTE]
Ну допустим есть фотогалерея с категориями фоток.. по нажатию на категорию выводится n-ое количество фоток на страничку с помощью аякса(замена содержимого определенного дива тем, что вернет аякс-запрос), а всего фоток в этой категории больше чем n, и необходимо сделать ссылку "далее".. возвращяемый кусок кода с фотками выбранной категории также содержит ява-скрипт, который формирует эту ссылку "далее" (далее на 2стр./далее на 3стр./4/5/...).
На комби.ру модуль "Новые лица" ссылки "След.10", "Пред.10", работают так как мне нужно для моей "далее"!
Но там используется responseXML вместо responseText, пробовал переделать под responseXML, но почемуто при разборе xml-данных мой скрипт никак не хотел работать, ошибка появлялась после получения данных из первой ветки xml
тут возникала ошибка
XML-данные
Не знаю, может у меня где была ошибка в структуре XML-данных, но так и не удалось пропарсить ХМL и получить хоть что-то :(
Тогда лучше воспользоваться DOM функциями.
...[/QUOTE]
Ну допустим есть фотогалерея с категориями фоток.. по нажатию на категорию выводится n-ое количество фоток на страничку с помощью аякса(замена содержимого определенного дива тем, что вернет аякс-запрос), а всего фоток в этой категории больше чем n, и необходимо сделать ссылку "далее".. возвращяемый кусок кода с фотками выбранной категории также содержит ява-скрипт, который формирует эту ссылку "далее" (далее на 2стр./далее на 3стр./4/5/...).
На комби.ру модуль "Новые лица" ссылки "След.10", "Пред.10", работают так как мне нужно для моей "далее"!
Но там используется responseXML вместо responseText, пробовал переделать под responseXML, но почемуто при разборе xml-данных мой скрипт никак не хотел работать, ошибка появлялась после получения данных из первой ветки xml
тут возникала ошибка
Код:
var F = Response.getElementsByTagName('PICS');
F = F[0]; // <--в итоге F =null
alert(F.getAttribute('forward'));
F = F[0]; // <--в итоге F =null
alert(F.getAttribute('forward'));
XML-данные
Код:
<PICS><?xml version="1.0" encoding="Windows-1251"?>
<Users forward="enabled" reverse="enabled">
<item id="10" image="<img src="/10.jpg">" ></item>
</PICS>
<Users forward="enabled" reverse="enabled">
<item id="10" image="<img src="/10.jpg">" ></item>
</PICS>
Не знаю, может у меня где была ошибка в структуре XML-данных, но так и не удалось пропарсить ХМL и получить хоть что-то :(
[QUOTE=Mr.PRO]Ну допустим есть фотогалерея с категориями фоток.. по нажатию на категорию выводится n-ое количество фоток на страничку с помощью аякса(замена содержимого определенного дива тем, что вернет аякс-запрос),
[/QUOTE]
Для данной задачи замена src атрибута тега IMG по средством API DOM более чем достаточно. Браузер сам выполнит функцию Ajax движка. При смене src он сделает запрос на сервер без всяких Аяксов из JavaScript-а.
[QUOTE=Mr.PRO]а всего фоток в этой категории больше чем n, и необходимо сделать ссылку "далее".. возвращяемый кусок кода с фотками выбранной категории также содержит ява-скрипт, который формирует эту ссылку "далее" (далее на 2стр./далее на 3стр./4/5/...).
[/QUOTE]
Аналогично. Без Аякса можно обойтись и тут. URL-ы всех фоток (точнее имена файлов), которые должны быть категории передавать вместе со странице в теле JS скрипта в виде массива. А потом через тот же DOM всем этим манипулировать.
Конечно если фоток в категории более чем сотня (какой либо портал уровня fotoclub.ru), то тогда действительно стоит посмотреть в сторону Аякса.
[QUOTE=Mr.PRO]
На комби.ру модуль "Новые лица" ссылки "След.10", "Пред.10", работают так как мне нужно для моей "далее"!
Но там используется responseXML вместо responseText, пробовал переделать под responseXML, но почемуто при разборе xml-данных мой скрипт никак не хотел работать, ошибка появлялась после получения данных из первой ветки xml
тут возникала ошибка
XML-данные
Не знаю, может у меня где была ошибка в структуре XML-данных, но так и не удалось пропарсить ХМL и получить хоть что-то :([/QUOTE]
Именно не "может", а это так и есть. Это твоя ошибка. XML файл должен начитаться с:
, но ни как не с <PICS>
Кроме того:
2) Любой отрытый тег должен рано или позно закрываться. Где <Users> закрывается?
3) Где корневой тег? Если это <Users>, то должно быть:
4) А ты уверен, что у тебя скрипт корректно работает с Windows-1251 для твоего XML? Я вот нет. Лучше бы UTF-8 использовал.
5) image="<img src="/10.jpg">", ой, ну HTML сущности то тут к чему? Вставленные в страницу они воспринимаются как текс, а не как разметка. Я так думаю, что HTML сущности ты в "нормальные" символы в JavaScript не преобразуешь перед вставкой? (т.е. " в ").
6) .... если бы посмотрел еще и серный скрипт, еще бы думаю нашел кучу ошибок.
ИТОГ: Сходи на W3C и возми спецификацию по XML, благо она есть на русском языке. Потому как тебе явно нужно с ней ознакомиться/перечитать_еще_раз. Не парься с Ajax-ом пока. Я понимаю, что сейчас модно и круто, но повремени. Реализуй уж лучше через DOM.
[/QUOTE]
Для данной задачи замена src атрибута тега IMG по средством API DOM более чем достаточно. Браузер сам выполнит функцию Ajax движка. При смене src он сделает запрос на сервер без всяких Аяксов из JavaScript-а.
[QUOTE=Mr.PRO]а всего фоток в этой категории больше чем n, и необходимо сделать ссылку "далее".. возвращяемый кусок кода с фотками выбранной категории также содержит ява-скрипт, который формирует эту ссылку "далее" (далее на 2стр./далее на 3стр./4/5/...).
[/QUOTE]
Аналогично. Без Аякса можно обойтись и тут. URL-ы всех фоток (точнее имена файлов), которые должны быть категории передавать вместе со странице в теле JS скрипта в виде массива. А потом через тот же DOM всем этим манипулировать.
Конечно если фоток в категории более чем сотня (какой либо портал уровня fotoclub.ru), то тогда действительно стоит посмотреть в сторону Аякса.
[QUOTE=Mr.PRO]
На комби.ру модуль "Новые лица" ссылки "След.10", "Пред.10", работают так как мне нужно для моей "далее"!
Но там используется responseXML вместо responseText, пробовал переделать под responseXML, но почемуто при разборе xml-данных мой скрипт никак не хотел работать, ошибка появлялась после получения данных из первой ветки xml
тут возникала ошибка
Код:
var F = Response.getElementsByTagName('PICS');
F = F[0]; // <--в итоге F =null
alert(F.getAttribute('forward'));
F = F[0]; // <--в итоге F =null
alert(F.getAttribute('forward'));
XML-данные
Код:
<PICS><?xml version="1.0" encoding="Windows-1251"?>
<Users forward="enabled" reverse="enabled">
<item id="10" image="<img src="/10.jpg">" ></item>
</PICS>
<Users forward="enabled" reverse="enabled">
<item id="10" image="<img src="/10.jpg">" ></item>
</PICS>
Не знаю, может у меня где была ошибка в структуре XML-данных, но так и не удалось пропарсить ХМL и получить хоть что-то :([/QUOTE]
Именно не "может", а это так и есть. Это твоя ошибка. XML файл должен начитаться с:
Код:
<?xml version="1.0" encoding="Windows-1251"?>
, но ни как не с <PICS>
Кроме того:
2) Любой отрытый тег должен рано или позно закрываться. Где <Users> закрывается?
3) Где корневой тег? Если это <Users>, то должно быть:
Код:
<?xml version="1.0" encoding="Windows-1251"?>
<Users forward="enabled" reverse="enabled">
<item id="10" image="<img src="/10.jpg">" ></item>
<Users>
<Users forward="enabled" reverse="enabled">
<item id="10" image="<img src="/10.jpg">" ></item>
<Users>
4) А ты уверен, что у тебя скрипт корректно работает с Windows-1251 для твоего XML? Я вот нет. Лучше бы UTF-8 использовал.
5) image="<img src="/10.jpg">", ой, ну HTML сущности то тут к чему? Вставленные в страницу они воспринимаются как текс, а не как разметка. Я так думаю, что HTML сущности ты в "нормальные" символы в JavaScript не преобразуешь перед вставкой? (т.е. " в ").
6) .... если бы посмотрел еще и серный скрипт, еще бы думаю нашел кучу ошибок.
ИТОГ: Сходи на W3C и возми спецификацию по XML, благо она есть на русском языке. Потому как тебе явно нужно с ней ознакомиться/перечитать_еще_раз. Не парься с Ajax-ом пока. Я понимаю, что сейчас модно и круто, но повремени. Реализуй уж лучше через DOM.
За приведенный XML-кусок я конечно ИЗВИНЯЮСЬ!
просто усталость наверно сказалась и невнимательно это дело запостил.
Предполагалось вот так:
alekciy
Спасибо за примеры и советы! очень помогли.
просто усталость наверно сказалась и невнимательно это дело запостил.
Предполагалось вот так:
Код:
<?xml version="1.0" encoding="Windows-1251"?>
<PICS forward="enabled" reverse="enabled">
<item id="10" image="<img src="/10.jpg">"></item>
</PICS>
<PICS forward="enabled" reverse="enabled">
<item id="10" image="<img src="/10.jpg">"></item>
</PICS>
alekciy
Спасибо за примеры и советы! очень помогли.
Ну вот так уже лучше, хотя image="<img src="/10.jpg">" я бы HTML сущности убрал бы, если ты их потом в JS обратно перекодировать не будешь.
<img src="/10.jpg">
Это осталось от скриптов с комби.ру
Когда пробовал реализовать с помощью XML (как у комби), брал их хмл-файл(для опытов, чтобы свой не изобретать лишний раз, т.к. не надеялся что получится пропарсить хмл вообще)..
alekciy
Еще раз благодарю за советы :)
Это осталось от скриптов с комби.ру
Когда пробовал реализовать с помощью XML (как у комби), брал их хмл-файл(для опытов, чтобы свой не изобретать лишний раз, т.к. не надеялся что получится пропарсить хмл вообще)..
alekciy
Еще раз благодарю за советы :)