By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,700 Members | 1,451 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,700 IT Pros & Developers. It's quick & easy.

Problem when displaying data fetched with AJAX

mikek12004
100+
P: 200
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?
May 13 '09 #1
Share this Question
Share on Google+
21 Replies


gits
Expert Mod 5K+
P: 5,390
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
May 13 '09 #2

mikek12004
100+
P: 200
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
May 13 '09 #3

gits
Expert Mod 5K+
P: 5,390
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
May 13 '09 #4

mikek12004
100+
P: 200
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
May 13 '09 #5

gits
Expert Mod 5K+
P: 5,390
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
May 13 '09 #6

mikek12004
100+
P: 200
OK, I call the main page create a table with 3 empty <td> and then call
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.             showgen1(<?php echo $id.','.($page2-1); ?>);
  3.  
  4.         </script>
  5.  
which is
Expand|Select|Wrap|Line Numbers
  1. function showgen1(str,page2)
  2.     xmlHttp=GetXmlHttpObject()
  3.     if (xmlHttp==null)
  4.      {
  5.          alert ("Browser does not support HTTP Request")
  6.          return
  7.      }
  8.     var url="ajax_includes/getgen1.php"
  9.     url=url+"?q="+str+"&page2="+page2
  10.     url=url+"&sid="+Math.random()
  11.     xmlHttp.onreadystatechange=stateChangedgen1
  12.     xmlHttp.open("GET",url,true)
  13.     xmlHttp.send(null)
  14. }
  15. function stateChangedgen1() 
  16.     if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
  17.      { 
  18.  
  19.         var data=xmlHttp.responseText;
  20.         var data2=data.split("||END||");
  21.         document.getElementById("m_cont1").innerHTML=data2[0];
  22.         document.getElementById("m_cont2").innerHTML=data2[1];
  23.         document.getElementById("m_cont3").innerHTML=data2[2];
  24.         initalizetooltip();
  25.         lightgallery.init();
  26.         document.getElementById('11').focus();
  27.  
  28.  
  29.  
  30.     } 
  31. }
  32.  
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?...&page=5#11 it doesn't do anything
May 13 '09 #7

gits
Expert Mod 5K+
P: 5,390
could you put an alert:

Expand|Select|Wrap|Line Numbers
  1. 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?...&page=5#11 <- is that in the link? ... that will reload the page ... isn't it ... since it calls the main.php-script again? ...
May 13 '09 #8

mikek12004
100+
P: 200
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&page2=$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)
May 13 '09 #9

gits
Expert Mod 5K+
P: 5,390
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
May 13 '09 #10

mikek12004
100+
P: 200
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)
Jun 3 '09 #11

acoder
Expert Mod 15k+
P: 16,027
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.
Jun 4 '09 #12

mikek12004
100+
P: 200
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
Jun 5 '09 #13

mikek12004
100+
P: 200
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
Expand|Select|Wrap|Line Numbers
  1.     //create table
  2.                                     if ($i==1) echo "<tr>";
  3.                                     else if ( ($i-1)%3==0 ) {echo "<tr>"; $j=0;}
  4.                                     echo "<td align='center' style='padding-bottom:5px'>
  5.                                     ";
  6.                                     if ($image!='not_available.jpg') echo "<a href='watermark.php?path=prod_img/$image' rel='lightgallery[prod]'  title='$prod_name' alt='$alt1'  title='$alt1'>";            
  7.                                                 echo "<img src='prod_img/$image' border='0' width='170' alt='$alt1'  title='$alt1' />";
  8.                                     if ($image!='not_available.jpg') echo "</a>";            
  9.                                                 echo "
  10.                                                 <br/>
  11.                                                     <br/>
  12.                                                     <b>$prod_name</b><br/>
  13.  
  14.                                                     Τιμή: $price_disp<br/>
  15.                                                     <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/>    
  16.                                               <a  name='$i' id='$i' href='#'></a>
  17.                                               </td>";
  18.                                     if ($i%3==0) echo "</tr>";
  19.                                     $i++;
  20.                                     $j++;
  21.                                 }//while
  22.                             echo "</table>";
  23.                         }//if found results
  24.  
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
Expand|Select|Wrap|Line Numbers
  1. <a href='./main.php?page=2&re=1&id=$prod_cat[0]&page2=$page2&num=$pos' rel='balloon$i'>$prod_name</a> 
  2.  
  3.  
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
Expand|Select|Wrap|Line Numbers
  1.  <script type="text/javascript">
  2.             showgen2(<?php echo $id.','.$page2.','.$num; ?>);
  3.  
  4.  
  5.         </script>
  6. which calls
  7.  
