Solved

Reload javascript external file after asynchronous postback with update panel

Posted on 2010-08-21
6
1,723 Views
Last Modified: 2012-05-10
Hi all!
I have an external javascript on one content .aspx page, and is referenced like this:
<script src="Scripts/readGridView.js" type="text/javascript"></script>

Open in new window

and in some part of the content page I have an update panel which has a form with a search button and the results are shown in a GridView, the javascript file has a code used to read the contents of a clicked row in the GridView and set this values to some other controls of the form like textboxes or dropdownlists,  the problem that I am facing is that when I not use the update panel the javascript works well all the time, but since the moment I adeed the update panel to avoid full screen refreshing the script only works the first time the page loads because when I do another search on the form and the page do the asynchronous postback the scripts stop working and when I click the row in the GridVIew the values are not obtained anymore, I have tried a variety of solutions like put in the search button ClientScript.RegisterStartupScript and the script file but don't seem to work, I hope you guys can help me, thanks in advance.
0
Comment
Question by:kefka78
  • 3
  • 3
6 Comments
 
LVL 6

Expert Comment

by:thaytu888888
Comment Utility
- Hmmm, please post the content.aspx and codes behind of it so i can have more informations.
- Try to put the script outside your update panel first.
0
 

Author Comment

by:kefka78
Comment Utility
Ok, as you say I tried with the javascript outside the update panel and the results where the same, I replicate the problem in a  new solution so I can upload the files here without confidential info the default.aspx code and the default.aspx.cs file, thanks in advance for the help.


<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="TestGridView._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script language="javascript" type="text/javascript">
    var gridViewCtlId = '<%=gvTest.ClientID%>';
    var gridViewCtl = null;
    var curSelRow = null;
    var curRowIdx = -1;
    var texBx = '<%=TextBox1.ClientID %>';
    var columnCount = null;

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

    function onGridViewRowSelected(rowIdx) {
        var selRow = getSelectedRow(rowIdx);
        if (null != selRow) {
            curSelRow = selRow;
            var totalCol = selRow.cells.length;
            var tBox = document.getElementById(texBx);
            tBox.value = "";

            var i;
            for (i = 0; i < totalCol; i++) {//curSelRow.cells.count; i++) {
                var cellValue = getCellValue(rowIdx, i);
                //                alert(cellValue);

                tBox.value += cellValue;
            }
        }
    }


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

    function getGridRow(rowIdx) {
        getGridViewControl();
        if (null != gridViewCtl) {
            column = gridViewCtl.rows[rowIdx].cells.length;
            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.innerText;
        }
        return null;
    }
</script>	
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
    <div id="printButton">
        <asp:Button ID="btnPrintContent" class="noPrint" runat="server" Text="Imprimir" 
            CausesValidation="false"  onclick="btnPrintContent_Click" />
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <br />
        <br />
        <asp:GridView ID="gvTest" runat="server" OnRowCreated="OnRowCreated">
        </asp:GridView>
        <br />
        <asp:HiddenField ID="ObjectContainer" runat="server" />
    </div>
    </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

Open in new window

Default.aspx.cs
0
 
LVL 6

Accepted Solution

by:
thaytu888888 earned 500 total points
Comment Utility
- There are some problems with your codes:
1. Use e.Row.RowIndex instead of m_iRowIdx
2. Rewrite your getGridViewControl function because when you search the second time, the update panel get replaced by new HTML from the server and the javascript loss all contact with gridview, textbox...etc inside the update panel, this may be the root core cause your problem
3. Put the javascript in the bottom of the page because "var gridViewCtlId = '<%=gvTest.ClientID%>';
var texBx = '<%=TextBox1.ClientID %>';" will be executed when the gvTest and the TextBox1 still not loaded into the form.
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 6

Expert Comment

by:thaytu888888
Comment Utility
- Here is the code example:
function getGridViewControl() {
      var gridID= '<%=gvTest.ClientID%>';
      gridViewCtl = document.getElementById(gridID);
}

Open in new window

0
 

Author Comment

by:kefka78
Comment Utility
Thank you very much!, the application is now working correctly, I appreciate you help.
0
 

Author Closing Comment

by:kefka78
Comment Utility
Thanks for all the help.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

744 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now