Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 600
  • Last Modified:

J query autogrow only runs when page is first loaded

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
iftech
Asked:
iftech
  • 3
  • 2
1 Solution
 
Albert Van HalenAnalyst developerCommented:
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
 
iftechAuthor Commented:
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
 
iftechAuthor Commented:
Hi again

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

thanks again
John
 
0
 
Albert Van HalenAnalyst developerCommented:
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
 
iftechAuthor Commented:
Thanks a lot for the help and information.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now