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]-->
Related
I am using a local HTML file with link to an external script (located in the same directory) that worked when in the file, but externally doesn't. Neither Firefox nor Chrome. Code:
<html>
<head>
<script type="text/javascript" src="docket.js"> </script>
</head>
<body onload="doFunction()"> ...
The script is in a .js file, which has (simplified):
function doFunction() ....
For one, you shouldn't include the script tags in your external js file.
Also try to move the script line at the bottom before the closing body tag.
If after removing, it still doesn't work, you should open the developer tools to get clue of what is going on.
index.html:
<!DOCTYPE html>
<head>
...
</head>
<body onload="doFunction()">
...
<script type="text/javascript" src="docket.js"></script>
</body>
</html>
docket.js:
function doFunction() {
alert("hello...");
}
Note: no script tags
As per w3school - https://www.w3schools.com/tags/tag_script.asp
The external script file cannot contain the tag.
The syntax for script tag is -
<script src="URL">
Where your URL is -
1. An absolute URL - points to another web site (like src="http://www.example.com/example.js") OR
2. A relative URL - points to a file within a web site (like src="/scripts/example.js")
Note: with HTML5, type attribute for script tag is optional.
I'd suggest to add a noscript tag just to make sure you have JS enabled in your browser.
<noscript>Your browser does not support JavaScript!</noscript>
im using this Color Picker Jquery plugin (http://colpick.com/plugin)
Problem is, i tried same simple code in in .html but when i change just extension to .php, the Color Picker doesnt work, while everything else works.
A simple button and added the important scripts like colpick.js and colpick.css.
Example:
index.html
<html>
<head>
<script src="jquery-2.1.3.min.js"></script>
<script src="canvasSettings.js"></script>
<script src="colpick.js" type="text/javascript"></script>
<link rel="stylesheet" href="colpick.css" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<button id="idColor">Show Color Picker</button>
</body>
</html>
canvasSettings.js
$(document).ready(function()
{
alert("First");
$('#idColor').colpick();
alert("Second");
});
So in index.html, when you click on button, it opens the Color Picker and both alert's show up, all good here.
Problem is, when i change index.html to index.php (when using an php server), the site loads up normaly, button shows up and "First" alert shows up.
But when it reaches the $("#idColor").colpick({}) it doesnt process, "Second" alert doesn't show up.
Have in mind that $("idColor").val() works.
Is there any special way to change this .html into .php even tho the html code is the same?
You've misdiagnosed the problem. It has nothing to do with serving up the HTML from PHP instead of a static file.
Here you load jQuery:
<script src="jquery-2.1.3.min.js"></script>
Then you load the plugin which binds itself to jQuery:
<script src="colpick.js" type="text/javascript"></script>
Then you load jQuery again (but a different version):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
This overwrites the previous jQuery object and the colour picker plugin that you had bound to it.
Decide which version of jQuery you are going to use (the faster 2.x or 1.x with support for old versions of IE).
Load it before you load the plug in (you are currently doing that for 2.x but not 1.x)
Don't load the other version
SOLVED!
The problem was caused by:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
after i removed that, it worked.
Still need to find a bypass around that, why it caused the problem.
I have create a external script call script.js save in js folder. However i don't know why it is not working. Therefore, I have tried put the into the html file and it work fine. So I think it is the problem of missing something in or i don't know.
It is my html code
<!DOCTYPE html>
<html>
<head>
<title>...........</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script src="js/script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<button class="button">show</button>
<p>yo</p>
</body>
JQuery
$(".button").click(function(){
$("p").toggle();
});
Ensure jquery is loaded first:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/script.js"></script>
I'd also move this to just before the closing </body> tag in your HTML.
And then check where the JS folder is relative to the HTML file you've written. Currently, the folder would need to be at the same level in the directory structure as the HTML file.
Inside your script, use window.onload. The script might be firing before the DOM has actually finished loading.
You might also want to put jQuery on top so that it finishes loading before any possible jQuery code in your script fires.
Try loading JS in the footer.
You need the elements to be present in DOM before you can select them.
Moreover including external js files at the bottom of your page, gives priority of your HTTP requests to the visual display that will be presented to the client instead of to the logic of interaction or dynamics;
this is the usual behavior you'd want.
If you are using jquery in your JavaScript code please put them in this order
<!DOCTYPE html>
<html>
<head>
<title>...........</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/script.js"></script>
</head>
If that is not the case can you post the error in the console (using chrome press f12 to see the errors in the console)
Other thing you can check, the js folder is in same directory where your html page is?
let us know
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'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.