Registration of jquery on page load and subsequent ajax post back

Question

Working with the JQuery which should registered on first page load and subsequent Ajax post back. control on which this is getting applied is inside update panel. now what I am doing

Registering the same function both way like in document.ready and sys.application.add.load so its working for the control which are inside update panel and control which are outside the update panel.

$(document).ready(function () {

    CheckMaxlength();

    //If Text area is placed inside update panel then apply restriction for texarea size.

    Sys.Application.add_load(function () {

    CheckMaxlength();

    });
});

I want to know what is the exact way of working with the controls which are inside update panel and outside update panel

I am not 100% sure what you are asking. I think I get the basic idea. If you can clarify, I can probably answer this better for you. For example, what does CheckMaxLength() do? If you make your question more specific, I can make my answer more specific as well. — Steve Clanton, Oct 12 '15 at 04:10
CheckMaxlength() is used to restrict on given maxlength while typing. — Liquid, Oct 12 '15 at 11:07

Steve Clanton · Answer 1 · 2015-10-12T04:15:03.567

I am not positive what you want to do, but I suspect delegated events are probably your answer.

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers.

For example, you can add functionality to all textarea regardless of when they are added to the page with

$( "body" ).on( "click", "textarea", function() {
    alert( $( this ).val() );
});

The first benefit for your situation is that any textarea added to the update panel at any point will get the delegated functionality.

Further, if you wanted to target different behavior for the textare inside the update panel and that outside the update panel, you could do that also.

$("body").on('click', 'textarea', function () {
    alert( "outside" + $(this).val());
});

$(".update-panel").on('click', 'textarea', function () {
    alert("inside: " +  $(this).val());

    //stop the event from propagating up to the body
    event.stopPropagation(); 
});

Also, note that only the body and upload-container need to be ready when this code is run. It doesn't need the textarea to be there yet, so you don't have to run this inside Sys.Application.add_load.

score 0 · Answer 2 · answered Mar 07 '22 at 11:00

When using Controls inside an UpdatePanel, you will need to use the ASP.NET AJAX ClientScripts and events, such as Sys.Application.add_load for the load event listener.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
        $(document).ready(function () {
            console.log('$(document).ready()');
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

        <script>
            function CheckMaxlength() {

                console.log('Sys.Application.add_load()');

                // Sys.Application.remove_load(pageLoadHandler);  
            }
            Sys.Application.add_load(CheckMaxlength);
        </script>

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>

                <asp:Button ID="Button1" runat="server" Text="PostBack" />

            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

Sys.Application is loaded by the ScriptManager, you can only use it after the ScriptManager is ready and has loaded all the scripts.

Content updated with UpdatePanel is being taken care of by the ScriptManager. It raises the Sys.Application.add_load() client event after every update, see AJAX Client Life-Cycle Events

The Window: load event and jQuery .ready() would only trigger when the HTML DOM is ready. E.g. the page loaded for the first time. ASP.NET AJAX updates do not reload the document, they only update the content inside the UpdatePanel.

If you used Mutation Observer you might be able to detect changes in the DOM even if updating the content using UpdatePanels.

Registration of jquery on page load and subsequent ajax post back

2 Answers2