Ajax + onclick

williams · May 8, 2008

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

И есче подскажите пожалуйста каким образом можна сделать тоже самое при клике на урле определенного класа.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Event BubblingQ</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
var req=null;
var url=null;
var linkstatus=null;
var console=null;
var READY_STATE_UNINITIALIZED=0;
var READY_STATE_LOADING=1;
var READY_STATE_LOADED=2;
var READY_STATE_INTERACTIVE=3;
var READY_STATE_COMPLETE=4;

function loadXMLDoc(url) {

   if (window.XMLHttpRequest)
	 try { req = new XMLHttpRequest(); }
	 catch (e) { req = null; }
   else
   if (window.ActiveXObject)
	 try { req = new ActiveXObject("Msxml2.XMLHTTP"); }
	 catch (e)
   {
	try { req = new ActiveXObject("Microsoft.XMLHTTP"); }
	catch (e) { req = null; }
   }
 else req= null;


	if (req) {
		req.onreadystatechange = processReqChange;
		req.open("GET", url, true);
		req.send(null);
	} alert(url); return false;
}

function processReqChange(){
  var ready=req.readyState;
  var data=null;
  if (ready==READY_STATE_COMPLETE){	data=req.responseText; 
 }
  else{	data="loading...["+ready+"]"; }

  document.getElementById('console').innerHTML=data;

}
	window.onload=setupEvents;

function setupEvents(  ) {

   document.getElementById("first1").onclick=function (  ) {  loadXMLDoc(this.href);	 

   }
}

//]]>
</script>

</head>
<body>
<div id="first" style="padding: 20px; background-color: #ff0; width: 150px"><a href="1.html" id="first1">zzzzz</a></div>
<div id="console" style="background-color: #f00; width: 300px; height: 100px">
</body>
</html>

williams · May 8, 2008

решение первого вопроса нашел :

function setupEvents(  ) {

   document.getElementById("first1").onclick=function (  ) {  loadXMLDoc(this.href);	 

   return false;}
}

homm · May 8, 2008

И есче подскажите пожалуйста каким образом можна сделать тоже самое при клике на урле определенного класа.

DCSS ?

ZoNT · May 8, 2008

homm, ты что?

Вспомни страшилку!!!

LokiDi L0ck · May 8, 2008

2homm, :-D

homm · May 8, 2008

homm, ты что?
Вспомни страшилку!!!

Спокойно, я же шучу

williams · May 8, 2008

постебаться и я могу , нет чтоб помочь.

насчет второго пункта - есть 2 блока меню с ссылками, при клике на ссылки 1 блока страничка должна подтягиваться в div1 при клике на ссылки 2 блока в div2, привязку делать либо через ID елемента либо через атрибут. Как решить ету задачу пока не знаю, чтоб пахало и под ФФ и под ИЕ с оперой.

homm · May 8, 2008

function classFilter(r,m,not){
	m = " " + m + " ";
	var tmp = [];
	for ( var i = 0; r[i]; i++ ) {
		var pass = (" " + r[i].className + " ").indexOf( m ) >= 0;
		if ( not ^ pass )
			tmp.push( r[i] );
	}
	return tmp;
}

var arr = classFilter(document.getElementByID('LeftMenu').getElementsByTagName('A'), 'super-class');
var OnClick = function(){
}
for (var i in arr)
  arr[i].onclick = OnClick;

williams · May 12, 2008

Спасибо

NJSmith · May 14, 2008

я конечно припозднился, но... пару вещей я выяснить думаю успею

вопрос автору, нет, я понимаю - ajax есть круть и вааще, спросите у девятихвостого... тьфу, девятилапого, я его сам люблю использовать, НО... на кой тебе тут ajax? использование ненужных вещей в месте, где это не требуется - это никак не признак профессионализма, это выпендреж. от каких условий у тебя зависит url, который ты получаешь? от адреса? от внутренних условий сервера? да полюбому ты это можешь сделать через шаблонизатор, ajax тут - как пресловутый микроскоп вместо молотка

второе, что мешает сделать так:

