3 Replies - 2459 Views - Last Post: 21 October 2009 - 08:48 AM

#1 DevXen  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 26-September 09

Ajax - Load New Pictures on click of link.

Post icon  Posted 30 September 2009 - 04:55 PM

Hello, I have'nt done anything in Ajax yet, I'm guessing this is the right place to post this question.. I was told that what i would like to do, Ajax would be the way to go about it... i've been looking online. and can't even find where to start... but here's what i'm trying to do.. so if anyone out there has any ideas, or tips, or anything that can get me in the right direction that would be great..

I have a table with 4 cells and a picture in each cell.. *they are flyers for upcoming shows at my friends bar* // I want to click on a next link, to have ajax load the next 4 upcoming show flyers, in the same table cells. then also have one for 'previous' to load the previous show flyers.. i've looked into preloading all the images, and that will make the page load to quick. esp. when more and more flyers get added to it as time passes.. so just have it load the 4 new pictures, at the request (clicking on the next or previous link). should be just fine...

Is This A Good Question/Topic? 0
  • +

Replies To: Ajax - Load New Pictures on click of link.

#2 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1200
  • View blog
  • Posts: 7,309
  • Joined: 07-September 06

Re: Ajax - Load New Pictures on click of link.

Posted 30 September 2009 - 07:46 PM

Do you have PHP installed on your server? If so you can do some easy things with PHP and MySQL for the backend to get the image URLs sent to the Ajax and then put in the tables. I suggest using some sort of library or framework to make this as painless as possible for you. I (personally) recommend [url=http://www.dreamincode.net/forums/showtopic109895.htm]jBeta[/url, but then I am a little partial to it as I am the one writing it... another commonly used Javascript lbirary is jQuery. They both offer a built-in (working) Ajax class you can use easily. Then they will both make it easy for you to modify the table to update the image URLs.

If you so choose to go with jBeta I will be able to help you out with any confusion, if jQuery - well, I don't know jQuery, but there are others on DIC that do.

The basics behind it is going to be get the URLs from the backend (that is what Ajax does), then use Javascript to update the src property of the 4 images, and to display the next/previous links. Javascript will also be responsible for seeing when those links are clicked and making the ajax call in the first place.

Hopefully that is of some use.
Was This Post Helpful? 0
  • +
  • -

#3 DevXen  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 26-September 09

Re: Ajax - Load New Pictures on click of link.

Posted 21 October 2009 - 03:42 AM

View PostBetaWar, on 30 Sep, 2009 - 06:46 PM, said:

Do you have PHP installed on your server? If so you can do some easy things with PHP and MySQL for the backend to get the image URLs sent to the Ajax and then put in the tables. I suggest using some sort of library or framework to make this as painless as possible for you. I (personally) recommend [url=http://www.dreamincode.net/forums/showtopic109895.htm]jBeta[/url, but then I am a little partial to it as I am the one writing it... another commonly used Javascript lbirary is jQuery. They both offer a built-in (working) Ajax class you can use easily. Then they will both make it easy for you to modify the table to update the image URLs.

If you so choose to go with jBeta I will be able to help you out with any confusion, if jQuery - well, I don't know jQuery, but there are others on DIC that do.

The basics behind it is going to be get the URLs from the backend (that is what Ajax does), then use Javascript to update the src property of the 4 images, and to display the next/previous links. Javascript will also be responsible for seeing when those links are clicked and making the ajax call in the first place.

Hopefully that is of some use.



Thank you for the reply.. that helps with a little understanding on ajax.. i did'nt work on this aspect of my page for awhile. because of the frustrations of trying to find information online, to help with what i'm trying to is just about impossible.. I looked into you jBeta. but it had no documentation at all.. so i would'nt know how to go about getting what i'm wanting to work at all. i've seen a few plugins for jQuery.. which make it some some pretty amazing things.. but nothing like what i'm looking for.. grr.
Was This Post Helpful? 0
  • +
  • -

#4 masteryee  Icon User is offline

  • D.I.C Regular

Reputation: 40
  • View blog
  • Posts: 271
  • Joined: 16-May 09

Re: Ajax - Load New Pictures on click of link.

Posted 21 October 2009 - 08:48 AM

Javascript allows you to manipulate what the client (user) sees in their web browser. AJAX is an extension of Javascript ("Asynchronous Javascript and XML" I think) that allows you to make an asynchronous request to a server behind the scenes, and return a response (text or xml) from the server which you can use to update the current page on the client-side. Typically, when you surf the web, the browser makes a request to a server to download a new page (or grabs a cached version) so that the users can view them. So if I have a drop down list, and I select a different item in the list, a request might be sent to the server to send a new page with new options available. AJAX circumvents this by doing things behind the scenes to update the current page the client is viewing, so only a certain part of the page is updated with AJAX when the drop down list selection is changed.

jQuery is just a fancy javascript wrapper.

There should be a ton of tutorials on how to use AJAX, but you still need something like php or asp .NET and a database to be able to make the request and retrieve new image links. What you can try doing is store your html table in a div element, give the div an ID of "flyerDiv", and when your user clicks on the next or previous links, use an ajax object to make a request to your server to return the entire HTML code for the same table with the new images, and when the response comes back, set the innerHTML property of the flyerDiv to be the ajax object's responseText property.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1