How to use jQuery ajax requests to trigger a code behind event handler

Question

I have this ajax panel:

<telerik:RadAjaxPanel ID="rap" runat="server">
    ...
    <-- Contains several Hidden fields -->
</telerik:RadAjaxPanel>

In my code behind I have an event handler to handle all ajax requests on the panel with the following signature:

Private Sub rap_AjaxRequest(sender As Object, e As Telerik.Web.UI.AjaxRequestEventArgs) Handles rap.AjaxRequest

I am successfully able to invoke the ajax requests from Javascript like this:

var panel = $find('<%=rap.ClientID%>');
panel.ajaxRequest();

The method calling the ajax request need the value of one of the hidden fields which gets set in the code behind. Doing it like this doesn't push the value through to the client correctly because it is asynchronous. I am trying to use jQuery to trigger the request synchronously like this:

var panel = $find('<%=rap.ClientID%>');
$.ajax({
    async: false,
    context: panel
}).done(function() {
    // Handle the rest of the function if the ajax call succeeded
});

When I step through the code I find that the ajax call succeeds as my .done function is run. However, the method in the code behind to handle the request never gets triggered. How can I get this call to properly trigger the event being handled by my code behind?

I think your supposed to use $find, not $.find. the latter is a jquery method that looks for elements. the $find method gets the javascript object associated to the ajax panel. Then calling .ajaxRequest should fire the request handler event in server side — Eric
– Eric, Commented Jul 10, 2014 at 17:33
oh, i see, using the ajax method doesn't fire the ajaxRequest handler. That's only fired when calling .ajaxRequest(). Try putting an event handler for the ajax panel's end request client event and see if you can then handle what you need to there. As long as your hidden field is inside your ajax panel, it should be updated. — Eric
– Eric, Commented Jul 10, 2014 at 19:07

Eric · Accepted Answer · 2014-07-10 19:20:13Z

1

I created a working example demonstrating what I "think" you're trying to do. Try this.

javascript:

<script>
    function submitViaAjax() {
        var rap = $find('<%=rap.ClientID%>');

        rap.ajaxRequest();
    }

    function rap_onResponseEnd(sender, arg) {

        alert(document.getElementById('<%=hdnValue.ClientID%>').value);
    }
</script>

aspx

<telerik:RadAjaxPanel ID="rap" runat="server"
        ClientEvents-OnResponseEnd="rap_onResponseEnd">

    <asp:HiddenField ID="hdnValue" runat="server" />

    <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="return submitViaAjax();" />

</telerik:RadAjaxPanel>

code behind:

Protected Sub rap_AjaxRequest(sender As Object, e As Telerik.Web.UI.AjaxRequestEventArgs) Handles rap.AjaxRequest
    hdnValue.Value = "123456"
End Sub

answered Jul 10, 2014 at 19:20

Eric

9501 gold badge6 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use jQuery ajax requests to trigger a code behind event handler

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related