AJAX Page - looking for advice about next step please

[burtonfigg]

I've read this article:
http://www.oracle.com/technology/pub...lman-ajax.html

And from reading it thought it'd be interesting to try a bit of Ajax on my site.

What I'd really like to do is to set up a little ajax widget on my site, so that if people want to view more of the ecard thumbnails, they can click little next/prev icons to view the next / previous 8 thumbnail ecard images. I suppose in a way I want it to be similar to the thumbnail widget used on flickr.com.

I've managed to get a simple bit of ajax running on this demo page:

http://jimpix.co.uk/ajax01/001.asp

If you type a number - e.g. 1 into the text field, and tab out of it, then 8 images are displayed. If you change the number, and tab out again, then the images are updated.

What I'd like to do is to have images to allow next / prev options, but I am stuck now!

I'm hoping to do this with basic hyperlinks, but I can't work out the syntax to get buttons / links / images which users can click, which will take them to the "background" 002.asp page - so rather than have to type a number, I'd like them to be able to click an image, and, for example, view the next 8 images.

I don't have a problem with the asp page to display the next 8 messages - my query is more about how to format the HTML / Javascript etc, to link in with the asp page - because I am trying to use AJAX to do the work in the background, rather than have a simple hyperlink, which would be dead easy...

Any help much appreciated... apologies for the vague query - I suppose I know what I'd like to do, and apart from my rather simplistic starting point, am not sure where to go from here.

Thanks

Jim

[acoder]

Use the code that you use to trigger the Ajax request in the onclick of the image, e.g.

onclick="sendRequest(...);"

[burtonfigg]

Thanks for the reply. Do you mean to take this, in the text input field:

onchange="sendRequest(this.form.email.value)

And to do something like:

<a href="#" onclick="sendRequest(this.form.email.value);">test</a>

This is where my lack of JavaScript experience shines through...

Because if I do this, how do I pass the value of the next / prev numbers through to the corresponding page that spits out the images?

Thanks

Jim

[acoder]

Thanks for the reply. Do you mean to take this, in the text input field:

onchange="sendRequest(this.form.email.value)

And to do something like:

<a href="#" onclick="sendRequest(this.form.email.value);">test</a>

This is where my lack of JavaScript experience shines through...

Because if I do this, how do I pass the value of the next / prev numbers through to the corresponding page that spits out the images?

You're along the right lines. Replace the this.form.email.value with the next/prev number to pass to server script. Once a next/previous set of images is output, you may want to change a value which determines the current page. One idea is to use a global variable, current, and the next link would be current+1 and prev would be current-1. Of course, you need to disable previous when there's no previous page unless you cycle back to the last page.

[burtonfigg]

Thanks again for the advice.

I have put this in the javascript in the header:

var MyCurrentVar = 1;
var incr = MyCurrentVar+1;
var decr = MyCurrentVar-1;

And then this in the HTML:

[HTML]<p><a href="#" onclick="sendRequest(decr);">Prev</a> |
<a href="#" onclick="sendRequest(incr);">Next</a></p>[/HTML]That is working okay (it's online here) ... but I can't see how the values can keep increasing, or keep decreasing, because they are hard-coded in the javascript. i.e. if I click the 'Next' link, it works once, but doesn't keep on increasing...

Again, my poor javascripting I'm sure!

Thank you!

[rnd me]

Thanks again for the advice.
but I can't see how the values can keep increasing, or keep decreasing, because they are hard-coded in the javascript. i.e. if I click the 'Next' link, it works once, but doesn't keep on increasing...

try

 onclick="sendRequest(MyCurrentVar--);
// instead of onclick="sendRequest(decr);
 

and

 onclick="sendRequest(MyCurrentVar++);
// instead of onclick="sendRequest(incr);
 

you shouldnt need/use the extra vars, its the MyCurrentVar that you need to alter each time...

[burtonfigg]

That's great - thank you!

The next question, if it's okay to ask, is that when the user first lands on the page, there are no images in place, because unless the user clicks the next link, nothing is sent to the 002.asp page, which returns the images.

Do I need to initialise the page, or something, so that the images appear when the page is first viewed?

Thank you!

[rnd me]

edit body tag to simulate a click upon loading.

<body id="ajax01" onload="sendRequest(0)">

[burtonfigg]

Thank you very much!

[burtonfigg]

I have coded a very simple ajax page here:

http://jimpix.co.uk/ajax01/001.asp?cat=23

I have a few questions:

1. On first entering the page, is there any way I can disable the "prev" link?

2. When I hit the "next" button, it increments the "MyCurrentVar" variable by 1,and sends it to the underlying page that generates the images. But when I first hit the "next" button, nothing happens. I have to click it twice for the increment to seemingly take effect.

3. The SQL generates 12 images, using the "LIMIT" function in the SQL - e.g.:

SELECT photoID, photoName, image_type FROM j_ecard_photos WHERE catID = 23 LIMIT 9,12

But! If I click "Next" again, it only displays 11 images, because it starts running out of available ecards. Same again if I click Next again.

Is there any way I can check to see how many images remain (no problem with the SQL), and disable the "Next" button when there are <= 12?

Thanks

Jim

[acoder]

Since this is related to your first thread, I have merged the two.

I have a few questions:

1. On first entering the page, is there any way I can disable the "prev" link?

You can have it set to return false onclick to begin with. Once Next is clicked, you can change this to enable prev. Alternatively, just show some text and replace it with a link when required (either using replaceChild() or hiding/showing the text/link).

[rnd me]

2. When I hit the "next" button, it increments the "MyCurrentVar" variable by 1,and sends it to the underlying page that generates the images. But when I first hit the "next" button, nothing happens. I have to click it twice for the increment to seemingly take effect.

set MyCurrentVar equal to one more in your code than you have it now.