C# ASP.Net Image attribute with javascript onclick not working in IE9

I'm using a Datalist to populate a vehicle with its images as thumbnails. When a user clicks on a small image, the onclick event needs to recall the image from the database and load it into an above bigger Image control. I'm using an ImageHandler.ashx, to retrieve the image binary from SQL and renders it in the image control.

Everything works perfect in Chrome and IE7, but not working in IE9. If I click on the small image in IE9, its like the image handler never executes, the bigger image never gets loaded with the selected image. When viewing page source in IE9, the code looks as follows:

IE9 Page source:

<table id="table1" style="padding-left: 0px; padding-top: 0px; width: 108px; height: 73px;
        background-image: url('Images/smallimageframe.png'); background-repeat: no-repeat;
        background-color: #FFFFFF;">
        <tr>
            <td align="center">
                <img id="DataListVehicles_ctl00_imgVehicle" class="imgOpacity" onerror="this.src='Images/no_image.jpg'" onclick="imgBig.src='ImageHandler.ashx?ID=29';" src="ImageHandler.ashx?ID=29" alt="29" style="border-style:None;height:55px;width:90px;border-width:0px;" />
            </td>
        </tr>
    </table>
</td><td class="DataList">
    <table id="table1" style="padding-left: 0px; padding-top: 0px; width: 108px; height: 73px;
        background-image: url('Images/smallimageframe.png'); background-repeat: no-repeat;
        background-color: #FFFFFF;">
        <tr>
            <td align="center">
                <img id="DataListVehicles_ctl01_imgVehicle" class="imgOpacity" onerror="this.src='Images/no_image.jpg'" onclick="imgBig.src='ImageHandler.ashx?ID=30';" src="ImageHandler.ashx?ID=30" alt="30" style="border-style:None;height:55px;width:90px;border-width:0px;" />
            </td>
        </tr>
    </table>
</td><td class="DataList">
    <table id="table1" style="padding-left: 0px; padding-top: 0px; width: 108px; height: 73px;
        background-image: url('Images/smallimageframe.png'); background-repeat: no-repeat;
        background-color: #FFFFFF;">
        <tr>
            <td align="center">
                <img id="DataListVehicles_ctl02_imgVehicle" class="imgOpacity" onerror="this.src='Images/no_image.jpg'" onclick="imgBig.src='ImageHandler.ashx?ID=31';" src="ImageHandler.ashx?ID=31" alt="31" style="border-style:None;height:55px;width:90px;border-width:0px;" />
            </td>
        </tr>
</table>

Server side:

    protected void DataListVehicles_ItemDataBound(object sender, DataListItemEventArgs e)
    {
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
        {
            Image imgVehicle = e.Item.FindControl("imgVehicle") as Image;               
            imgVehicle.ImageUrl = "ImageHandler.ashx?ID=" + m_Vehicles.ListingPhotos[e.Item.ItemIndex].ID;

            imgVehicle.Attributes.Add("onclick", "imgBig.src='ImageHandler.ashx?ID=" + m_Vehicles.ListingPhotos[e.Item.ItemIndex].ID + "';"); 
        }
    }

Markup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <link href="css/asp.css" rel="stylesheet" type="text/css" />

    <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function() {
            $('.imgOpacity').each(function() {
                $(this).hover(
                    function() {
                        $(this).stop().animate({ opacity: 1.0 }, 500);
                    },
                   function() {
                       $(this).stop().animate({ opacity: 0.6 }, 500);
                   })
            });
        });
    </script>

    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table style="width: 780px" class="OtherControl">
            <tr>
                <td style="padding-left: 8px; padding-top: 3px;">
                    <asp:Label ID="lblDescription" runat="server" Font-Bold="True" ForeColor="#FF9900"></asp:Label>
                </td>
            </tr>
            <tr>
                <td>
                    <table style="width: 100%">
                        <tr>
                            <td align="center">
                                <table style="padding-left: 0px; padding-top: 0px; width: 320px; height: 220px; background-image: url('Images/imageframe.png');
                                    background-repeat: no-repeat; background-color: #FFFFFF;">
                                    <tr>
                                        <td align="center">
                                            <asp:Image ID="imgBig" runat="server" Height="200px" Width="300px" onerror="this.src='Images/no_image.jpg'"/>
                                        </td>
                                    </tr>
                                </table>
                                <asp:DataList ID="DataListVehicles" runat="server" RepeatDirection="Horizontal" RepeatColumns="4"
                                    ShowFooter="False" ShowHeader="False" BorderStyle="None" OnItemDataBound="DataListVehicles_ItemDataBound"
                                    HorizontalAlign="Center">
                                    <ItemStyle CssClass="DataList" />
                                    <ItemTemplate>
                                        <table id="table1" style="padding-left: 0px; padding-top: 0px; width: 108px; height: 73px;
                                            background-image: url('Images/smallimageframe.png'); background-repeat: no-repeat;">
                                            <tr>
                                                <td align="center">
                                                    <asp:Image ID="imgVehicle" runat="server" CssClass="imgOpacity" Width="90px" Height="55px"
                                                        onerror="this.src='Images/no_image.jpg'" BorderStyle="None" />
                                                </td>
                                            </tr>
                                        </table>
                                    </ItemTemplate>
                                </asp:DataList>
                            </td>
                        </tr>            
                    </table>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>  

Hope someone can help. Thanks

Answers


It could be the way you are referring to "imgBig" from the onClick JavaScript, you could try using document.getElementById('imgBig').src='.... instead. Also have you opened the IE developer tools window and checked for JavaScript errors when you click the image?


Instead of

imgVehicle.Attributes.Add("onclick", "imgBig.src='ImageHandler.ashx?ID=" + m_Vehicles.ListingPhotos[e.Item.ItemIndex].ID + "';");

Try this

imgVehicle.Attributes.Add("onclick", imgBig.ClientID + ".src='ImageHandler.ashx?ID=" + m_Vehicles.ListingPhotos[e.Item.ItemIndex].ID + "';");

in DataListVehicles_ItemDataBound


Need Your Help

jQuery .click() doesn't fire when element is being modified with .text()

javascript jquery click

I've noticed that, on some platforms, it can be very difficult to click text that is being continually modified. The click event doesn't always trigger when the user clicks elements that are being

how do I create a singleton global object in rails

ruby-on-rails-3

I have an object that I want created once and accessible in one of my models. Where do I put him? I'm afraid if I put him in the model class file he'll get created every time I make a new instance...