Solved

J query autogrow only runs when page is first loaded

Posted on 2010-08-22
5
590 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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

IntroductionWhile developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET po…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
This Micro Tutorial will teach you how to censor certain areas of your screen. The example in this video will show a little boy's face being blurred. This will be demonstrated using Adobe Premiere Pro CS6.
Established in 1997, Technology Architects has become one of the most reputable technology solutions companies in the country. TA have been providing businesses with cost effective state-of-the-art solutions and unparalleled service that is designed…

776 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