How to change ASP.NET image control using javascript/jquery?

Question

0.00/5 (No votes)

See more:

Basically what i want to do is, when i click an image in asp image control called "subImage", the photo should be displayed in another asp image control called "brandImage". The problem is when i click the subImage, nothing happens. I try to achieve the effect using javascript and jquery. Here is the aspx code and the jquery:

What I have tried:

C#

<div id="thumbnailWrapper">
<button id="prev" class="portfolioNavigation">Previous</button>
<div id="container">
<ul id="imageList">
<li>

<asp:Repeater ID="Repeater3" runat="server" 
OnItemDataBound="subImages_ItemDataBound" ItemType="thumbnailImage" 
SelectMethod="GetThumbnail"> 
<ItemTemplate>
<asp:Image ID="subImage" runat="server" ImageUrl='<%# Item.subimages %>' 
CssClass="subPicStyle"/>
</ItemTemplate>
</asp:Repeater>

</li>
</ul>
</div>

<button id="next" class="portfolioNavigation">Next</button>
<script src="../Javascript/thumbnailNavigation.js"></script>
<script src="../Javascript/thumbnailSelection.js"></script>
</div>

<div class='guitarItemsDetailsImage'>
<asp:Image ID="brandImage" runat="server" ImageUrl='<%# Item.itemimage2 %>' 
height="900px" width="370px" />
</div>

JavaScript

var imgSrc = document.getElementById("<%=subImage.ClientID %>").src;
$(function () {
   $("#<%= subImage.ClientId %>").on("click", function (e) {
   e.preventDefault();
   $("#<%= brandImage.ClientId %>").attr("src", imgSrc);
   $("#<%= subImage.ClientId %>").attr("disabled", "disabled");
  });
});

Posted 14-Sep-17 3:45am

BebeSaiyan

Updated 14-Sep-17 4:35am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

F-ES Sitecore · Accepted Answer · 2017-09-14T04:33:00

Your repeater is going to have multiple images so which image do you think this is going to refer to

var imgSrc = document.getElementById("<%=subImage.ClientID %>").src;

The first one? The last one? You need to know which image is clicked so you need to add the click event to all possible images. There are many ways of doing this, below I've added a "data-image" attribute to indicate which images you want to be able to click.

<asp:Repeater ID="myRepeater" runat="server">
    <ItemTemplate>
        <asp:Image ID="subImage" runat="server" data-image ImageUrl='<%# Container.DataItem %>' CssClass="subPicStyle"/>
    </ItemTemplate>
</asp:Repeater>

<div class='guitarItemsDetailsImage'>
<asp:Image ID="brandImage" runat="server" ImageUrl='' 
height="900px" width="370px" />
</div>

<script>
    $(document).ready(function () {
        // get all images
        var images = $("[data-image]");
        images.click(function (e) {
            e.preventDefault();
            // get the image that's been clicked on
            imgSrc = $(this);

            // update brandImage to have the same src as the clicked image
            $("#<%= brandImage.ClientID %>").attr("src", imgSrc.attr('src'));

            // enable all images
            images.attr("disabled", false);

            // disable the clicked image
            imgSrc.attr("disabled", "disabled");
        });
    });
</script>