Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Reload javascript external file after asynchronous postback with update panel

Posted on 2010-08-21
6
Medium Priority
?
1,912 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 6

Expert Comment

by:thaytu888888
ID: 33494195
- 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
ID: 33495547
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 2000 total points
ID: 33507614
- 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 6

Expert Comment

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

Open in new window

0
 

Author Comment

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

Author Closing Comment

by:kefka78
ID: 33517918
Thanks for all the help.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
Suggested Courses

650 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