Problem when displaying data fetched with AJAX

[mikek12004]

inside a <td> I display lots of fotos through AJAX according to what link the user pressed (enough to make my page scroll down) the problem is that in another page I have links to these photos the linkage problem was solved and the initiall page fetches through AJAX the correct photos but if the particular photo is way down the page I want the browser to focus there tried with anchor (which do not works since it doesn't find it and with .focus()-which only works for textfield and not with hidden as I hoped to), any ideas?

[gits]

you could try to retrieve the 'pixel-position' (computed style) of the image after the img was rendered and use the scrollTo() method ... but i just wonder why the anchor-solution was not working? how have you tried that?

kind regards

[mikek12004]

I first diplay the page with empty the <td> and then call the function which populates it with the right photos so I guess will not work for an anchor retrieved through AJAX

[gits]

when the page is fully loaded and the elements that you want to retrieve are rendered to the dom-tree then you should be able to retrieve any node that is presnet in the document ... that means you could even add the anchor before loading any images etc. but you just should call the method that should scroll the page after! all images and relevant dom-nodes are fully loaded when you want to use dom-methods to retrieve any nodes.

kind regards

[mikek12004]

meaning that even if I fetch an anchor with id say 1 by using AJAX and in the URL I put page.php#1 it will work? because I(I believe) it was the first think I tried and didn't
the case of setting the anchor to the original structure and not in the AJAX content is not ideal because it is not something standard and even if it was say for an array 5*5 I must make 25 calls to the AJAX function so a solution with the anchors being replaced by AJAX would be much appreciated

[gits]

i'm just confused now ... let me summarize: you have a html-page with an empty table. now you start an ajax-call that has some html as response and you replace some content with that? please show an example so that i don't need to guess what really happens in your code and could give you more specific suggestions ...

kind regards

[mikek12004]

OK, I call the main page create a table with 3 empty <td> and then call

<script type="text/javascript">
        	showgen1(<?php echo $id.','.($page2-1); ?>);
			
	    </script>

which is

function showgen1(str,page2)
{ 
	xmlHttp=GetXmlHttpObject()
	if (xmlHttp==null)
 	{
		 alert ("Browser does not support HTTP Request")
 		return
 	}
	var url="ajax_includes/getgen1.php"
	url=url+"?q="+str+"&page2="+page2
	url=url+"&sid="+Math.random()
	xmlHttp.onreadystatechange=stateChangedgen1
	xmlHttp.open("GET",url,true)
	xmlHttp.send(null)
}
function stateChangedgen1() 
{ 
	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 	{ 
 	
		var data=xmlHttp.responseText;
		var data2=data.split("||END||");
		document.getElementById("m_cont1").innerHTML=data2[0];
		document.getElementById("m_cont2").innerHTML=data2[1];
		document.getElementById("m_cont3").innerHTML=data2[2];
		initalizetooltip();
		lightgallery.init();
		document.getElementById('11').focus();

		

	} 
}

the m_cont1,m_cont2 ,m_cont3 are the ids of the tds which I populate with the content created in getgen1.php in this content is so much that causes the page to display a scrollbar (you have to scroll the page to see the last row of photos) currently I can passing the rights parameters to show the correct contents but I cannot make the page scroll down to the photos that can be viewed only when you scroll down the page. Tried in getgen1.php after each images to put an anchor with a unnique name but when tried to use it e.g. say we want anchor with name 11 if put main.php?...&pa ge=5#11 it doesn't do anything

[gits]

could you put an alert:

alert(document.getElementById('11'));

after trying to retrieve the node ... and tell what it displays? ... i'm even not quite sure whether the focus() would work, may be the scrollTo() method i already mentioned above would work better? how does a link look like from where the call to the gallery-page is triggered?

kind regards

PS: main.php?...&pa ge=5#11 <- is that in the link? ... that will reload the page ... isn't it ... since it calls the main.php-script again? ...

[mikek12004]

the main.php is the page with the pics (called alone and will display the first page then through paging- number-links above the pages which call the AJAX function said before, the other pages can be fetched through ajax and displayed) problem is what happens when in another page (eg. a.php) you want to link to a spesific page to a spesific link. Tried innerHTML after the whole AJAX bussiness is done and work OK and even focus but only with text fiels not with hidden or links
the link to the gallery looks like
main.php?page=2 &re=1&id=$cat&p age2=$page2&num =$pos
where if re=1 means not display the 1st page but the one specified by cat (category of photos), page2 (page of photos), num (number on photo on spesific page- this was also the name/id of the anchor of each image)

[gits]

hmmm ... ok ... i tried something here ... and for the focus()-method it seems that you would need to have a focusable node ... they shouldn't be hidden or just text or something like that ... an anchor with a href is focusable an anchor without is not ... so you could go for the scrollTo() solution or use your focus()-solution with a focusable node ... to retrieve the computed styles like top etc. you may have a look here

kind regards

[mikek12004]

I have very problematic behaviour from firefox while in IE works OK. With both methods (anchor or scroolTo() ) in firefox if I click e.g product x (now I am working the sequence product cataloque-shopping basket) and then click it from my basket it will go to the right row of the right page but only this works only with sequence (click the last product you added), if I add another product y and then click product x then it will not go to the correct row plus, hope you got the idea (in IE works OK)

[acoder]

Just to make sure: a named anchor does not have a #, but the link to it does. Another option is scrollIntoView( ). Failing that, post a link or more of your code.

[mikek12004]

the anchors are named 1,2...,6 etc. and are coming through ajax (first load the pageand then populate table with images and anchors) so I cannot call them from the URL with a e.g. page.php#1 (or atleast that is what I think),have tried scrollTO() and still not working in firefox will try that which you suggested

[mikek12004]

still nothing in firefox so I am putting some code samlpes hoping it will work.
So I have paging for displaying the products-12 products per page which works ok (page2 is the variable saying in which page of the product's cataloque it should go).
the products are shown inside a table with

	//create table
									if ($i==1) echo "<tr>";
									else if ( ($i-1)%3==0 ) {echo "<tr>"; $j=0;}
									echo "<td align='center' style='padding-bottom:5px'>
									";
									if ($image!='not_available.jpg') echo "<a href='watermark.php?path=prod_img/$image' rel='lightgallery[prod]'  title='$prod_name' alt='$alt1'  title='$alt1'>";			
												echo "<img src='prod_img/$image' border='0' width='170' alt='$alt1'  title='$alt1' />";
									if ($image!='not_available.jpg') echo "</a>";			
												echo "
												<br/>
													<br/>
													<b>$prod_name</b><br/>
												
													Τιμή: $price_disp<br/>
													<a href='#details' rel='balloon$i'  >Λεπτομέρειες...</a> <a href='main.php?page=5&action=add_item&id=$prod_id&qty=1&cat=$cat_id&page2=$page3&num=$i'>Καλάθι</a><br/>	
											  <a  name='$i' id='$i' href='#'></a>
											  </td>";
									if ($i%3==0) echo "</tr>";
									$i++;
									$j++;
								}//while
							echo "</table>";
						}//if found results

