473,327 Members | 1,936 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,327 software developers and data experts.

Problem when displaying data fetched with AJAX

mikek12004
200 100+
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
21 2624
gits
5,390 Expert Mod 4TB
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
200 100+
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
5,390 Expert Mod 4TB
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
200 100+
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
5,390 Expert Mod 4TB
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
200 100+
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
5,390 Expert Mod 4TB
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
200 100+
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
5,390 Expert Mod 4TB
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
200 100+
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
16,027 Expert Mod 8TB
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
200 100+
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
200 100+
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
8,658 Expert Mod 8TB
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
200 100+
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
16,027 Expert Mod 8TB
@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
200 100+
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
16,027 Expert Mod 8TB
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
200 100+
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
16,027 Expert Mod 8TB
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
200 100+
True enough, thanks all members for their time!
Jun 5 '09 #22

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

Similar topics

0
by: Maran | last post by:
We have come across a situation that I thinks not many have. Grateful for all responses. Regards Maran ************* * Scenario A DataList binds to a DataRow, with "RegionName" och...
102
by: hug | last post by:
www.webmaster, was suggested that this ng could be a better place.] I've updated my test server to handle if-modified-since. I've noticed that the (old copies I run of) IE and Netscape seem...
2
by: nick | last post by:
Hi I have a web form sitting inside a desktop application written in Delphi (rendered by its browser component based on IE engine). The form runs in 2 modes: - live mode: all data freshly...
2
by: Steve JORDI | last post by:
Hi, I'm having a little trouble trying to update a page content when the user clicks a check box. Basically, I need to reload a page to update its content depending on that checkbox status. I...
8
by: Samik R. | last post by:
Hello, I am using the innerHTML property of a div placeholder to update the contents, and the HTML is provided from a perl script on the server side. The perl script gets called through AJAX when I...
10
by: bhappy | last post by:
Hai All, im facing different problem with ajax. Im using ajax code for country,state & city dropdownlists. In city dropdownlist i had an option to add new city.Im selecting other option in city...
7
Dormilich
by: Dormilich | last post by:
Hi, I've got a very strange problem with UTF-8 encoded data outside ASCII range. While on localhost all went smoothly, the same pages on the server show � (Latin-1 chars (ä, ö, ü, ß, ...)) and...
10
dj12345
by: dj12345 | last post by:
Hi, (Asp.net + Ajax) I am creating a page which will fetch data from server without postbak of a page.. I have 2 controls on this page TextBox and Lable. I have assigned TextBoxWatermark...
1
oranoos3000
by: oranoos3000 | last post by:
hi i have a script that with click a button in this script text with id="targetDiv" is substitute with content of the file data.txt. this script and data.txt are on the same directory on my local...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.