Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!
Learn how Concerto can help you.
Solved
Image button with Javascript in a Datalist
Posted on 2009-03-30
I have a image button in a datalist. What I want ot be able to do is change the image on a onclick. I can get it working when the image buttons is out side the datalist but can't firgure out how to append my code. Please find the code I've got so far attached below
<script type="text/javascript">
function ChangeImage()
{
var imgbtn=document.getElementById("ImageButton2");
imgbtn.src="Images/cart.jpg";
}
</script>
<asp:ImageButton ID="ImageButton2" runat="server"
ImageUrl="~/Images/barrels.jpg" /><input type="button" onclick="javascript:ChangeImage()" value="Click" />
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
3-
3
6 Comments
You can do it like this
<script type="text/javascript">
function ChangeImage(imgbtn)
{
imgbtn.src="Images/cart.jpg";
}
</script>
<asp:ImageButton ID="ImageButton2" runat="server"
ImageUrl="~/Images/barrels.jpg" onclick="javascript:ChangeImage(this)" />
Thanks fro the reply, I've tried the code you suggested but get this error
Compiler Error Message: CS1026: ) expected
<asp:ImageButton ID="ImageButton1" runat="server" onclick="javascript:ChangeImage(this)" - line that the error is on.
full code for image button
asp:LinkButton ID="LinkButton2" runat="server"
CommandArgument='<%# Bind("jobid") %>' CommandName="DetailsViewRedirect"
Font-Size="Small" ForeColor="#9966FF" oncommand="LinkButton2_Command"
style="font-weight: 700; font-size: medium;"
Text='<%# Bind("jobtitle") %>' onclick="LinkButton2_Click"></asp:LinkButton>
script tag
<script type="text/javascript">
function ChangeImage(imgbtn)
{
imgbtn.src="Images/cart2.jpg";
}
</script>
Sorry it should be OnClientClick and not onclick
<asp:ImageButton ID="ImageButton1" runat="server" OnClientClick="javascript:
<asp:ImageButton ID="ImageButton1" runat="server" OnClientClick="javascript:
Thanks that seems to have worked although I have a small problem of when the page postback on the image button click the image changes back to it's orginally one. Any suggestions on how to work around this?
You can do it like this
<script type="text/javascript">
function ChangeImage(imgbtn)
{
imgbtn.src="Images/cart2.jpg";
document.getElementById("<%=hdnImage.ClientID %>").value = imgbtn.id;
}
function SetImage()
{
var img = document.getElementById(document.getElementById("<%=hdnImage.ClientID %>").value);
if(img != null)
img.src = "Images/cart2.jpg";
}
</script>
<body onload="SetImage();">
<!-- YOUR CODE DATALIST AND ALL-->
<asp:HiddenField ID="hdnImage" runat="server" />
</body>
Featured Post
In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition.
To share some of…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
- Node.js
- IT Administration
- JavaScript
- Server Software
- MySQL Server
- Percona, *Clustering
The viewer will learn the basics of jQuery, including how to invoke it on a web page.
Reference your jQuery libraries: (CODE)
Include your new external js/jQuery file: (CODE)
Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles.
Reference your jQuery libraries:
(CODE)
Include your new external js/jQuery file:
(CODE)
Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month6 days, 7 hours left to enroll
704 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.