Home/ Questions/Q 580757
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T14:30:24+00:00

I’m just starting to playing around on a Mac for the first time and

  • 0

I’m just starting to playing around on a Mac for the first time and I 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:

<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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0