jQuery Ajax call not working in seperate .js file

Question

I have an asp.net application with a master file that includes the jquery.js file.

Then I have another page that uses this master page and subsequently has it's own jquery code.

Now I tried moving this code to an external file and then simply include the file in my .aspx file, which should work, and it does, partially. It triggers button clicks etc, however once it reaches my ajax call the .js file fails.

The ajax function looks like this:

function setGridData() {
    startNumber = (pageNumber * displayCount) + 1;
    endNumber = (pageNumber + 1) * displayCount;

    return $.ajax({
        url: '../WebServices/GridViewService.asmx/CreateViewHtmlFromObjectType',
        data: '{ "queryType": "' + $("#<%= ObjectType.ClientID %>").val() + '", "pageNr": ' + pageNumber + ', "displayCount": ' + displayCount + ', "searchKeys": "' + searchKeys + '", "searchValues": "' + searchValues + '", "orderBy": "' + OrderBy + '", "orderColumn": "' + OrderColumn + '" }',
        type: 'POST',
        contentType: 'application/json',
        dataType: "json",
        cache: false
    }).done(function (data) {
        objectCount = data.d[1];
        $("#<%= SearchBoxes.ClientID %>").val(data.d[2]);
        searchKeys = data.d[2];
        refreshGrid(data.d[0]);
        setPrevSrchStates();
    });
}

So let's say I do this:

$(document).ready(function () {
    //load initial data
    setGridData();
}

This code works perfectly fine when I move it back into the actual file so I'm not sure what is going on.

I have been reading a bit and as I read most of similar case are not because of the actual js code. So if it's not then what it is? And how do I fix it?

Answer 1

$("#<%= SearchBoxes.ClientID %>")

ClientID will not work in external Javascript File. You can set the ClientIDMode = Static in Aspx page and access the Id directly as $("#SearchBoxes") .

Update all such cases. Hope this helps.