jQuery script not working when page viewed on localhost

Question

I'm just starting to playing around on a Mac for the first time and have created a very simple html page that uses jQuery to do a simple text swap when an h1 tag is clicked.

When I don't view the page through the webserver and just open it directly in Safari (file:///Applications/xampp/xamppfiles/htdocs/test/mypage.html) it works as expected. However, when I try to view through Apache (http://localhost/test/mypage.html) it doesn't work.

Here's the code (obviously I changed the tags to use brackets instead of less-than & greater-than.

[html]  
    [head]  
        [title]My Awesome Page[/title]  
        [script type="text/javascript" src="jquery.js"][/script]  
        [script type="text/javascript" charset="utf-8"]  
            function sayHello()  
            {   $('#foo').text('Hi there!');  
            }  
        [/script]  
    [/head]  
    [body]  
        [h1 id="foo" onclick="sayHello()"]Click me![/h1]  
    [/body]  
[/html]  

Am I missing something on the Mac? Wouldn't be an Apache setting since its client-side code.. right?

I should probably also mention that I loaded XAMPP to run Apache and MySQL. I have tested Apache to ensure its working using a simple PHP file.

Steve

Answer 1

Use Firebug and access the page. One things that might be a culprit is that the web server cannot open jquery.js file because of file permission. Firebug will show if the jquery loaded in page, even you can add the jQuery code on-the-fly in the Console tab.

If you access it using Safari, use Web Inspector and see the if any error showed in Console tab.

One last thing, make a habit to avoid onclick, do this instead:

<script type="text/javascript" charset="utf-8">
  function sayHello()
  {
    $('#foo').text('Hi there!');  
  }
  //wait DOM loaded
  jQuery(function($){
    $('#foo').click(function(){
      sayHello();
    });  
  });
</script>

Also, it's better to put the js code near the page end, before </body>, so it would not block concurrent page element's loading.