Solved

J query autogrow only runs when page is first loaded

Posted on 2010-08-22
5
592 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
[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
  • 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

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…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Nobody understands Phishing better than an anti-spam company. That’s why we are providing Phishing Awareness Training to our customers. According to a report by Verizon, only 3% of targeted users report malicious emails to management. With compan…

733 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