Solved

J query autogrow only runs when page is first loaded

Posted on 2010-08-22
5
591 Views
Last Modified: 2012-05-10
Hi all;

In an update panel I have a grid-view with and Item-template of a text-box with multi-line = true.
I'm loading the text value from and SQL_DB. Also using J query auto-grow to auto size the text
box based on the string returned from the db.

My issue is this: auto-grow works the first time the page is loaded. But when the grid-view goes into
edit mode auto grow does not work. And when the grid-view returns from cancel edit or update auto-grow doesn't work?
Any ideas?

Thaks
John  
<asp:Content ID="Content1" ContentPlaceHolderID="CPHHead" Runat="Server">

    <script src="../js/jQuery.min.js" type="text/javascript"></script>
    <script src="../js/jquery.autogrow.js" type="text/javascript"></script>

<style type="text/css">
    textarea.expanding {line-height: 18px;}
</style>
<script type="text/javascript">
    $(document).ready (function() {	
	    $('textarea.expanding').autogrow();							
    });
</script>
</asp:Content>

<asp:TemplateField HeaderText="Message" HeaderStyle-Width="50%" ItemStyle-Width="50%" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" >
                        <EditItemTemplate>
                            <asp:TextBox ID="txtEditMessage" runat="server" CausesValidation="true" CssClass="expanding" TextMode="MultiLine" ValidationGroup="vgEditMessages" Width="450px" Text='<%# Bind("Message") %>' />
                            <asp:RequiredFieldValidator ID="rfvMessage" runat="server" ValidationGroup="vgEditMessages" ControlToValidate="txtEditMessage" ErrorMessage="Please enter a message" Text="*" />
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:TextBox ID="txtMessage" runat="server" TextMode="MultiLine" Text='<%# Bind("Message") %>' CssClass="expanding"  Width="450px" ReadOnly="true" />
                        </ItemTemplate>
                        <ItemStyle CssClass="gridData" />
                    </asp:TemplateField>

Open in new window

0
Comment
Question by:iftech
  • 3
  • 2
5 Comments
 
LVL 19

Accepted Solution

by:
Albert Van Halen earned 500 total points
ID: 33499803
Indeed : document.ready will only fire once document is loaded.
There are 3 options to fix this.
1) Remove update panel (I guess that's not an option)
2) Trigger the script using the page request manager
3) Via a function called pageLoad. (This function will execute every time after a partial postback).
// put any of theses script somewhere in the document body but after the jquery reference

// add anonymous function to the page_loaded event;
// every time a partial postback occurs, the page_loaded is being executed and statements added to this event handler will execute
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function() {
    $('textarea.expanding').autogrow();
});

// method 2
function pageLoad() {
    $('textarea.expanding').autogrow();
}

Open in new window

0
 

Author Comment

by:iftech
ID: 33501203
Thanks Albert,

That did the trick I'm very new to j query.

I have two more quick questions.
1) Do I need both the Sys.WebForms.PageRequestManager request and the page load function or is it one or the other?
2) if I remove document.ready will it work without the either one of the scripts?

Thanks
John
0
 

Author Comment

by:iftech
ID: 33501535
Hi again

After some testing either works but is which is the better way?

thanks again
John
 
0
 
LVL 19

Expert Comment

by:Albert Van Halen
ID: 33502115
I prefer the first option (no, not removing the updatepanel ;-) the one with the PageRequestManager). Why ? If you work with usercontrols and jQuery is used in any of these you can't have Client side pageLoad functions in each of these controls because they override each other.

In essence page_loaded event does the same : executing script when the page / document is loaded.
The scriptmanager is typically for asp.net with updatepanels; it's always available (in the markup of your ASP.NET pages, it's above any update panel) and will take care of executing scripts ALSO at the first load of the page.

NB There are other ways as well.
I explained it in the following article : http://albertvanhalen.com/article/jquery_plugin_in_an_asp.net_updatepanel
0
 

Author Comment

by:iftech
ID: 33503084
Thanks a lot for the help and information.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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

I recently went through the process of creating a Calendar Control of events with the basis of using a database to keep track of the dates that are selectable, one requirement was to have the selected date pop-up in a simple lightbox.  At first this…
In .NET 2.0, Microsoft introduced the Web Site.  This was the default way to create a web Project in Visual Studio 2005.  In Visual Studio 2008, the Web Application has been restored as the default web Project in Visual Studio/.NET 3.x The Web Si…
Two types of users will appreciate AOMEI Backupper Pro: 1 - Those with PCIe drives (and haven't found cloning software that works on them). 2 - Those who want a fast clone of their boot drive (no re-boots needed) and it can clone your drive wh…
I've attached the XLSM Excel spreadsheet I used in the video and also text files containing the macros used below. https://filedb.experts-exchange.com/incoming/2017/03_w12/1151775/Permutations.txt https://filedb.experts-exchange.com/incoming/201…

808 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