Question

This is probably very simple, but i’ve been stuck for a while.

I have a user-control which is calling a method like this:

 $(document).ready(function () {
        $("#myabtags").tagit({
            tagSource: function (request, response) {
                $.ajax({
                    type: "POST",
                    url: "Services/ForumOperationService.svc/GetTags",
                    datatype: "json",
                    contentType: "application/json; charset=utf-8",
                    data: '{"prefix":"' + request.term + '"}',
                    success: function (data) {
                        response(data.GetTagsResult);
                    }
                });
            }
        });
    });

However, this user control is used several places on my website. For instance at root, /Admin/ and several others.

I would want to do something like:

url: "~/Services/ForumOperationService.svc/GetTags"

How do you do that in jQuery ?

Attemps:

Putting slash in front, like

url: "/Services/ForumOperationService.svc/GetTags"

That doesn’t work. I get a 404 error back: http://localhost:16481/Services/ForumOperationService.svc/GetTags" (gives 404).

Instead it should be

http://localhost:16481/Client/Services/ForumOperationService.svc/GetTags"

Answer 1

If your application is always in the same location, use an absolute path ("/Services/ForumOperationService.svc/GetTags"). However, if you deploy the same codebase to multiple sites, which may have different root paths, I use this trick:

It works like this: I assume all JS scripts for my application are in a folder, such as Scripts. I then have a common JS file that has utilities, including a place to keep the absolute root URL and a method to make absolute URLs. Then I search for a script block with that src, and extract the root URL.

(function($)
{
    $.myapp = {};
    var $a = $.myapp;

    $.extend($a, {
        rootUrl: '',
        makeAbsoluteRootPath: function(path) {
            return path.replace('~/', $a.rootPath);
        }
    });

    var tag = $('script[src*="scripts"]').first();
    if (tag.length > 0) {
        var url = tag.attr('src').replace(/\/?(scripts).+$/i, '/');
        $a.rootPath = url;

    }

})(jQuery);

Now you can resolve the absolute root path dynamically:

url: $.myapp.makeAbsoluteRootPath("~/Services/ForumOperationService.svc/GetTags");

http://jsfiddle.net/HackedByChinese/tRMSj/