Question

I would like to know, which is the best way to write an url in an external javascript file.
Example:
I have a javascript which execute an ajax call like:

$(function(){
    $('#myButton').click(function(){
        $('#content').html($.get('/my-controller/myaction'));
    });
});

In this case I have to hard code the url for the controller in my javascript file.
I’m using grails, and it have a nice way to create the urls, and I would like to use it (in case a controller change url I don’t have to search all over the javascript files to change them)
What can be the best approach to do it?
Create a controller to serve a view that is a javascript file with all the url needed can be a good solution?
Is there a better way?

Answer 1

What about coding url inside your html instead ?

If the click trigger is a link simply use the href attribute :

<a href="/my-controller/myaction" id="myButton">Click</a>

$(function(){
    $('#myButton').click(function(){
        var url = $(this).attr('url');
        $('#content').html($.get(url));
    });
});

And if the click trigger is a button or something else , use the data-X attribute :

<button id="myButton" data-url="/my-controller/myaction">Click</button>

$(function(){
    $('#myButton').click(function(){
        var url = $(this).data('url');
        $('#content').html($.get(url));
    });
});

It nicely separate JS and data and could be usefull (at least for the link) when JS is disabled.