Document.Ready() Is Not Working After Postback

Document.Ready() is not working after PostBack

This will be a problem with partial postback. The DOM isn't reloaded and so the document ready function won't be hit again. You need to assign a partial postback handler in JavaScript like so...

function doSomething() {
   //whatever you want to do on partial postback
}

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(doSomething);

The above call to add_endRequest should be placed in the JavaScript which is executed when the page first loads.

After Post Back my jQuery code not working

Your initialization will run only on document ready (not on postback). Since you place your control inside UpdatePanel, anything will updated after postback.

Try with the below suggestion

You need to recreate the Jquery Codes on postbacks like given below

<script type="text/javascript"> 
    $(document).ready(function() {
        //jquery code
    });

    var parameter = Sys.WebForms.PageRequestManager.getInstance();

    parameter.add_endRequest(function() {
        //jquery code again for working after postback
    });
</script>

this is the solution got once i got the same issue and worked fine for me..check

Updated:

If above code give error like Sys undefined then try below code.

<script type="text/javascript"> 

$(document).ready(function () {

    //jquery code

    var parameter = Sys.WebForms.PageRequestManager.getInstance();

    parameter.add_endRequest(function () {
        //jquery code again for working after postback
    });
});

</script>

Async postback doesn't cause document.ready to be executed

As I did, you're going to hate the prescribed Microsoft answer. The "prescribed" answer is to use the PageRequestManager to setup a request handler. This request handler is (then) executed after each partial-postback is completed.

The Request Handler Example:

<script id="events" type="text/javascript">

    jQuery(document).ready(function() {

        // Your normal code goes here
        setupSomething();
        initializeSomethingElse();

        // Setup your partial-postback event handler.
        // This is used to rewire all events since all are 'lost' after partial-postback.
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(requestHandler);
    });

    ///<summary>partial postback event handler. Executed after the partial postback is completed. Clears modal popup textboxes</summary>
    ///<param name="sender"></param>
    ///<param name="args">http://www.asp.net/ajax/documentation/live/ClientReference/Sys.WebForms/EndRequestEventArgsClass/default.aspx</param>
    function requestHandler(sender, args) {

        if (args.get_error() == undefined) {

            // Your normal code goes here
            setupSomething();
            initializeSomethingElse();
        }
        else
            alert(args.get_error()); // Do something
    }
</script>

That Brings Us To The Simple Answer:

Why not initialize your user-control explicitly from your code-behind and keep that initializing JavaScript within your user-controls HTML (itself).

void YourUserControl_PreRender(object sender, EventArgs e)
{
    try
    {

    }
    catch (Exception ex)
    {

    }
    finally 
    {
        // Do this
        ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "registerInitializer", buildInitializer(), true);
    }
}

Once rendered, the "buildInitializer" logic says, "If this function exists on the client...call it." And...it works every time.

private string buildInitializer()
{
    StringBuilder javascript = new StringBuilder();

    javascript.Append("if (window.initializeMyControl) {");
    javascript.Append("if(typeof window.initializeMyControl == 'function') { initializeMyControl(); }");
    javascript.Append("}");

    return javascript.ToString();
}

Now Your User-Controls Initialization Can Live In The User-Control Where It Should Be:

<script type="text/javascript">
    function initializeMyControl() {

        // Your normal code goes here
        setupSomething();
        initializeSomethingElse();
    }
</script>

After post back jquery not working

As you are using jQuery and you are handling your data using jQuery ajax, why don't you put a separate placeholder (that deosn't use update panel). And then your code will difinitly work
e.g define a placeholder like this;

<asp:Content ID="Content3" ContentPlaceHolderID="RemoveUpdatePanelPlaceHolder" runat="Server">
   // your content goes here
</asp:Content>

After postback my JavaScript function doesn't work in ASP.NET

Since you're using an UpdatePanel, the part of the DOM that you've attached your event handler to is getting dropped and recreated after the postback. This has the effect of removing any event handlers that were attached by jQuery when the page first loaded.

When you postback only part of the page, the jQuery $(function() {}); doesn't fire again, so your handlers never get reattached.

Here's a related question that shows how to resubscribe your events when the UpdatePanel refreshes.

Postback and Document.ready

You can define hidden fields to have the coordinates values for you.

<asp:HiddenField runat="sever" ID="hdnXAxis"  Vlaue="Your Default Value" />
<asp:HiddenField runat="sever" ID="hdnYAxis"  Vlaue="Your Default Value" />

On Postback:

hdnXAxis.Value= txtXAxis.Text;
hdnYAxis.Value= txtYAxis.Text;

JS:

$( document ).ready(function() {
var xAxis = $('#<%= hdnXAxis.Client%>').val();
var yAxis = $('#<%= hdnYAxis.Client%>').val();
        var map = L.mapbox.map('map');
        var oldZoom = map.zoomControl;
        oldZoom.removeFrom(map);
        new L.Control.Zoom({ position: 'topright' }).addTo(map);
        map.addLayer(L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png'));
        map.setView([xAxis, yAxis], 6); // this runs on document ready, but also sets 
        var markerLayer = L.mapbox.markerLayer()
        .addTo(map);
    });

This is not tested but something like this may solve your problem.

---

Related Topics