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

Problem with AJAX page and next / prev links

P: 32
I have a snippet of HTML here:

Expand|Select|Wrap|Line Numbers
  1.  <p><a title="" href="#pc" onclick="sendEcardRequest(prev_ecard());">Previous</a> | <a title="" href="#pc" onclick="sendEcardRequest(next_ecard());">Next</a></p>
  2. <p class="ctr"><span id="ecard_id_label"></span></p>
And javascript here (not all of it - just the relevant bit)

Expand|Select|Wrap|Line Numbers
  1.  function sendEcardRequest(id) {
  2.     http6.open('get', 'ajax/ajax-ec.asp?cat=44&id=' + encodeURIComponent(id));
  3.     http6.onreadystatechange = handleEcardRequest;
  4.     http6.send(null);
  5. }
  6.  
  7. function handleEcardRequest() {
  8.     // If everything iss okay:
  9.     if(http6.readyState == 4){
  10.         // Assign the returned value to the document object.
  11.         document.getElementById('ecard_id_label').innerHTML = http6.responseText;
  12.     }
  13. }
  14.  
  15. function prev_ecard() {
  16.     MyEcardVar--;
  17.  
  18.     if (MyEcardVar <= 252) {
  19.         MyEcardVar = 252
  20.     }
  21.  
  22.     return MyEcardVar;
  23. }
  24.  
  25. function next_ecard() {
  26.     MyEcardVar++;
  27.  
  28.     if (MyEcardVar >= 4467) {
  29.         MyEcardVar = 4467
  30.     }
  31.  
  32.     return MyEcardVar;
  33. }

My SQL will get the ID from the javascript - e.g.:

Expand|Select|Wrap|Line Numbers
  1. SELECT photo FROM tbl WHERE photoID > "&id&"
This works fine if the photos in the photo table are all spaced one apart, but in my data, I have the photoIDs as:

252
3048
3052
4010

So unless the user presses next nearly 3,000 times, they won't get any extra photos appearing via the SQL.

Is there any way the javascript can send the next valid ID, instead of only incrementing by 1? If this was a standard page, I could write the next valid number to the page, in the javascript, but I can't do that in this case as it's ajax.

Does this make sense? Sorry if I haven't explained myself very well.

Any advice gratefully received. Thanks.
Jun 17 '09 #1
Share this Question
Share on Google+
13 Replies


acoder
Expert Mod 15k+
P: 16,027
Change the SQL to get the next valid ID. You only need to pass the current ID and there's no need to increment the number in JavaScript.
Jun 17 '09 #2

P: 32
Thanks for the reply.

I'm new to this - how can I send the current ID back to the calling page with the javascript on it - I can't work that bit out...

For example, if I only send the current ID, then on the first run on the page, for example, the currentID = 252.

If the user presses Next, I can get the next valid ID from the script page running the SQL, but I can't see how I would send that next valid ID, e.g. 3048, back to the page with the ajax code on, so that the next time the user presses 'Next', the new, current ID has changed from 252 to 3048.

Thanks again
Jun 17 '09 #3

acoder
Expert Mod 15k+
P: 16,027
What are you returning from the script page? You can use a data format, e.g. JSON or XML, or if using a string, use a unique delimiter (a character or set of characters) to separate the output and the ID, and then split the string returned on this delimiter to get the two parts.
Jun 18 '09 #4

P: 32
The script page just returns a chunk of HTML.

1. Calling page has JS code and next / prev links on it.
2. First time through, the ID sent to the script page = 252.
3. The script page takes the ID and returns a chunk of HTML - e.g.

SELECT photo FROM tbl WHERE photoID > "&id&" LIMIT 8

It returns 8 images by looping through a recordset, using the output from the SQL, and outputting the images as HTML.

Can I also return some other form of data which would allow me to pass IDs between the calling page, and the script page?

Thanks for you help
Jun 18 '09 #5

acoder
Expert Mod 15k+
P: 16,027
A very simple solution would be to return the ID as a hidden field which would be easily accessible using javascript:
Expand|Select|Wrap|Line Numbers
  1. <input type="hidden" id="theID" value="3048">
