Problem with relative URLs and AJAX requests.

Hello.

I have a Rails app (3.0.3) that uses jQuery (1.4.4) to do some AJAX
requests. For example, when doing a AJAX request on a page like
"http://localhost:3000/users/3" with
$("div#profile_box").load("profile");
the browser always tries to fetch from "http://localhost:3000/users/
profile". It simply ignores the "3".
But when adding a trailing slash after the 3 then it uses"http://
localhost:3000/users/3/profile".
Why does it not work without the trailing slash? I reproduced this
under Chrome and Firefox (not tried any other browser). And this seems
to be indeed a client side problem (I watch the request on the browser
console).
I know, this is not very Rails specific, but I already posted the
problem in the jQuery forum without receiving any explanation yet. And
I know there are a lot of Rails people using jQuery, so the above
scenario is nothing special.
How do you provide the URL to the jQuery AJAX functions? Do you have
the same problem? (I reproduced it also under another system.).

Regards,
Kai

I have a Rails app (3.0.3) that uses jQuery (1.4.4) to do some AJAX
requests. For example, when doing a AJAX request on a page like
"http://localhost:3000/users/3" with
$("div#profile_box").load("profile");
the browser always tries to fetch from "http://localhost:3000/users/
profile". It simply ignores the "3".
But when adding a trailing slash after the 3 then it uses"http://
localhost:3000/users/3/profile".
Why does it not work without the trailing slash? I reproduced this

Pretend it's a file system... You are in the "users" directory. In that directory is a file called "3" and now you are asking for "profile". Without any slashes, it's going to assume that you want the file "profile" in the current directory which is "users" so you get "users/3".

It's more complicated than a file system though since you can't ensure a trailing slash. I might remove it. Apache might be configured to get rid of it, etc.

You can't prefix "profile" with a slash since that would pull up http://localhost/profile.

I think you're only option is to tweak the load() call... to pull in the value of document.location.href and append "profile" with a possible slash to separate them if it doesn't already exist. I don't know if jQuery/javascript has anything to make that simpler.

You might also be able to set the BASE HREF html tag, but that will most likely screw up all your image paths, etc...

-philip

Hm, that really sounds unhandy. As mentioned, I can simply use <a
href="profile">link</a> and the "profile" gets appended to the full
url. It doesn't matter in that case if there is a trailing slash or
not. Why does Javascript has that problem and standard HTML not?! Does
someone know of a good URL library for Javascript (or jQuery)?

Uuups, I just found out that HTML links behave the same way ... it
seems I am too pampered with Rails link helpers :wink: But I still wonder
what the easiest way would be to build correct URLs for Javascript
then.

Kai Schlamp wrote in post #976711:

Uuups, I just found out that HTML links behave the same way ... it
seems I am too pampered with Rails link helpers :wink:

Apparently so. If you don't understand relative URLs, you have no
business doing Web development.

But I still wonder
what the easiest way would be to build correct URLs for Javascript
then.

Use absolute URLs (the *_url helpers will produce these).

Best,

KaiSchlampwrote in post #976711:

> Uuups, I just found out that HTML links behave the same way ... it
> seems I am too pampered with Rails link helpers :wink:

Apparently so. If you don't understand relative URLs, you have no
business doing Web development.

Thanks for the suggestion :stuck_out_tongue:

> But I still wonder
> what the easiest way would be to build correct URLs for Javascript
> then.

Use absolute URLs (the *_url helpers will produce these).

That is not an option for Javascript files that live in public/
javascript, as those won't be generated. An option I guess would be to
set some kind of data-url tag and query that by using Javascript. But
I handle it the pure Javascript way now with a little helper function.

Kai,

I've gone through this same headache. I too wanted to use a helper
but couldn't. Have you considered using content_for in view and then
reference it in the <head> section of the layout to generate the
javascript?

I couldn't do it that way because I was doing AJAX calls so the <head>
section didn't change.

HTH,
Dan

Hi Dan ... sorry for the late reply.

I've gone through this same headache. I too wanted to use a helper
but couldn't. Have you considered using content_for in view and then
reference it in the <head> section of the layout to generate the
javascript?

Considered yes, but decided against as I would like to retain the
separation of the Javascript code.
I just use a little Javascript helper function that handles the URL
stuff. It works fine that way.

Best regards,
Kai