Expand|Select|Wrap|Line Numbers
  1. function showgen2(str,page2, num)
  2.     xmlHttp=GetXmlHttpObject()
  3.     if (xmlHttp==null)
  4.      {
  5.          alert ("Browser does not support HTTP Request")
  6.          return
  7.      }
  8.     var url="ajax_includes/getgen1.php"
  9.     url=url+"?q="+str+"&page2="+page2+"&num="+num
  10.     url=url+"&sid="+Math.random()
  11.     xmlHttp.onreadystatechange=stateChangedgen2
  12.     xmlHttp.open("GET",url,true)
  13.     xmlHttp.send(null)
  14. }
  15. function stateChangedgen2()
  16.     if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
  17.      { 
  18.  
  19.         var data=xmlHttp.responseText;
  20.         var data2=data.split("||END||");
  21.         document.getElementById("m_cont1").innerHTML=data2[0];
  22.         document.getElementById("m_cont2").innerHTML=data2[1];
  23.         document.getElementById("m_cont3").innerHTML=data2[2];
  24.         initalizetooltip();
  25.         lightgallery.init();
  26.         //document.getElementById(data2[3]).focus();
  27.         down=0;
  28.         //if ( (data2[3]>3) && (data2[3]<7) ) down=500;
  29.         //else if (data2[3]>6) down=600;
  30.         //window.scrollTo(0,down);
  31.          var el = document.getElementById(data2[3]);
  32.            el.scrollIntoView(true);
  33.  
  34.     } 
  35. }
  36.  
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
Jun 5 '09 #14

Dormilich
Expert Mod 5K+
P: 8,639
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 _)
Jun 5 '09 #15

mikek12004
100+
P: 200
tried with a1,a2,...,a7 etc but didn't worked, the strange is that when I press the link it takes me to the page (not showing the right product), if I press back and click a product from the same page it works ok (showing the correct product), ofcourse after visiting a different page this must be done over again, I do not know if the little time waiting for fetching the AJAX data messes the whole thing up, (also note that first I create the table and then call the js function to populate it)
Jun 5 '09 #16

acoder
Expert Mod 15k+
P: 16,027
@mikek12004
You can use:
Expand|Select|Wrap|Line Numbers
  1. location.href = "#a1";
assuming you've now named them a1, a2, a3, etc.
Jun 5 '09 #17

mikek12004
100+
P: 200
still not working in firefox (in IE fine) in firefox I noticed that first it goes the screen to the prdefined position but with not the pictures and then the pictures are loaded thus throwing the screen off position, I wish there could be a way to move vertically after the images have been loaded.
Jun 5 '09 #18

acoder
Expert Mod 15k+
P: 16,027
I just noticed this line:
Expand|Select|Wrap|Line Numbers
  1. <a  name='$i' id='$i' href='#'></a>
Although this is allowed, there's no need for the href attribute here. Try moving this to around the product name, so that you have some content within the named anchor.

If you're having problems with loading images, you could add this code (location.href) to the onload event handler of the image.
Jun 5 '09 #19

mikek12004
100+
P: 200
You can put the opnload event in the image tag? I didn't knew that...oh well since each page had multiple images I figured out a simpler solution I defined width/height in the product's images, I do not do it normally but here really saved the day.
Jun 5 '09 #20

acoder
Expert Mod 15k+
P: 16,027
Yes, that is a simple solution. Well, glad to see that this problem is finally over. I bet you're glad to see the back of it!
Jun 5 '09 #21

mikek12004
100+
P: 200
True enough, thanks all members for their time!
Jun 5 '09 #22

Post your reply

Sign in to post your reply or Sign up for a free account.