which also is ok. Note here that only the first page work without ajax for all subsequent I just populate the table with the contents of the appropriate page.

The problem occured when I made a search where the user enter the name's product he sees the result and can click to one to it where I have

<a href='./main.php?page=2&re=1&id=$prod_cat[0]&page2=$page2&num=$pos' rel='balloon$i'>$prod_name</a>

page is the page of the products,id is the category of the item, page2 the variables which tells paging in which page the product is and num thw position of the spesific product in the spesific page of the product's catalogue
upon clicking I call the product's page with empty the table and after creating the table if re=1 (which is) I call

 <script type="text/javascript">
        	showgen2(<?php echo $id.','.$page2.','.$num; ?>);
		
			
	    </script>
which calls

function showgen2(str,page2, num)
{ 
	xmlHttp=GetXmlHttpObject()
	if (xmlHttp==null)
 	{
		 alert ("Browser does not support HTTP Request")
 		return
 	}
	var url="ajax_includes/getgen1.php"
	url=url+"?q="+str+"&page2="+page2+"&num="+num
	url=url+"&sid="+Math.random()
	xmlHttp.onreadystatechange=stateChangedgen2
	xmlHttp.open("GET",url,true)
	xmlHttp.send(null)
}
function stateChangedgen2()
{ 
	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 	{ 
 	
		var data=xmlHttp.responseText;
		var data2=data.split("||END||");
		document.getElementById("m_cont1").innerHTML=data2[0];
		document.getElementById("m_cont2").innerHTML=data2[1];
		document.getElementById("m_cont3").innerHTML=data2[2];
		initalizetooltip();
		lightgallery.init();
		//document.getElementById(data2[3]).focus();
		down=0;
		//if ( (data2[3]>3) && (data2[3]<7) ) down=500;
		//else if (data2[3]>6) down=600;
		//window.scrollTo(0,down);
		 var el = document.getElementById(data2[3]);
      	 el.scrollIntoView(true);
		
	} 
}

getgen1.php is the page creating the content's of the table (the page with the spesific products) well hope that you got the idea

[Dormilich]

not sure if that's a reason, but the values of the name attribute must not start with a number (i.e. only letters and _)