Selecting from a database?

[ZeroShade]

How can I use javascript to grab 1 column from 1 table in a database and store the results into an array like so:var images = new Array()images[0]........ so on so forth?

[justsomeguy]

Javascript can't interact with a database, you need to send a request to a server-side page that can get the data out of the database and give it to Javascript. That is what AJAX is for.

[ZeroShade]

I've spent a good chunk of time trying to figure this out and just ended up going in circles. First I thought I would create an external javascript page and an asp page to grab from the server but then I figured I would have better luck with asp.net ajax. So thats where I'm at now. Except... I can't find much help on doing this. I have images stuck in a datalist but I only want to show 5 at a time and have two buttons for forward and next so that i can flip though the images. This is my datalist:

<asp:DataList ID="ImageDataList" RepeatDirection="Horizontal" RepeatColumns="5" runat="server" DataKeyField="ImageId" DataSourceID="ImageObjectDataSource">			<HeaderTemplate>				<asp:Button ID="RewindButton" runat="server" OnClick="RewindButton_OnClick()" />			</HeaderTemplate>			<ItemTemplate>				<div style="padding:20px;">					<img src='album/<%# Eval("ImageName") %>' alt="" height="80" width="60" />				</div>			</ItemTemplate>			<AlternatingItemTemplate>				<div style="padding:20px;">					<img src='album/<%# Eval("ImageName") %>' alt="" height="80" width="60" />				</div>			</AlternatingItemTemplate>			<FooterTemplate>				<asp:Button ID="ForwardButton" runat="server" OnClick="ForwardButton_OnClick()" />			</FooterTemplate>		</asp:DataList>

This is my java script:

function RewindButton_OnClick()		{			PageMethods.RewindButton_OnClick();		}				function ForwardButton_OnClick()		{			PageMethods.ForwardButton_OnClick();		}

And this is my code behind:

[WebMethod]	/// <summary>	/// 	/// </summary>	/// <param name="sender"></param>	/// <param name="e"></param>	protected void RewindButton_OnClick(object sender, EventArgs e)	{			}	[WebMethod]	/// <summary>	/// 	/// </summary>	/// <param name="sender"></param>	/// <param name="e"></param>	protected void ForwardButton_OnClick(object sender, EventArgs e)	{			}

I guess because I'm new to asp.net ajax and using pagemethods in javascript... I find it a bit confusing... maybe some pseudo code will help or some explanation on how to go about doing what I want to do? Thanks!!!

[ZeroShade]

Ok... I think i have it... I'm simply going to create a paging method in the code behind... but after I do this... how can i use javascript and ajax to make it picture perfect without the refresh?

[aspnetguy]

the OnClick event you defined in your <asp:Textboxes are not referring to JavaScript those are referrring to server side functions. In order to set an onclick event for an <asp:Textbox you have 2 options:codebehind

TextBoxID.Attributes.Add("onclick","you javascript function")

javascript

//placer this somewhere after your <asp:TextBox codedocument.getElementById("TextBoxID").onclick = functionName;

[ZeroShade]

Oh man... I'm becoming very confused. I keep trying to do this but end up getting lost and looking for alternative ways to do it. What is the best way for me to create an image viewer so that there are only 5 of them showing at a time with previous and next buttons while using ajax so that the page doesn't refresh. I see now that the datalist i am using has a difficult time with paging as well... whats my best plan of action?

[Andrew K.]

If the server side coding language you are using supports WDDX use an Ajax Call and bring back the data as JS (if possible) or as XML and parse the XML.EDIT: this is a response to the first question.

[jesh]

If you already have a list of images that you want to display, you can use javascript to load those images without having to use AJAX and without having to refresh the page.If you have an img element in your HTML:

<img id="display" />

You can set the src of the image in the javascript and the browser will fetch the image from the server and you don't have to use anything fancy:

var images = new Array();images[0] = "image0.jpg";images[1] = "image1.jpg";images[2] = "image2.jpg";images[3] = "image3.jpg";images[4] = "image4.jpg";var img = document.getElementById("display");img.src = images[3];

[ZeroShade]

I'll figure something else out... come back to this another time... my headaches are just getting worst. Thanks for the suggestions though. PS. Jesh... I understand that I can fill the array up with images that are already there... but my problem is that the actual name is in a database because more can be added or deleted... therefore the array would have to get the table holding the information every time the page loads. Would you be able to show me a brief example of how the ajax can do this for me?

[jesh]

A simple way, depending on your requirements, is to take care of all this the first time the page loads. Using PHP, or some other server-side solution, you would query the database and then render out a javascript array of your image names when the page is sent to the visitor. This way, each time the page is loaded the first time, the image array would be up to date with whatever is stored in the database.In pseudo-code:

string images[] = getImageNamesFromDatabase();string output = "var images = new Array();";for(int i = 0; i < images.length; i++){	output += "images[" + i + "] = '" + images[i] + "';";}echo "<script type=\'text/javascript'>";echo output;echo "</script>";

Unless you are having hundreds or thousands of new images every second, I would think that updating the image list the first time the page loads for the user should be sufficient.

[ZeroShade]

Thanks... that makes more sense!