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
11 2595 acoder 16,027
Recognized Expert Moderator MVP
Use the code that you use to trigger the Ajax request in the onclick of the image, e.g. - onclick="sendRequest(...);"
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 16,027
Recognized Expert Moderator MVP
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.
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="sendRe quest(decr);">P rev</a> |
<a href="#" onclick="sendRe quest(incr);">N ext</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 427
Recognized Expert Contributor
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...
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 427
Recognized Expert Contributor
edit body tag to simulate a click upon loading. - <body id="ajax01" onload="sendRequest(0)">
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 "MyCurrentV ar" 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
Sign in to post your reply or Sign up for a free account.
Similar topics |
by: Larry |
last post by:
I am wondering if anyone has any thoughts on the following issues once
Ajax is incorporated into a page:
Now that we have this Ajax stuff, users have the potential to not leave
a page for a long time. My knowledge of browser memory handling is
limited, but I spoke with a Microsoft engineer who told me that IE has
a very naive mark and sweep GC algorithm, which gets invoked when a
page gets reloaded.
If the GC is not invoked until a...
|
by: darrel |
last post by:
I've been playing with prototype.js and scriptaculous to create some nice
drag-and-drop interaction on my applications GUI. That's working well.
Now I want to take the next step and start passing data back and forth
between my page and the server via AJAX.
In terms of .net, can someone give me the overall concept?
Normally, I'd have a function in my codebehind that grabs a dataset and then
binds that to a control on my aspx page.
|
by: petermichaux |
last post by:
Hi,
I am trying to put together the last major pieces of my project's
puzzle. This is more website/client-side architecture than
JavaScript syntax but I hope this is a good place to ask. I'm a little
stumped with which direction to take and advice would be greatly
appreciated. I think this is a generally interesting problem but I
haven't seen a post this long here before :S
I have developed half of the admin interface for an e-commerce
|
by: Tony |
last post by:
I just noticed that prototype.js is one of the files in the Ajax.NET
distribution - I'm pretty concerned about this. Does anyone know if this
is the same "prototype.js" that is not well-liked around here?
If so, do you know if Ajax.NET can be used without prototype.js?
--
"The most convoluted explanation that fits all of the made-up facts is
the most likely to be believed by conspiracy theorists. Fitting the
|
by: Nico VanHaaster |
last post by:
Hello all,
I have run across an issue with IE 6.0+. I have a page that makes an
XMLHttpRequest to the webserver to update a report on the page. The
first time you hit the refresh report button the data is refreshed,
however if you try to refresh the report the onreadystatechage does
not seem to fire. I have tested this by placing an alert in the
verifyID2 & verifyID3 function to track where the XMLHttpRequest
currently is. Now when...
| |
by: violinandviola |
last post by:
I have just put 4 different ajax bits on this page:
http://jimpix.co.uk/default-ajax.asp
The ajax spits out chunks of images / news content, and users can view
the chunks via next / prev links.
When I first view the page in Firefox, there is a short delay while
the content first loads in the ajax sections.
When I first view the page in IE6, none of the ajax content appears to
|
by: Andy B |
last post by:
I have a class I am creating for data access. I need to access controls from
inside the class that are on a particular page. How do I do this? or is
creating an instance of the page class and using FindControl the only way to
do it?
|
by: RichB |
last post by:
I am trying to get to grips with the asp.net ajaxcontrol toolkit, and am
trying to add a tabbed control to the page.
I have no problems within the aspx file, and can dynamically manipulate a
tabcontainer which has 1 panel already, however I want to try create the
TabPanels dynamically. I followed the advice here:
http://www.asp.net/learn/ajax-videos/video-156.aspx (3rd comment - Joe
Stagner)
|
by: burtonfigg |
last post by:
I have a snippet of HTML here:
<p><a title="" href="#pc" onclick="sendEcardRequest(prev_ecard());">Previous</a> | <a title="" href="#pc" onclick="sendEcardRequest(next_ecard());">Next</a></p>
<p class="ctr"><span id="ecard_id_label"></span></p>
And javascript here (not all of it - just the relevant bit)
function sendEcardRequest(id) {
http6.open('get', 'ajax/ajax-ec.asp?cat=44&id=' + encodeURIComponent(id));
...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
| |
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |