This is just a piece of test dojo code I am writing. I am a beginner to Dojo and I can't understand what is wrong with this. The alert button is not displayed on load. Furthermore,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
<!-- load Dojo -->
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" data-dojo- config="async:true, parseOnLoad:true">
require(["dijit/layout/BorderContainer", "dijit/layout/TabContainer",
"dijit/layout/ContentPane", "dojo/parser"]);
require(["dojo/ready"],function(ready){
alert("BLAH");
});
</script>
<div id="targetID">
Hello world
</div>
</body>
</html>
Don't put javascript in the same tag where you have src= and close your script tags
It seems to be ok here: http://jsfiddle.net/XwAhY/ . Are u sure that data-dojo- config in your page is without spaces?
Related
I'm pretty new to JQuery and I may be missing a few things about it.
I have created a .php file which contains the header of my website. I included it into my main .php file. The "header.php" contains a 'div class= userbox_rectangle_full_header' that I would like to select from a JQuery loaded in the main "homepage.php".
I tried selecting it to show an alert on the click of the 'div'. When the Jquery is loaded in the "header.php", no problem, the alert correctly shows. But nothing happens when the .js file is loaded in "homepage.php".
Hope you'll be able to help me about what I'm missing.
The main homepage in which I load the JQuery:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<title>DSI Welcome</title>
<link rel="stylesheet" href="../css/homepage.css" />
</head>
<body>
<header>
<?php include 'header.php';?>
</header>
<div class="work_space" id="homepage_work_space">HOMEPAGE</div>
<div class="work_space" id="userpage_work_space">USERPAGE</div>
</body>
<script src="../js/jquery-3.3.1.js"></script>
<script src="../js/jquery_color_animation.js"></script>
<script src="../js/script/homepage_script.js"></script>
</html>
The "header.php" file which I include into the main "homepage.php":
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Header</title>
<link rel="stylesheet" href="../css/header.css" />
</head>
<body>
<header>
<div class="userbox_rectangle_full_header"> </div>
</header>
</body>
<script src="../js/jquery-3.3.1.js"></script>
<script src="../js/jquery_color_animation.js"></script>
<script src="../js/script/header_animation.js"></script>
</html>
Finally, the JQuery code which is not working when loaded in the "homepage.php", but working when loaded in the "header.php":
$(document).ready(function() {
$('#homepage_work_space').on('click', function(){
alert('hi');
});
});
Thank you in advance !
There is some points in your code thats better to know .
Your html structure is wrong! simple html5 structure:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<!-- Your JQuery Main File -->
</head>
<body>
Content of the document......
</body>
</html>
Define your main jquery file in head of your body.
Your document has 2 <body> tag . (one your main body and other included from header.php )
Define your script files(except jquery that defined in head) in the footer , just before </body>
And in your header.php file dont define any script!
Have a good time!
It looks like you're loading in the scripts outside of the body. Make sure to load them inside your <head> tags.
here's a copy and paste from the revision history of the question, in order to demonstrate how the HTML markup should look alike, according to the op's description ...
file index.php:
<html>
<head>
<script src="../js/jquery-3.3.1.js"/>
<script src="../js/jquery_color_animation.js"/>
<script src="../js/script/homepage_script.js"/>
</head>
<body>
<?php include 'header.php'; ?>
<!-- further content goes here -->
</body>
</html>
file header.php:
<div class="userbox_rectangle_full_header">
<div class="work_space" id="homepage_work_space">HOMEPAGE</div>
<div class="work_space" id="userpage_work_space">USERPAGE</div>
</div>
file homepage_script.js:
$(document).ready(function() {
$('.work_space').on('click', function(){
alert('hi');
});
});
I'd suggest Twig or any other PHP template-engine, which are frameworks specialized on rendering HTML markup, including template bits, etc.
okay, first off, i am new to this. I was instructed to use sweet alert for the alerts in our project. I see to it that it will work so i made a simple one on a different file and made something like the code below, but it's not working. The Sweetalert is not showing. Did i miss something?
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css" rel="stylesheet" />
</head>
<body>
<script>
swal("Hello World");
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js" />
</body>
</html>
You are calling Sweet alert before it has been declared and linked to your HTML document. Move the script reference to sweetalert.min.js to the head of your page. And also, script tags cannot be self closing. You need to close the script tag by doing </script>, like this:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
</head>
<body>
<script>
swal("Hello World");
</script>
</body>
</html>
Here is the code. I'm over Arch Linux, if this is a important thing...I'm tired of trying different libraries, in local, from jquery's site but it does't work...
<!doctype html>
<html>
<meta charset="utf-8" />
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript">
$(document).ready(function(){
$("#header").hide();
$("#header").fadeIn(2000);
});
</script>
<title>1</title>
</head>
<body>
<h1 id="header" align="center">Page content</h1>
<p align="center">
Footer
</p>
</body>
</html>
Put your jQuery call and your custom script in separate tags.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#header").hide();
$("#header").fadeIn(2000);
});
</script>
Note that with HTML5 you don't need to specify type for JavaScript.
Wrong way of using script tag !
Make sure you properly wrapped your jQuery code inside a <script></script> block. Also close all open script blocks.
This should work
<!doctype html>
<html>
<meta charset="utf-8" />
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#header").hide();
$("#header").fadeIn(2000);
});
</script>
<title>1</title>
</head>
<body>
<h1 id="header" align="center">Page content</h1>
<p align="center">
Footer
</p>
</body>
</html>
Working sample
I have an image.html file in dreamweaver.
in source code I link an js file called img.js
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>PHOTO</title>
<script language="javascript" type="text/javascript" src="js/img.js"></script>
</body>
</html>
if an use an alert in img.js
alert("My First Jquery Test");
it shows correctly in web page but if write some javascript code like
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
The paragraph above was changed by a script.
nothing shows..why and how I show this?
The script is working as you can see here.
Report your fully HTML file if still have problem.
Remember:
<html>
<head></head>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
</body>
</html>
Do it right
edit img.js
window.onload=function(){
alert("My First Jquery Test");
document.getElementById("p2").style.color="blue";
}
Html:
<!DOCTYPE html>
<html>
<head>
<SCRIPT language="JavaScript" src="mapbody.js"></SCRIPT>
</head>
<body>
Click for a message..
</body>
</html>
mapbody.js:
function a_message()
{
alert('I came from an external script! Ha, Ha, Ha!!!!');
}
When I pull up the web page and click the link nothing happens. Both files are in the same folder. What am I missing?
Several things:
HTML-elements should all be lower-case.
The language-attribute in the script-tag is obsolete. Use type="text/javascript" instead.
A JavaScript-function call should go into the onclick-attribute, not the href.
A proper implementation might look like this:
<!DOCTYPE html>
<html>
<head>
<title>Is required!</title>
<script type="text/javascript" src="mapbody.js"></script>
</head>
<body>
<a onclick="a_message();" href="#">Click for a message..</a>
</body>
</html>
Also, binding function-calls to an HTML-Element using the onclick (or any other onXX-attribute) is old-school. Library's like jQuery enable you to use CSS-selectors to bind actions on certain HTML-elements, which allows a full separation of HTML and JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>...</title>
</head>
<body>
Click for a message..
<script type="text/javascript" src="mapbody.js"></script>
</body>
</html>
Lukas Knuth was faster than me. :)
Works for me (Firefox 8) : http://jsfiddle.net/FCXxU/
Is the URL to your script good?
A simple way to check that is to add an alert('test'); at the beginning of mapbody.js (before the function).