[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1155
  • Last Modified:

Image button with Javascript in a Datalist

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" />

Open in new window

0
leap29
Asked:
leap29
  • 3
  • 3
1 Solution
 
sunithnairCommented:
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)" />
 

Open in new window

0
 
leap29Author Commented:
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>

Open in new window

0
 
sunithnairCommented:
Sorry it should be OnClientClick and not onclick

<asp:ImageButton ID="ImageButton1" runat="server" OnClientClick="javascript:ChangeImage(this)" />
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
leap29Author Commented:
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?
0
 
sunithnairCommented:
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>

Open in new window

0
 
leap29Author Commented:
Thanks got that working now, however I think I may have gone about my problem the wrong the way.
I'm going to open another question with regards to this.  hopefully you can help me with that.  Thanks a lot for the help with this question.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now