Problem with AJAX page and next / prev links

[burtonfigg]

I have a snippet of HTML here:

[code=html] <p><a title="" href="#pc" onclick="sendEc ardRequest(prev _ecard());">Pre vious</a> | <a title="" href="#pc" onclick="sendEc ardRequest(next _ecard());">Nex t</a></p>
<p class="ctr"><sp an id="ecard_id_la bel"></span></p>[/CODE]

And javascript here (not all of it - just the relevant bit)

[code=javascript] function sendEcardReques t(id) {
http6.open('get ', 'ajax/ajax-ec.asp?cat=44&i d=' + encodeURICompon ent(id));
http6.onreadyst atechange = handleEcardRequ est;
http6.send(null );
}

function handleEcardRequ est() {
// If everything iss okay:
if(http6.readyS tate == 4){
// Assign the returned value to the document object.
document.getEle mentById('ecard _id_label').inn erHTML = http6.responseT ext;
}
}

function prev_ecard() {
MyEcardVar--;

if (MyEcardVar <= 252) {
MyEcardVar = 252
}

return MyEcardVar;
}

function next_ecard() {
MyEcardVar++;

if (MyEcardVar >= 4467) {
MyEcardVar = 4467
}

return MyEcardVar;
}[/CODE]


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

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.

[acoder]

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.

[burtonfigg]

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

[acoder]

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.

[burtonfigg]

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

[acoder]

A very simple solution would be to return the ID as a hidden field which would be easily accessible using JavaScript:

<input type="hidden" id="theID" value="3048">

[burtonfigg]

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

[acoder]

No, just append that to the image files. On second thoughts, forget the hidden field. Just have a hidden span or div:

<img ... >
<img  ...>
<span id="theID" style="display:none">3048</span>

and then get the ID:

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

[burtonfigg]

Wow! Thanks - that's a great idea.

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

Error: document.getEle mentById("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:

<script type="text/javascript">
var id = document.getElementById("theID").innerHTML;
</script>

I also tried it with this bit:

var id = document.getEle mentById("theID ").innerHTM L;

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

[acoder]

That piece of code should be in handleEcardRequ est(), so that it can be used the next time you make a request.

[burtonfigg]

Thanks again for your help, and patience!

Okay, I tried this:

function handleEcardRequest() {
    var id = document.getElementById("theID").innerHTML;
	// If everything iss okay:
    if(http6.readyState == 4){
    	// Assign the returned value to the document object.
        document.getElementById('ecard_id_label').innerHTML = http6.responseText;
    }
}

But the error console repeated this error three times:

Error: document.getEle mentById("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:

function handleEcardRequest() {
	// If everything iss okay:
    if(http6.readyState == 4){
[B]    var id = document.getElementById("theID").innerHTML;[/B]
    	// Assign the returned value to the document object.
        document.getElementById('ecard_id_label').innerHTML = http6.responseText;
    }
}

But it still didn't help.

Thanks again

[acoder]

Remove the "var" keyword, otherwise it'd be a local variable. Declare a global variable, theID, and then just set it like this:

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 sendEcardReques t like this:

if (document.getElementById("theID"))
    id = document.getElementById("theID").innerHTML;
else id = 252; //or whatever is the initial value
http6.open('get', 'ajax/ajax-ec.asp?cat=44&id=' + encodeURIComponent(id));

[burtonfigg]

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.

[acoder]

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.