my website is working in chrome, firefox and IE8. But when it comes to IE7 it doesnt work.
Only the inline scripts are working, and the included ones, are not.
what cause the problem? thank you!
I tried following code:
<html>
<head>
<script src="http://www.domain.com/scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
alert("It works");
});
</script>
</head>
<body></body>
</html>
and it did work. A couple of reasons can be responsible for your problem:
The spaces in your URL
Some security options from your browser
Some security options from your network (content blocker). Have you tried to load the javascript file directly (paste the URL into adressbar)?
etc.
Related
I'm definitely not a newbie to scripting, but this just boggles my mind. I want to invoke a function on a button click, so I first wanted to grab the buttonclick event and test that with a simple window.alert. So I just wrote the html document below.
<!doctype html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sendButton").click(function(){
alert("clicked!!");
});
});
</script>
</head>
<body>
<form id="send-message-area">
<input type="button" id="sendButton" value="Send Message">
</form>
</body>
Unfortunately, nothing happens. At all. Since this is fairly simple code, I have no clue why this wouldn't work.
Your script tag to pull in jQuery is using the (Common|General) Internet Syntax Scheme. This tells the browser to use whatever scheme was used to load the page in loading the script. It is helpful for sites which respond to both http and https.
If you are viewing your file locally using the file:// scheme, then you should see an error that $ is not defined. This is because the script does not live at:
file://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
Please use this src in the script tag when loading locally:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
Path to src should be complete if you have hosted it somewhere.You have not added correct path to jquery library. Everything will work accordingly once you do that.
<script src="http://code.jquery.com/jquery-latest.js"></script>
Demo
According to your url starting with // the browser tries to load that file from your local file system if you're locally testing your site using an url like file://. In that case you're not loading jQuery, so the $ is undefined and your code never executed.
Use the script tag like that for local tests:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
If you run your site on a web server, the cdn-style starting with // will work again.
Code looks fine
I think you are testing in IE < 9 (jQuery 2.x not supporting IE 8)
Please change the browser or load jQuery version like 1.9 and test it
You have to update query script src to 'http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js'
I recommend to download the jQuery script then add it to your project locally instead of the remote one
use <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"> and practise to insert html tag
HTML:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sendButton").click(function(){
alert("clicked!!");
});
});
</script>
</head>
<body>
<form id="send-message-area">
<input type="button" id="sendButton" value="Send Message">
</form>
</body>
</html>
You are missing to include http:/ in your script src.
Either change your script tag like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
or download the Jquery file and refer locally.
Change your path to
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
and try to use jquery 1.10 for less than ie9 browser
<!--[if lt IE 9]><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><![endif]-->
<!--[if IE 9]><!--><script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!--<![endif]-->
I'm very new to html and trying to make a website. So far, I've got an html file that has the header for my site and I would like to use it in all the pages I create for the site using jQuery's load function.
So basically what I want to do is load Header.html into Page.html.
This is the code in Page.html:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Hello</title>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#Header").load("Header.html");
});
</script>
</head>
<body>
Hi
<div id="Header"></div>
</body>
</html>
Header.html looks something like this:
<div id="Header_Name">Adabelle Combrink</div>
<div id="Header_GameProgrammer">Game Programmer</div>
The only thing that comes up on the screen is "Hi" at the moment.
Looks good, apart from the backslashes in the src attributes should be forward slashes.
Is there any particular error you are getting?
Also, as has been pointed out, PHP would be better suited to this job.
<?php include 'header.php'; ?>
Aside from the accessibility question, there might also be a negative SEO impact.
Edit:
Assuming your path to jQuery is correct, then the code you posted should work (it does for me).
Things to try / be sure of:
You are running this on a server (i.e. not just opening the file in your browser, as this will fall foul of the same origin policy). Check that the address in your address bar doesn't start with file://
Make sure that the path to the jQuery library is correct
Make sure that Page.html and Header.html are in the same folder
Check your broswer's error console. Instructions.
you can use iframe for including html file into the div.
Otherwise you have to follow some server side include method.
like, in php <?php include("includes/header.php"); ?>
your code looks fine.
are you running the site on a web server, such as out of visual studio (iis express) ?
You can't run it locally. Ajax wont work that way.
Open your page in chrome, and press f12 to open up dev tools.
go to the network tab.
do you see the ajax request being fired on the load function?
by the way, regarding the header div,
a div is not a self-closing tag. Its a container. Its best that you close it using a closing tag.
Otherwise you might get unpredictable results in some browsers. ( I have not checked in a while, but it was that way a few years ago, probably in explorer 8)
jQuery(document).ready(function(){
jQuery.ajax({
url: 'header.html',
type: 'get',
success:function(data){
jQuery('#header_container').html(data);
}
});
});
<div id="header_container">....</div>
The content returned by the request will go inside the header_container div
Div elements require a closing div tag like so <div></div>.
there is no need to call small pieces of code from another js file, just write your code in the head element like so:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello</title>
<script type="text/javascript" src="../Scripts/jQuery.js"></script>
<script>
$(document).ready(function() {
$("#Header").load("../Templates/Header.html");
});
</script>
</head>
<body>
<div id="Header"></div>
</body>
</html>
Don't be afraid to ask for more info.
$.load() http://api.jquery.com/load/
I've never had a problem until recently, but for some reason when I link my JS files, they won't execute at all. jQuery works, but any files that require jQuery such as easing, and other concept files, they refuse to run in any browser on my machine.
But, here's the odd part. If I wrap all my code in 'script' tags within the HTML document, everything works fine; no issues, bugs, anything. (jquery.js is still linked to the document too).
I'm using Dreamweaver, which tells me they are correctly linked. I'm totally lost by this, I can't work it out.
Here's the HTML: http://jsbin.com/iyagub/1
I don't understand what could cause the JS files to not work.
I'm running it locally, but not on localhost, instead via Windows Explorer. I'm on Windows 8 64-bit. I'm not sure if this is a security issue, but I can't see how as I've said; it all worked fine before like any other project I've worked on.
Remember, if I paste any of the code from the linked JS files in to the HTML document directly with script tags, it works flawlessly.
Does anyone have any idea what it could be?
In your JSBin example:
<script src="js/script.js" type="text/javascript"></script>
<script src="js/totop.js" type="text/javascript"></script>
<script src="js/easing.js" type="text/javascript"></script>
<script src="js/menu.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
Change the order to:
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/totop.js" type="text/javascript"></script>
<script src="js/easing.js" type="text/javascript"></script>
<script src="js/menu.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
Your problem arises from jquery not being loaded into the document before other scripts try and use it.
If you open your URL in a browser with an opened console: e.g. Firefox + firebug
you will notice some of your scripts are failed to loading.
For example :
http://jsbin.com/iyagub/js/easing.js
is not found.
This could be due to many reason:
Wrong paths?
Wrong server configurations?
A misplaced .htacces with bad Rewritecond -s ?
I'm running this simple code on "000webhost" free server:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function(){
alert("something");
});
</script>
</head>
</html>
Thing is, this code works perfectly well if running on localhost.
Another weird thing, is that this code works on my mobile phone, and on my PC at home.
only when running on my laptop(running windows 8), it just get stucked on "waiting for stats.hosting24.com"
I have tried runnig it on latest FF,chrome,IE. - same result on each browser.
It feels like the page never finish loading on my laptop.
Any ideas on what can cause this issue?
Tools > Options > Enable JavaScript in any browser;
check your internet connection.. since you refer jquery from google CDN, if the connection is down, the page may have an issue loading its content.
Did you try this :
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
alert("something");
});
</script>
</head>
</html>
Since
$(function(){
});
and
$(document).ready(function() {
});
are same.
I'm experiencing the same problem. Also on 000webhost.
I'm pretty sure its an issue with that host. They may be running their own scripts that are not finishing or something (I really havent investigated it).
Anyway this issue only seems to happen on 000webhost and only at certain times, at other times my javascript has run fine, which is what leads me to believe it is a problem at their end.
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
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.