Update javascript var on UpdatePanel update

Posted on 2011-09-30
Last Modified: 2012-06-27
I have a GridView which is located within an UpdatePanel. Each row of the GridView has an image button rendered within it. I have implemented the ability to filter the datasource for the GridView to allow for searching.

I have a javascript function which evaluates the innerHTML of a particular cell within the GridView and prompts the user to confirm their selection. Upon clicking the row's image button, the javascript confirmation dialog is displayed, referencing the evaluated cell's innerHTML. This works great with the initial set of records displayed wtihin the GridView; however, upon filtering/paging through the GridView, the javascript confirmation continues to reference the original innerHTML that was in the GridView cell at the time of the last postback. Because of the UpdatePanel there is no Postback initiated when the GV is filtered or paged.

Is there a way I can get the javascript function to "re-evaluate" the cell values/its variables upon GridView filter/page? Code attached
Question by:alright
  • 4
LVL 12

Expert Comment

ID: 36895411
you need to execute your script function as below in search button.

ScriptManager.RegisterStartupScript(this, this.GetType(), "NewWindow", "<script type=\"text/javascript\"> Your script function </script>", false);

Author Comment

ID: 36911982
Which function would I want to call though? During which script function it is actually "caching" the table's contents I am unsure about.. and would this be the right structure?

ScriptManager.RegisterStartupScript(this, this.GetType(), "NewWindow", "<script type=\"text/javascript\">getGridViewControl()</script>", false);

Some further info; upon first load of the page, the GridView displays all of the datasource's rows. If I filter the list BEFORE clicking the image button for the first time, the javascript references the correct email/company names from the freshly filtered list. If I then re-filter or un-filter the list, the javascript continues referencing the email/companies that were present upon first click of the image button that is executing the Notify() function

Thanks for your help
LVL 22

Expert Comment

ID: 36946762
you can attach or bind click event to image button in aspx / design page itself.
Better way use jQuery for this.

And add this code:

