JQuery isn't recognising a #id selector, seems to be dependent on the URL

Question

I'm writing a Ruby on Rails app. The following jQuery code is included in the head tag of the index.html.erb file, which is the template for all pages on the site.

<script>
  $(document).ready(function() {
    $("#select_mailshot").click(function () {
      alert('mailshot');
      document.location.href = "/products/1";
    });
    $("#select_blog").click(function () {
      alert('blog');
      document.location.href = "/messages";
    });
    $("#select_contact").click(function () {
      alert('contact');
      document.location.href = "/contacts/1";
    });
  });
</script>

(the alert steps are in there for debugging)

The following html code in index.html.erb

<ul>
  <li id="select_mailshot">Mailshot</li>
  <li id="select_blog">Blog</li>
  <li id="select_contact">Contact us</li>
</ul>

The intention is that this effectively creates 3 buttons.

When clicking on any button from http://myurl.com/ it all works.

When clicking on any button from http://myurl.com/messages (get to this via the middle button) it all works

When starting from http://myurl.com/products/1 it all stops working (the alerts do not trigger). In fact when starting from http://myurl.com/anything/id it stops working.

I've been trying to solve this for hours now and the only difference between the working and non-working conditions is the url as far as I can see.

Can anyone shed any light as to what's going on here?

Answer 1

What does firebug tell you? Do you have javascript errors on the page? if so, what are they? Are you sure the jQuery library is included correctly in the deeper pages ( ie is it a relative path? )

Answer 2

Is this javascript inlined?

If not, then maybe the link is relative so when you try to load it from messages/40 you need ../script.js . Another solution is to use absolute URLs ( http://myurl/script.js ) or virtual (/script.js).

Answer 3

I was using FaceBox to create modal overlays and I couldn't figure out why I was having the same problem.

I turns out that the listener wasn't being attached to HTML elements until it was visible. (The items were available if I viewed source, but jQuery seemed not to attach a listener until it was visible.)

For anyone having the same problem, I'd suggest moving your click() code to a point where the HTML element you're attaching to is visible.

Also, I've found selecting by ID does give more problems than class. I have no idea why. (No, there were not duplicate IDs.)

Hope this helps someone with the same problem!

Answer 4

Thanks to cherouvim and digitaljoel.

This was due to javascript files being included relative to the current URL.

The following was included in the head tag

<script type="text/javascript" src="javascripts/jquery-1.3.2.js"></script>

I changed it to

<script type="text/javascript" src="/javascripts/jquery-1.3.2.js"></script>

(note the extra "/" in the src attribute) and everything works as expected.

I worked this out after checking the error logs on the server and in the browser.

Feeling a little dumb but a lesson well learned.