How to use jQuery AJAX in ASP.net master page?

Question

I have an ASP.net web application with a master page. In the menu bar of my master page, there is a search function where a user types in a query and clicks a button. When the button is clicked, the user's browser navigates to a page that shows search results. This funcitonality works great.

However, I decided to use jQuery AJAX and jQuery Autocomplete to make the program easier to use. The search works fine from http://example.com/page1.aspx and http://example.com/page2.aspx, but it doesn't work from http://example.com/subdirectory/index.aspx.

Here is my javascript code to perform the autocomplete: (from the master page)

function setupSerialNumberAutocomplete(id) {
    $(id).autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "DeviceSelection.aspx/getDeviceFieldAutocomplete",
                data: "{ 'text': '" + escape(request.term) + "', 'field': 'SerialNumber' }",
                dataType: "json",
                type: "POST",
                contentType: "application/json",
                dataFilter: function(data) { return data; },
                success: function(data) {
                    response($.map(data.d, function(item) {
                        return {
                            value: item
                        }
                    }))
                },
                error: function(xhr, status) {
                    var exception = eval("(" + xhr.responseText + ")");
                    $("#divStatus").html("Error fetching registration codes list: " + xhr.statusText + " - " + exception.Message + ".");
                }
            }); //end - ajax
        },
        minLength: 2,
        focus: function(event, ui) {
            $(id).val(ui.item.value);
            return false;
        },
        select: function(event, ui) {
            $(id).val(ui.item.value);
            return false;
        }
    }); 

It's a jQuery AJAX call to DeviceSelection.aspx/getDeviceFieldAutocomplete, a web service call in my ASP.net code. DeviceSelection.aspx is located at http://example.com/DeviceSelection.aspx, so I presume that the problem is that when a user accesses http://example.com/subdirectory/index.aspx and types in a query, it tries to call the web service at http://example.com/subdirectory/DeviceSelection.aspx.

How can I make this work?

Answer 1

Change it to this:

...
$.ajax({
    url: "/DeviceSelection.aspx/getDeviceFieldAutocomplete",
    data: "{ 'text': '" + escape(request.term) + "', 'field': 'SerialNumber' }",
    dataType: "json",
...

The "/" in front says that the URL is relative to the domain (rather than relative to the current page).

Answer 2

Can we get something relative to the virtual directory?

What about if you were to <%= Request.ApplicationPath %> in the code for the URL and provide an absolute path? Similarly you could resolve the path using a client-resolver (I forget the exact syntax, but it's there)