<div id="uber_true_div"></div>
<iframe style="display: none;" id="uber_true_frame" onload="java script:loadede_my_frame();"></iframe>
<a href="java script:void(0);" onclick="java script:myProc();">Click me</a>
<script type="text/javascript" language="javascript"> 
 $ = function( id )
 {
 return document.getElementById( id );
 };
 myProc = function()
 {
 $('uber_true_frame').src = 'PLACE YOUR URL HERE'; 
 // следующая строка для уверенной перегрузки фрейма
 // вдруг какая ... всмысле дурик пользуется старыми ослами
 $('uber_true_frame').location = $('uber_true_frame').location;
 }; 
 loaded_my_frame = function()
 {
 $('uber_true_div').innerHTML = $('uber_true_frame').contentWindow.document.body.innerHTML;
 };
</script>

поверь, заработает ничуть не хуже, а в какой-то мере даже стабильнее

williams · May 27, 2008

я конечно припозднился, но... пару вещей я выяснить думаю успею
вопрос автору, нет, я понимаю - ajax есть круть и вааще, спросите у девятихвостого... тьфу, девятилапого, я его сам люблю использовать, НО... на кой тебе тут ajax? использование ненужных вещей в месте, где это не требуется - это никак не признак профессионализма, это выпендреж. от каких условий у тебя зависит url, который ты получаешь? от адреса? от внутренних условий сервера? да полюбому ты это можешь сделать через шаблонизатор, ajax тут - как пресловутый микроскоп вместо молотка
второе, что мешает сделать так:
<div id="uber_true_div"></div>
<iframe style="display: none;" id="uber_true_frame" onload="java script:loadede_my_frame();"></iframe>
<a href="java script:void(0);" onclick="java script:myProc();">Click me</a>
<script type="text/javascript" language="javascript">	
	$ = function( id )
	{
		return document.getElementById( id );
	};
	myProc = function()
	{
		$('uber_true_frame').src = 'PLACE YOUR URL HERE';			 
		// следующая строка для уверенной перегрузки фрейма
		// вдруг какая ... всмысле дурик пользуется старыми ослами
		$('uber_true_frame').location = $('uber_true_frame').location;
	};				 
	loaded_my_frame = function()
	{
		$('uber_true_div').innerHTML = $('uber_true_frame').contentWindow.document.body.innerHTML;
	};
</script>
поверь, заработает ничуть не хуже, а в какой-то мере даже стабильнее

проблема в том что такие ссылки поисковики пропустят и не будут индексировать.

williams · May 27, 2008

предыдущие 2 вопроса решил следующим кодом:

var req=null;
var url=null;
var content=null;
var READY_STATE_UNINITIALIZED=0;
var READY_STATE_LOADING=1;
var READY_STATE_LOADED=2;
var READY_STATE_INTERACTIVE=3;
var READY_STATE_COMPLETE=4;

function loadXMLDoc(url) {

						  if (window.XMLHttpRequest)
						  try { req = new XMLHttpRequest(); }
						  catch (e) { req = null; }
						else

						  if (window.ActiveXObject)
						  try { req = new ActiveXObject("Msxml2.XMLHTTP"); }
						  catch (e)
						  {
						   try { req = new ActiveXObject("Microsoft.XMLHTTP"); }
						   catch (e) { req = null; }
						  }
						 else req= null;


	if (req) {
		req.onreadystatechange = processReqChange;
		req.open("GET", url, true);
		req.send(null);
	   }
		//alert("4"+url); 
		return false;
	} 


function processReqChange(){
  var ready=req.readyState;
  var data=null;
  if (ready==READY_STATE_COMPLETE){	data=req.responseText; 
 }
  else{	data="loading...["+ready+"]"; }

  document.getElementById('content').innerHTML=data;

}


window.onload=setupEvents;

function setupEvents(  ) {//alert('1'+ this.href);


plinks = document.getElementsByTagName('a');
	for(i = 0; i < plinks.length; i++){

   if(plinks[i].className == 'idmenulink'){ 
   plinks[i].onclick = function (  ) {
   url=this.href;
   loadXMLDoc(url);   
   return false;

   }
  }
   if(plinks[i].className == 'idmenulink1'){ 
   plinks[i].onclick = function (  ) {
   url=this.href;
   loadXMLDoc(url);   
   return false;

   }
  }
 }	
}

но появились следующие вопросы:

как заставить работать javascript код который содержится в страницах которые подтягиваются?

(точнее код гугль адсенс)

странички подтягиваются только для URL на котором лежит скрипт(для других URL только в ИЕ7) - как их заставить подтягиваться и в ФФ -что недоглядел?

Sign In

Ajax + onclick

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information