$(document).ready(function() {
        $("#IDOFIMAGE").live('click', function (e) {
            // Call function from here which
            // evaluates the innerHTML of a particular cell within the GridView

             return false;

.live function of jQuery will bind click event to image button always until application is closed or externally click event is unbind.

this solution is for attaching event to single image button with ID.
If you want to attach click event to image buttons on all rows in gridview then :
1. Add cssclass / class to image button
2. instead of line in above code:
 $("#IDOFIMAGE").live('click', function (e) {
 $(".CLASSNAMEOFIMAGE").live('click', function (e) {

Hope this solves your problem.
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.


Author Comment

ID: 36964683
I'm sorry, I don't think I am explaining myself clearly.

The issue is not with adding a click handler to the imagebutton, that is already taken care of. I have included full example code below. Please consider the following situation.

Please run the example below after creating the SQL Table (tblExample) and inserting the appropriate values (pic included). You will be presented with a text box and a button. The button will filter the GridView's datasource's name field based on the textbox's contents.

Each GridView row contains an imagebutton (no image, so just text that says 'click me').

Click this text, you will be presented with a dialog box asking if you want to send an email to [name] at [email]. This works great! Looks good! Ok. Now filter the listing. For example, type 'jane' in the textbox and click Filter. Now click the imagebutton (click me). The javascript dialog box will still reference the ORIGINAL innerHTML values of the given row, i.e.:

Load the project. Click row 4's 'click me' button. The dialog box will read 'Are you sure you wish to send a notification email to jane at'. Click OK or Cancel, whichever.

Type 'jane' into the textbox and click Filter. Click row 1 of the filtered GridView's 'click me' button. The dialog box will read 'Are you sure you wish to send a notification email to john at' when it SHOULD READ 'Are you sure you wish to send a notification email to jane at'

If you take out the updatepanel everything works fine, but I would very much like to keep the panel. How can I get the javascript to reference the proper innerHTML values AFTER a filter event?

I really hope this makes sense.

Thank you in advance. Points upped
CREATE TABLE [dbo].[tblExample](
	[id] [int] IDENTITY(1,1) NOT NULL,
	[name] [varchar](100) NULL,
	[email] [varchar](100) NULL

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">
<head id="Head1" runat="server">
<script type="text/javascript"">

    var gridViewCtlId = "GridView1";
    var gridViewCtl = null;
    var curSelRow = null;
    var curRowIdx = -1;

    function getGridViewControl() {
        if (null == gridViewCtl) {
            gridViewCtl = document.getElementById(gridViewCtlId);

    function onGridViewRowSelected(rowIdx) {
        var selRow = getSelectedRow(rowIdx);
        if (null != selRow) {
            curSelRow = selRow;
            var cellValue = getCellValue(rowIdx, 0);

    function getSelectedRow(rowIdx) {
        return getGridRow(rowIdx);

    function getGridRow(rowIdx) {
        if (null != gridViewCtl) {
            return gridViewCtl.rows[rowIdx];
        return null;

    function getGridColumn(rowIdx, colIdx) {
        var gridRow = getGridRow(rowIdx);
        if (null != gridRow) {
            return gridRow.cells[colIdx];
        return null;

    function getCellValue(rowIdx, colIdx) {
        var gridCell = getGridColumn(rowIdx, colIdx);
        if (null != gridCell) {
            return gridCell.innerHTML;
        return null;

    function Notify(rowindex2) {
        name = getCellValue(rowindex2, 1);
        email = getCellValue(rowindex2, 2);
        if (confirm("Are you sure you wish to send a notification email to " + name + " at " + email + "?")) {
            return true;
        else {
            return false;
    <form id="form1" runat="server">
        Example page<br />
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        <br />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                <asp:Button ID="Button1" runat="server" Text="Filter" />
                <br />
                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
                    DataSourceID="SqlDataSource1" EnableModelValidation="True">
                        <asp:BoundField DataField="id" HeaderText="id" InsertVisible="False" 
                            ReadOnly="True" SortExpression="id" />
                        <asp:BoundField DataField="name" HeaderText="name" SortExpression="name" />
                        <asp:BoundField DataField="email" HeaderText="email" SortExpression="email" />
                        <asp:TemplateField HeaderText="button">
                                <asp:ImageButton ID="ImageButton1" runat="server" AlternateText="click me" 
                                    onclick="ImageButton1_Click" onprerender="ImageButton1_PreRender" />
                <br />
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                <br />
                <br />
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
                    ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
                    FilterExpression="[name] like '%{0}%'" 
                    SelectCommand="SELECT * FROM [tblExample]">
                        <asp:ControlParameter ControlID="TextBox1" ConvertEmptyStringToNull="False" 
                            Name="newparameter" PropertyName="Text" />
        <br />

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page 
    protected void Page_Load(object sender, EventArgs e)


    protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
        GridViewRow row;
        ImageButton ib;
        string name;
        string email;

        ib = (ImageButton)sender;
        row = (GridViewRow)ib.NamingContainer;

        name = (string)(GridView1.Rows[row.RowIndex].Cells[1].Text.ToString());
        email = (string)(GridView1.Rows[row.RowIndex].Cells[2].Text.ToString());

        Label1.Text = "E-mail sent to " + name + " at " + email;

    protected void ImageButton1_PreRender(object sender, EventArgs e)
        GridViewRow gvr;
        ImageButton imgbtn;

        imgbtn = (ImageButton)sender;
        gvr = (GridViewRow)imgbtn.NamingContainer;

        imgbtn.Attributes.Add("onclick", "javascript:return Notify(" + (Convert.ToInt32(gvr.RowIndex.ToString()) + 1) + ");");

Open in new window


Accepted Solution

alright earned 0 total points
ID: 36981588

gridViewCtl = null;

to the Notify() function has solved my issue. i.e.,

    function Notify(rowindex2) {
        gridViewCtl = null;
        name = getCellValue(rowindex2, 1);
        email = getCellValue(rowindex2, 2);
        if (confirm("Are you sure you wish to send a notification email to " + name + " at " + email + "?")) {
            return true;
        else {
            return false;

Author Closing Comment

ID: 37010567
Thank you everyone who provided input

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System ( introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question