Jun 18 '09 #6

P: 32
Thanks for the reply.

At the moment, the script page just returns some HTML - e.g.:

<img src="file1.jpg" />
<img src="file2.jpg" />
...
<img src="file8.jpg" />

From what you are saying, would I need to change that so that the script page somehow automatically submits a form, and it that form, I would include a hidden field, which JS can access?

Thanks
Jun 18 '09 #7

acoder
Expert Mod 15k+
P: 16,027
No, just append that to the image files. On second thoughts, forget the hidden field. Just have a hidden span or div:
Expand|Select|Wrap|Line Numbers
  1. <img ... >
  2. <img  ...>
  3. <span id="theID" style="display:none">3048</span>
and then get the ID:
Expand|Select|Wrap|Line Numbers
  1. var id = document.getElementById("theID").innerHTML;
Jun 18 '09 #8

P: 32
Wow! Thanks - that's a great idea.

I gave it a try, but the JavaScript error console of FireFox says:

Error: document.getElementById("theID") is null
Source File: http://jimpix.co.uk/c.asp#pc
Line: 20


If you look on the page:
http://jimpix.co.uk/c.asp

You can see I put this line of JS at the top in the head element:

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. var id = document.getElementById("theID").innerHTML;
  3. </script>
I also tried it with this bit:

var id = document.getElementById("theID").innerHTML;

In the main block of JS at the bottom of the 'c.asp' page but it returned the same error.

I can verify the script page is including the ID in the span, by going to the URL and feeding in the variables that would normally be supplied by JS:

http://jimpix.co.uk/ajax/ajax-ec.asp?cat=44&id=247

I guess I'm probably doing something v. silly!

Thanks
Jun 18 '09 #9

acoder
Expert Mod 15k+
P: 16,027
That piece of code should be in handleEcardRequest(), so that it can be used the next time you make a request.
Jun 18 '09 #10

P: 32
Thanks again for your help, and patience!

Okay, I tried this:

Expand|Select|Wrap|Line Numbers
  1. function handleEcardRequest() {
  2.     var id = document.getElementById("theID").innerHTML;
  3.     // If everything iss okay:
  4.     if(http6.readyState == 4){
  5.         // Assign the returned value to the document object.
  6.         document.getElementById('ecard_id_label').innerHTML = http6.responseText;
  7.     }
  8. }
But the error console repeated this error three times:

Error: document.getElementById("theID") is null

I am sorry for being such a novice dimwit! Presumably I'm putting the var id line in the wrong place!

I also tried:

Expand|Select|Wrap|Line Numbers
  1. function handleEcardRequest() {
  2.     // If everything iss okay:
  3.     if(http6.readyState == 4){
  4.     var id = document.getElementById("theID").innerHTML;
  5.         // Assign the returned value to the document object.
  6.         document.getElementById('ecard_id_label').innerHTML = http6.responseText;
  7.     }
  8. }
But it still didn't help.

Thanks again
Jun 18 '09 #11

acoder
Expert Mod 15k+
P: 16,027
Remove the "var" keyword, otherwise it'd be a local variable. Declare a global variable, theID, and then just set it like this:
Expand|Select|Wrap|Line Numbers
  1. theID = document.getElementById("theID").innerHTML;
after the line where you set the label with the response, i.e. after it enters the DOM.
Alternatively, set it in sendEcardRequest like this:
Expand|Select|Wrap|Line Numbers
  1. if (document.getElementById("theID"))
  2.     id = document.getElementById("theID").innerHTML;
  3. else id = 252; //or whatever is the initial value
  4. http6.open('get', 'ajax/ajax-ec.asp?cat=44&id=' + encodeURIComponent(id));
Jun 18 '09 #12

P: 32
Thank you so much for all of your time and patience. It now doesn't return an error. I have really learnt a lot from your help, as I'm sure many others do, judging by how many posts you have made on this site.
Jun 18 '09 #13

acoder
Expert Mod 15k+
P: 16,027
No problem, glad to help :)

Just a note. The solution here may not be the best or the most recommended, but based on what you already had in place, it was probably the quickest and easiest.
Jun 19 '09 #14

Post your reply

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