Call a java script function depending on gridview row

Question

Hi i have a javascript & gridview code with

<script type="text/javascript">
function changeImage() {
    var image = document.getElementById('myImage');
    if (image.src.match("bulbon")) {
        image.src = "Images/pic_bulboff.gif";
    } else {
        image.src = "Images/pic_bulbon.gif";
    }
}

<asp:GridView Width="100%" ID="GridView1" DataSourceID="SqlDataSource1" DataKeyNames="ID" AutoGenerateColumns="False" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None">
    <AlternatingRowStyle BackColor="White" />
    <Columns>
        <asp:TemplateField HeaderText="ID">
            <ItemTemplate>
                <asp:Label ID="lbl1" runat="server" Text='<%#Eval("ID") %>' />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Name">
            <ItemTemplate>
                <%#Eval("Name") %>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Desc">
            <ItemTemplate>
                <%#Eval("Desc") %>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="On Off">
            <ItemTemplate>
                <img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" />
            </ItemTemplate>
        </asp:TemplateField>

And the generated gridview will have about 4 rows and every time i click on the image which is not on the first row it will only trigger on the first row

Any suggestion on how to fix this?

INDIA IT TECH · Accepted Answer · 2016-03-12 07:14:00Z

2

Change your javascript function to,

<script type="text/javascript">
function changeImage(obj) {
    //var image = document.getElementById('myImage');
    if (obj.src.match("bulbon")) {
        obj.src = "Images/pic_bulboff.gif";
    } else {
        obj.src = "Images/pic_bulbon.gif";
    }
}

When you call it from grid, call as below,

onclick="changeImage(this);"

answered Mar 12, 2016 at 7:14

INDIA IT TECH

1,8984 gold badges15 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aju John · Accepted Answer · 2016-03-12 10:58:36Z

0

Try this

<img id="myImage" onclick="changeImage(this)" src="pic_bulboff.gif" />

<script type="text/javascript">
    function changeImage(image) { 
        if (image.src.match("bulbon")) {
            image.src = "Images/pic_bulboff.gif";
        } else {
            image.src = "Images/pic_bulbon.gif";
        }
    }
</script>

edited Mar 12, 2016 at 10:58

answered Mar 12, 2016 at 7:31

Aju John

2,2441 gold badge14 silver badges27 bronze badges

Collectives™ on Stack Overflow

Call a java script function depending on gridview row

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related