0
<script type="text/javascript">
    $(document).ready(function () {
        $("#Button6").on('click',function () {
        $("#Image1").attr('src', 'img/s.jpg');
        });
    });

</script>
<asp:Image ID="Image1" runat="server" Height="284px" Width="284px" src="" style="height:300px;width:300px;left:400px;margin-top:100px;" ClientIDMode="Static"/>
2
Contributors
2
Replies
7
Views
3 Years
Discussion Span
Last Post by JorgeM
0

I think you code is fine. I tested it myself. However, I think what is happending in your case is that you have this code within an aspx file and the code is within the <form> element. You may not be aware but a button element within the form block will cause a post-back. So when you click the button, the src of the image element is being updated, but it is also causing a post-back which results in the client side change being lost.

If you do not want a post-back to occur, you could use the preventDefault() method to prevent the post back from occuring.

here is the working tested code...

<%@ Page Language="C#" %>

<!DOCTYPE html>
<html>
<head runat="server">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
 </script>
</head>
<body>

<form id="form1" runat="server">

<button id="Button6">Button</button>
<asp:Image ID="Image1" runat="server" Height="284px" Width="284px" ClientIDMode="Static"/>

<script>

$(document).ready(function () {
     $("#Button6").on('click', function (event) {
          event.preventDefault();
          $("#Image1").attr('src', 'image1.jpg');
     });
});

</script>

</form>
</body>
</html>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.