Перейти к содержимому


- - - - -

ajax, изменение 2х div'ов


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 10

#1 Ivan87

Ivan87
  • Новичок

  • Пользователь
  • 9 сообщений

Отправлено 07.07.2009 - 16:39

Вот пример кода, как я обычно через ajax изменял один div. Большего мне не требовалось. Сейчас же надо, чтобы нажатие кнопки изменяло 2 и более div'ов.
Подскажите, как? Без использования jquery и подобных библиотек.
Спасибо.


test.php
 
var request;
var dest;
function processStateChange(){
if (request.readyState < 4) document.getElementById(dest).innerHTML = "Загрузка...";
if (request.readyState == 4){
contentDiv = document.getElementById(dest);
if (request.status == 200){



response = request.responseText;
contentDiv.innerHTML = response;




} else {
contentDiv.innerHTML = "Error: Status "+request.status;
}

}
}


function test1( destination  ){
dest = destination;
URL = "test_print.php";
arg = "act=" + dest;
if (window.XMLHttpRequest){
request = new XMLHttpRequest();
request.onreadystatechange = processStateChange;
request.open("POST", URL, true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
request.send(arg);
} else if (window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP");
if (request) {
request.onreadystatechange = processStateChange;
request.open("POST", URL, true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
request.send(arg);
}
}
}


<div id="t1"> 1 </div>  

 <div id="t2"> 2 </div>   
<input type="button" onclick="test1('t1')" value="go">


test_print.php
<?print "1111"?>


#2 pahan76

pahan76
  • Консультант

  • Пользователь
  • 990 сообщений
  • Пол:Мужчина
  • Город:Химки, М.О.

Отправлено 07.07.2009 - 16:49

<input type="button" onclick="test1('t1'); test1('t2')" value="go">

#3 Ivan87

Ivan87
  • Новичок

  • Пользователь
  • 9 сообщений

Отправлено 07.07.2009 - 16:58

Просмотр сообщенияpahan76 (7 Июля 2009, 16:49) писал:

<input type="button" onclick="test1('t1'); test1('t2')" value="go">
Загрузка...
1111

вот что получаю.. (

#4 Vipous

Vipous
  • Великий и Могучий

  • Power User
  • 1 899 сообщений
  • Пол:Мужчина
  • Город:Солнцево

Отправлено 07.07.2009 - 17:33

var dest; - глобальная переменная поетому не выходит

Добавлено: 07.07.2009 - 18:41
вариант решения, сделать 2 процедуры или 2 processStateChange

#5 Ivan87

Ivan87
  • Новичок

  • Пользователь
  • 9 сообщений

Отправлено 07.07.2009 - 17:54

Просмотр сообщенияVipous (7 Июля 2009, 17:33) писал:

var dest; - глобальная переменная поетому не выходит

Добавлено: 07.07.2009 - 18:41
вариант решения, сделать 2 процедуры или 2 processStateChange
Ну да, такой вариант у меня был. Но получается жестко, для каждого дива нада новую функцию и новый processStateChange.. новую глоб request2 и dest2...  А если мне нада заменить много участков на странице, для 20 дивов, 40 новых элементов кода... ужс  Т_Т

Типо вот:

var request;
var request2;
var dest;
var dest2;
function processStateChange(){
if (request.readyState < 4) document.getElementById(dest).innerHTML = "Загрузка...";
if (request.readyState == 4){
contentDiv = document.getElementById(dest);
if (request.status == 200){



response = request.responseText;
contentDiv.innerHTML = response;




} else {
contentDiv.innerHTML = "Error: Status "+request.status;
}

}
}





function processStateChange1(){
if (request2.readyState < 4) document.getElementById(dest2).innerHTML = "Загрузка...";
if (request2.readyState == 4){
contentDiv = document.getElementById(dest2);
if (request2.status == 200){



response = request2.responseText;
contentDiv.innerHTML = response;




} else {
contentDiv.innerHTML = "Error: Status "+request2.status;
}

}
}


function test1( destination  ){
dest = destination;
URL = "test_print.php";
arg = "act=" + dest;
if (window.XMLHttpRequest){
request = new XMLHttpRequest();
request.onreadystatechange = processStateChange;
request.open("POST", URL, true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
request.send(arg);
} else if (window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP");
if (request) {
request.onreadystatechange = processStateChange;
request.open("POST", URL, true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
request.send(arg);
}
}
}

function test2( destination  ){
dest2 = destination;
URL = "test_print1.php";
arg = "act=" + dest2;
if (window.XMLHttpRequest){
request2 = new XMLHttpRequest();
request2.onreadystatechange = processStateChange1;
request2.open("POST", URL, true);
request2.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
request2.send(arg);
} else if (window.ActiveXObject) {
request2 = new ActiveXObject("Microsoft.XMLHTTP");
if (request2) {
request2.onreadystatechange = processStateChange1;
request2.open("POST", URL, true);
request2.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
request2.send(arg);
}
}
}

Сообщение отредактировал Ivan87: 07.07.2009 - 17:55


#6 Vipous

Vipous
  • Великий и Могучий

  • Power User
  • 1 899 сообщений
  • Пол:Мужчина
  • Город:Солнцево

Отправлено 07.07.2009 - 19:13

Если нужно заменить мнго участков, на одинаковый ответ, то она функция один запрос. и список дивов под замену.

Если в каждом диве разный тект, получай от сервера ид того дива в котором заменить текст.
аля в хмл

<?xml version="1.0" encoding="UTF-8"?>
<div id="t1">111111</div>


#7 Ivan87

Ivan87
  • Новичок

  • Пользователь
  • 9 сообщений

Отправлено 07.07.2009 - 19:37

Просмотр сообщенияVipous (7 Июля 2009, 19:13) писал:

Если нужно заменить мнго участков, на одинаковый ответ, то она функция один запрос. и список дивов под замену.

Если в каждом диве разный тект, получай от сервера ид того дива в котором заменить текст.
аля в хмл

<?xml version="1.0" encoding="UTF-8"?>
<div id="t1">111111</div>
Я плохо объяснил. Дивов будет например 4. Вот таким образом
<div id="t1"></div>
какойто контект.
<div id="t2"></div>
какойто контект.
<div id="t3"></div>
какойто контект.
<div id="t4"></div>
И вот нажатием одной кнопки нада будет брать из базы значения(соответственно id div) и заносить их между тегами дива :) Если бы на эту кнопу нада было изменить данные для 1 дива, то я бы сделал как в 1 своем коде, и передав из ЖС в test_print id дива, бы получал то что нада и вывел.Но их больше для 2х дивов получлиось, добавив еще 2 функции. Но это все как-то неправильно.
Если ваш ответ всё еще подходит для моей задачи, то поподробней, пожалуйста. Откуда слать ответ? От ЖС в скрипт ,или из скрипта что-то куда?

#8 Vipous

Vipous
  • Великий и Могучий

  • Power User
  • 1 899 сообщений
  • Пол:Мужчина
  • Город:Солнцево

Отправлено 07.07.2009 - 19:42

щас набросаю

#9 Ivan87

Ivan87
  • Новичок

  • Пользователь
  • 9 сообщений

Отправлено 07.07.2009 - 20:13

Просмотр сообщенияVipous (7 Июля 2009, 19:42) писал:

щас набросаю
спасибо, буду признателен каким-нить наброскам, а то чего-то не найду такого нигде.

#10 Vipous

Vipous
  • Великий и Могучий

  • Power User
  • 1 899 сообщений
  • Пол:Мужчина
  • Город:Солнцево

Отправлено 07.07.2009 - 20:38

index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Test Page</title>
	<link rel="stylesheet" type="text/css" href="styles.css"/>
	<link rel="stylesheet" type="text/css" href="styles.css"/>
	<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
	<div id="d1"> </div>
	<button onclick="GetDiv('1.xml');">Push</button>
	<div id="d2"> </div>
	<button onclick="GetDiv('2.xml');">Push</button>
	<div id="d3"> </div>
	<button onclick="GetDiv('3.xml');">Push</button>
	<div id="d4"> </div>
	<button onclick="GetDiv('4.xml');">Push</button>
	<div id="d5"> </div>
	<button onclick="GetDiv('5.xml');">Push</button>
	<div id="d6"> </div>
	<button onclick="GetDiv('6.xml');">Push</button>
	<button onclick="GetDiv('all.xml');">All</button>
</body>
</html>

styles.css
div
{
	margin:5px;
	min-height:50px;
	min-width:50px;
}

button
{
	margin:5px;

}
#d1
{
	border: 1px solid red;
}
#d2
{
	border: 1px solid green;
}
#d3
{
	border: 1px solid blue;
}
#d4
{
	border: 1px solid orange;
}
#d5
{
	border: 1px solid fuchsia;
}
#d6
{
	border: 1px solid purple;
}

ajax.js
var hReq = getXmlHttpRequestObject();
//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() 
{
	if (window.XMLHttpRequest) 
	{
		return new XMLHttpRequest();
	} 
	else if(window.ActiveXObject) 
	{
		return new ActiveXObject("Microsoft.XMLHTTP");
	} 
	else 
	{
		alert('Status: Cound not create XmlHttpRequest Object.');
	}
}

function handlehReq() 
{
	if (hReq.readyState == 4) 
	{	   
		var xmldoc = hReq.responseXML;	   
		var message_nodes = xmldoc.getElementsByTagName("div");
		var n_messages = message_nodes.length;
		for (i = 0; i < n_messages; i++) 
		{			
			var id =message_nodes[i].getAttribute('id');
			var div=document.getElementById(id);
			if (div) div.innerHTML=message_nodes[i].firstChild.data;
		}
	}
	
}

function GetDiv(param) 
{
   if (hReq.readyState == 4 || hReq.readyState == 0) 
	{
		hReq.open("GET", param, true);
	   // hReq.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		hReq.onreadystatechange = handlehReq;
		hReq.send(null);
	}
}

1.xml и пр
<?xml version="1.0" encoding="UTF-8"?>
<div id="d1">11111</div>

all.xml
<?xml version="1.0" encoding="UTF-8"?>
<root>
	<div id="d1">All23423423</div>
	<div id="d2">Al2343254543</div>
	<div id="d3">Al234234</div>
	<div id="d4">All3434341</div>
	<div id="d5">All455554</div>
	<div id="d6">All6666</div>
</root>

Добавлено: 07.07.2009 - 21:44
Еще вариант, наверное он тебе больтше подойдет

httpRequest.onreadystatechange = function()
                                                  {
                                                      lalala(document.getElementById(dest),httpRequest);
                                                   };

тут в функцию передавать ид дива например и запрос, и уже обрабаывать все это дело, надеюсь понятно, если нет могу написать пример

Прикрепленные файлы

  • Прикрепленный файл  div_xml.rar      62 Количество загрузок:


#11 Ivan87

Ivan87
  • Новичок

  • Пользователь
  • 9 сообщений

Отправлено 13.07.2009 - 03:41

спасибо, помогло




Количество пользователей, читающих эту тему: 1

0 пользователей, 1 гостей, 0 скрытых пользователей