jQuery Ajax Callback does not get Context

Question

I have a HTML page as shown in http://jsfiddle.net/Lijo/zPAfF/6/ . When “searchReportButton” button is clicked a javascript function “checkSession” is invoked. Inside the “checkSession” function there is a jquery.ajax call to a web method listed below. The web method is working fine and I am able to alert the result as “ACTIVE” in javascript success callback.

I have set the context as this.

 context: this,  //CONTEXT

I am expecting the following code to alert the “Loading…” text. The assumption is this will work in the success callback since the context is set. But it not showing the text.

if (result == "ACTIVE") 
{       
    var selectedTable = $(this).closest('.dateFilter').siblings('.sentDatesSection').find('.reportSentDatesDiv');

    alert($(selectedTable).text());

}

QUESTION

What need to be corrected in order to get the context in the callback?

Web Method

    [WebMethod(CacheDuration = 0)]
    public static string CheckSessionExpiry(string empID)
    {

        return "ACTIVE";
    }

enter image description here

jQuery

$(document).ready(function() {
    var searchReportButton = $('.searchReportButton');
    searchReportButton.click(function() {
        var selectedTable = $(this).closest('.dateFilter').siblings('.sentDatesSection').find('.reportSentDatesDiv');
        alert($(selectedTable).text());
        checkSession();
        return false;
    });
});

function checkSession() {
    var empID = 101;
    alert('Function Reached');
    $.ajax({
        type: "POST",
        url: "Error.aspx/CheckSessionExpiry",
        data: '{"empID": "' + empID + '"}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        context: this,
        //CONTEXT
        success: handleSessionResult
    });
}

function handleSessionResult(result) {
    if (result.hasOwnProperty("d")) {
        result = result.d
    }
    if (result == "ACTIVE") {
        var selectedTable = $(this).closest('.dateFilter').siblings('.sentDatesSection').find('.reportSentDatesDiv');
        alert($(selectedTable).text());
    }
}

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title>Report List </title>

</head>
<body>
<form>

<div id="wrapper">
    <div id="container">
        <div id="centralContainer">
            <div id="mainContainer">
                <div id="contentHolderDiv" class="contentHolderDiv">
                    <div id="searchContainer" class="searchContainer">
                        <div id="entryValues" class="repeaterContainer">
                            <div class="repeaterTableBorder">
                                <div class="repeaterRecord">
                                    <div class="repeaterIdentifier">
                                        <div class="reportTitle">
                                            Daily Financial Transaction:
                                        </div>
                                    </div>

                                    <div class="viewLogTitle">
                                        <div class="viewLogText">
                                            View Report Log
                                        </div>
                                    </div>
                                    <div id="reportLog" class="reportLog">
                                        <div class="dateFilter">
                                            <div class="filterElements">
                                                <div class="filterContents">
                                                    <input type="submit" name="ctl00$detailContentPlaceholder$repReports$ctl00$btnSubmit"
                                                        value="Get Reports" id="detailContentPlaceholder_repReports_btnSubmit_0" class="searchReportButton" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="sentDatesSection">
                                            <div class="reportSentDatesDiv">
                                                <p>
                                                    Loading...</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="clear">
                    </div>
                </div>
            </div>
            <div class="clear">
            </div>
        </div>
    </div>
</div>
</form>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.js"></script>

Darin Dimitrov · Accepted Answer · 2012-12-02T15:21:05.223

Pass this as argument to the checkSession function:

checkSession(this);

and then:

function checkSession(context) {
    var empID = 101;
    alert('Function Reached');
    $.ajax({
        type: "POST",
        url: "Error.aspx/CheckSessionExpiry",
        data: JSON.stringify({ empID: empID }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        context: context,  //CONTEXT
        success: handleSessionResult

        }
    });
}

Also notice how I have fixed your $.ajax call to use the JSON.stringify method in order to ensure that the request is properly JSON formatted. Never, and I repeat, absolutely never use string concatenations (+ operator) to build JSON. The JSON.stringify method is natively built into all modern browsers. And if you have to support some browser that comes from the Mesozoic era such as IE6 or something you could reference the json2.js script to your page.

score 1 · Answer 2 · answered Dec 02 '12 at 15:21

1

Alternatively, you can use call.

checkSession.call(this);

Or, its sibling apply.

answered Dec 02 '12 at 15:21

Alexander

23,432
11
63
73

jQuery Ajax Callback does not get Context

2 Answers2

Linked