CodeIgniter routing problem. (appends ajax route to existing url)

Question

I'm trying to perform an AJAX-request in a view, the user gives some input which is sent to the server with AJAX and the function it's supposed to go to is routed with CodeIgniters routes.

This is the view I'm currently standing in while making the request.

http://localhost:8888/companies/list

In my route config I've set this route below to handle the AJAX-request, which should be able to come from any view and still be able to go to the route I've specified.

$route['test_ajax'] = "ajax/test_ajax";

So the request should go to the "ajax"-controller and use the function "test_ajax", which should make the POST-url look like this.

POST http://localhost:8888/test_ajax

But instead what I get is the current URL I'm standing at, and the route I've specified appended to the URL crashing my response from the AJAX-request completely since it didn't even go close to the function it's supposed to. The POST-url I get looks like this.

POST http://localhost:8888/companies/test_ajax

Notice how the parameter of /companies was removed. The argument /list was lost somewhere, al though if I add a trailing slash after the list I get the list argument in the URL as well.

So what just happened is that the POST tries to go to the companies-controller and look for the function test_ajax which is defined in the ajax-controller and not in the companies-controller. This error keeps occuring no matter what URL I'm at, and it always follows the same pattern. It keeps appending my route-URL to the existing URL instead of routing correctly.

So what could be causing the routing to behave this way, is there any setting that's accidently enabled or anything? Because I know I've got this to work hundreds of times in previous projects.

Thanks in advance.

Answer 1

It is because your Javascript is using the current directory as the base, and appending the AJAX URL to it. Because you are (to the client-side at least) in the companies directory, it appends your URL onto this.

The solution, if your Javascript is inline, is to just use the base_url() PHP function wihtin the code ...

var url = '<?= base_url(); ?>test_ajax/'

If your Javascript is not inline, you can declare a global variable at the top of your HTML document using the PHP function...

var BASE_URL = '<?= base_url(); ?>'

And use it everywhere else in your Javascript ...

var url = BASE_URL + 'test_ajax/'

Alternatively, you could just hardcode your base URL, but that could get real messy real quick.

Answer 2

Turns out, CodeIgniter interpreted this as a relative link due to the fact that there was no heading slash. CodeIgniter User-Guide states that no heading or trailing slashes should be written in the routes config.

What solved this though was adding a heading slash in the java-URL.

$.ajax({
    url: "/test_ajax",
    type: "POST",
    data: data,
    success: function(data){
        console.log(data);
    }
});

This forces CI to interpret this as a absolute URL and gives me the URL I was looking for.

POST http://localhost:8888/test_ajax