Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Controlling an Image's URL with Java from a DataGrid

Status
Not open for further replies.

Isadore

Technical User
Feb 3, 2002
2,167
US
I am trying to get an image on a page to change when someone clicks on a datagrid hyperlink column. The idea is change an image src (URL) on the page when this happens. I can get the grid to format properly but not quite sure how the "javascript:golink(1) type code works and how to get this click event on the grid to automatically change the IMG tag URL.

<Columns>
<asp:TemplateColumn HeaderText=&quot;Sample Date&quot;>
<HeaderTemplate>
<b><i>Sample Date</i></b>
</HeaderTemplate>
<ItemTemplate>
<asp:HyperLink
id=HyperLink1
DataNavigateUrlFormatString='<%#databinder.eval(container.dataitem, &quot;SampleDate&quot;, &quot;{0:d}&quot;)%>'
Text='text>
</asp:HyperLink>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
....
....
....
<IMG Name=&quot;myimage&quot; style=&quot;Z-INDEX: 102; LEFT: 177px src=&quot;mypage.aspx?date={date from Datagrid on click&quot;>
....
....

...the idea being that when the datagrid is clicked on, the date is passed to the data querystring of the URL of the image and therefore the image reloads.

Thanks!
</TD>
 
Still working on this problem. Will post final solution when I arrive at it. Getting closer though still not able to pass the URL from the DataGrid to the Image:

Template Column (Date, Single column datagrid)

<ItemTemplate>
<asp:HyperLink
id=&quot;HyperLink1&quot;
Text='<%# Databinder.eval container.dataitem, &quot;SampleDate&quot;, &quot;{0:d}&quot;)%>'
NavigateUrl=&quot;javascript:swap('NewProfilesCharts.aspx?date=
<%# Databinder.eval (container.dataitem, &quot;SampleDate&quot;, &quot;{0:d}&quot;)%>');
runat=&quot;server&quot;
</asp:HyperLink>
</ItemTemplate>

JavaScript:

<script=javascript>
<!-- Hide script from non java browsers
function swap(newimage){
var fileName = newImage.toString()
document.all.myimage.src = fileName
}
// stop hiding -->
</script>

Image Tag:

<asp:Imagebutton id=&quot;myimage&quot; runat=&quot;server&quot; Height=&quot;350px&quot; Width=&quot;500px&quot; src=&quot;.\images\Blufill.png&quot;/>

I'm sure the solution is close to this; just can't get it to come together. I've also posted at the ASP.NET forum; guess everyone is busy over the holidays.


 
Just about have this one wrapped up. Its a nice technique and should be straight forward. Down to &quot;one&quot; error, and it comes from a line in the Javascript function. Here's the &quot;near finished&quot; product (when I get the thing working I'll post a link on the net - its a nice platform because it doesn't require a post-back, nor all the image storing in mouseover; it just sends back for a binary delivery of the next chart.

First: DataGrid

The following is working perfectly (hyperlink column):

<asp:DataGrid id=&quot;dgSampleDate&quot; ...runat=&quot;server&quot;>
<Columns>
<asp:HyperLinkColumn
HeaderText=&quot;<b><i>Sample Date</b></i>&quot;
DataNavigateUrlField=&quot;SampleDate&quot;
DataNavigateUrlFormatString=&quot;javascript:delsrc({0:d});&quot;
DataTextField=&quot;SampleDate&quot;
DataTextFormatString={0:d}>
</asp:HyperLinkColumn>
</Columns>
</asp:DataGrid>

...I abandoned the Template Column as it was not necessary; also, it seemed to interfer with the Javascript execution. At any rate, the grid seems to be working fine. Also, the Image tag seems ok, q.v.,

Second: The Image tag

<IMG src=&quot;.\images\Blufill.png&quot; name=&quot;myimage&quot; border=&quot;0&quot; Height=&quot;310&quot; Width=&quot;470&quot; >

...which is fine, and finally, the &quot;last problem&quot;, q.v,

Third: The Javascript function (to pass the new URL)

<script language=javascript>
function delsrc(Date){
document.images.myimage.src = 'NewProfilesCharts.aspx?date=' + Date;}
</script>

...the last error I recieve is from the document.images... line. A javascript error appears saying that an &quot;ojbect&quot; is missing. Something is not quite right with the Javascript function line - seems to be breaking on the word document from what I can tell. I've tried substituting images for all etc, but can't get past this last java error message.

 
good work Izzy.
I and I'm sure many others here appreciate it when someone posts a solution to a problem when they solve it. That'l do donkey, that'l do
[bravo] Mark
If you are unsure of forum etiquette check here faq796-2540
 
Hey Zarc. Hope ya had a good T'day. I started out this little problem thinking mouseover would be neat - but that required either writing chart files to the server and then deleting them (taging them with img_no's and Session.ID's etc, or change the src of the chart image so that all you have to do is send off for a binary image stream, short of posting the page back.

Anyway, I don't know what was causing the java error message. I changed a few things in the aspx chart image (chartdirector) and it went away; so is working now.

I am in florida, the server for the OLEDB site is in Auburn. I was playing with the platform and over a connection of 36 K bps it took 0.5-0.7 seconds to make the round trip to the server and return the binary stream once a date was clicked on. So, not a bad compromise considering the resources involved. If I were on an SQL Server and not using OLE-pasta-DB connectivity I might go for the mouseover version, putting the images into Session State. But even there it may be more practical to send off for a 2K binary stream.

Thanks!
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top