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).
Related
So I've been trying to make pjax work on my website but with little luck.
What I want to do is very basic and simple. I just want to create two links on my home page which both load a common page. But one link would load it using pjax, thus only change the contents of the div, and the other one would not use pjax and thus load the whole page.
This is the code of my main page (main.html) -
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Pjax Tutorial</title>
<script src='node_modules/pjax/pjax.js' type="text/javascript"></script>
<script src='main.js' type="text/javascript"></script>
</head>
<body>
<h1>Welcome to Pjax tutorial</h1>
<a id="first-link" class="js-Pjax" href="first.html">First link</a>
<a id="second-link" href="first.html">Second link</a>
<div id="first-div">Index page!</div>
</body>
</html>
and this is the code of the common page both links refer to (first.html) -
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Pjax Tutorial</title>
<script src='node_modules/pjax/pjax.js' type="text/javascript"></script>
<script src='main.js' type="text/javascript"></script>
</head>
<body>
<h1>Welcome to Pjax tutorial</h1>
<a id="first-link" class="js-Pjax" href="first.html">First link</a>
<a id="second-link" href="first.html">Second link</a>
<div id="first-div">This is the first page! If you came here from the first link, then you can notice that the page didn't load but only the URL and the contents of this div were changed. Yay! If you came here from the second link then you can notice that the page actually loaded and each and everything was re-executed(JS) and re-applied(CSS) again. Boo!</div>
</body>
</html>
and this is the javascript that I'm using (main.js) -
var a = new Pjax({
elements: "a.js-Pjax",
selectors: ["#first-div"]
});
What it should do is if I click on first link, it should just replace the content of div and change the URL of the page whereas if I click on second link, it should load the page instead of just changing the div and URL.
I've written identical code in play framework (MVC) and it's working perfectly but according to me I should not be needing an MVC to run only this much of code.
I have got the Pjax from here: https://github.com/MoOx/pjax . Installed it through npm.
I've run Pjax.isSupported() command and that returned true.
Any help is appreciated!
Well two things to notice here, combination of which solved my problem.
First, The call to main.js or the javascript file I have written has to be done at the end of the body tag. Something like this -
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Pjax Tutorial</title>
<script src='node_modules/pjax/pjax.js' type="text/javascript"></script>
</head>
<body>
<h1>Welcome to Pjax tutorial</h1>
<a id="first-link" class="js-Pjax" href="first.html">First link</a>
<a id="second-link" href="first.html">Second link</a>
<div id="first-div">Index page!</div>
<script src='main.js' type="text/javascript"></script>
</body>
</html>
And second, I do need a server running to make pjax work. It's working with both play framework and npm. Doesn't work without a server.
Hope this helps somebody.
I am running XAMPP on a Windows box. Below is my test file:
<html>
<head>
<title>very nice file</title>
</head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<body>
<a class="expander" href="#">click me</a>
<div class="content">
I WANT TO HIDE THISSSS.
</div>
</body>
</html>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://raw.githubusercontent.com/redhotsly/simple-expand/master/src/simple-expand.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('.expander').simpleexpand();
});
</script>
When I surf to that file in Internet Explorer, I see 'click me' and 'I WANT TO HIDE THISSSS'. When I surf to it in other browsers, I see 'click me', and clicking it will un-hide the 'I WANT TO HIDE THISSSS' text.
Searched all night and still have nothing! Any thoughts? Thanks!
Do you really need that expander? If you are just to hide/show a content. You can create one with few lines of code since you are using jquery
You can try this simple fiddle here https://jsfiddle.net/yzdthzhL/
you can play the code you want.
and by the way. I'm not sure if this is helpful or not but. It would nice to add your script inside your html document.
<html>
<head>
<script src="somelibrarieshere"></script>
</head>
<body>
<script src="somelibrarieshere"></script>
</body>
</html>
and not outside html block. It's better that way. :) Have a great day pal.
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>
This is my first post and I am really new to computer programming so I apologize ahead of my time if my question is super simplistic. So I am trying to start an angular application and I currently have this:
<!DOCTYPE html>
<html>
<head ng-app>
<title>Hello World</title>
<body>
</head>
<h1>{{2+2}}</h1>
</body>
<script type="<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"> </script>
</head>
What is supposed to happen is that when I click the html page there should be the number 4 pop up but instead this pops up: {{2+2}}. I am assuming that my angular code is not correctly linked but I am not sure. Do you have any ideas?
Please find below the corrected html:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body ng-app>
<h1>{{2+2}}</h1>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
</body>
</html>
Place the <body> tag in correct place. Moved the ng-app to body tag. Place the corrected script tag within <body>
Working sample: http://plnkr.co/edit/T15fetn913Fwn2uJ5pcj?p=preview
Explanation:
The body of an html page is where the components that display on a page will be declared.
- Overlying declaration of html
-where you put meta data, scrip imports, css imports, and title. Basically things the page will use
- all other tags from anchors to spans, things the user sees
Note*** nothing can go in between these tags
Visit w3schools for a great tutorial on this...
http://www.w3schools.com/html/default.asp
Any one help me. I have described the problem in the following lines.
I want to call the second.html with in one.html.
Inside the second.html ,I have included the second.js using script tag.
When I call the second.html in the browser(safari,chorme,firefox) directly,It works FINE.
But If I call the second.html inside the one.html then the second.js(cannot call by second.html) does not work.
Please Help me. I have attached the code.
one.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="jquery.mobile-1.0a2.min.css" />
<script src="jquery-1.4.4.min.js"></script>
<script src="jquery.mobile-1.0a2.min.js"></script>
<script src="Scripts/one.js"></script>
</head>
<body>
<div data-role="page">
One
</div>
</body>
</html>
Second.html
<!DOCTYPE html>
<html>
<head>
<title>Sample </title>
<link rel="stylesheet" href="../jquery.mobile-1.0a2.min.css" />
<script src="../jquery-1.4.4.min.js"></script>
<script src="../jquery.mobile-1.0a2.min.js"></script>
<script type="text/javascript" src="../Scripts/second.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="button" id="link" >Second</div>
</div><!-- /page -->
</body>
</html>
one.js
$(document).ready(function()
{
alert('one.js');
});
second.js
$(document).ready(function()
{
alert('second.js');
});
THanks
From what I have read, jQuery mobile Ajax pages do not fire the ready event when the new content is displayed. You will most likely need to bind to the pagecreate event for all 'data-role="page"' elements, and check whether an id of an element on second.html is there.
The comments section of this documentation page has some potential fixes for this:
http://forum.jquery.com/topic/mobile-events-documentation
A link is just a reference to another page; the browser doesn't actually load it before you click it (as far as the scripts on the first page are concerned, anyway).
If you want to access scripts on another page, two conditions must be met:
The two pages must come from the same domain (for security reasons).
The two pages must be loaded in the same window (for example using an iframe).
Please post a new question asking what you want to achieve, maybe there is a different solution.