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
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 Improve this question edited Sep 28, 2015 at 13:29 Kyle 1,5782 gold badges20 silver badges49 bronze badges asked Jan 30, 2010 at 3:18 Steve SteppSteve Stepp 781 gold badge1 silver badge6 bronze badges1 Answer
Reset to default 3Use 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.