Improve company productivity with a Business Account.Sign Up

x
?
Solved

J query autogrow only runs when page is first loaded

Posted on 2010-08-22
5
Medium Priority
?
602 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 2000 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

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

In an ASP.NET application, I faced some technical problems. In this article, I list them out and show the solutions that I found.  I hope it will be useful. Problem: After closing a pop-up window, the parent page should be refreshed automaticall…
Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
In the video, one can understand the process of resizing images in single or bulk. Kernel Bulk Image Resizer is an easy to use tool for resizing large number of images. One can add and resize multiple images with this tool in single go. The video sh…
To export Lotus Notes to Outlook PST or Exchange and Domino Server files to Exchange Server or PST files with ease, go for Kernel for Lotus Notes to Outlook conversion tool. Through the video, you can watch the conversion process. A common user with…

588 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