My index.html has a button(id="my-btn"):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>My INDEX PAGE</title>
</head>
<body>
<br><input type="button" id="my-btn" value="OPEN NEW WINDOW"/>
<script src="js/my.js"></script>
<script src="js/jquery-1.5.1.js"></script>
</body>
</html>
js/my.js handles button click event, when my-btn button is clicked, a new browser window will be opened with a new page(test.html)
my.js:
$('#my-btn').click(function(){
window.open('test.html', 'testwindow');
});
The new page(test.html) opened in new browser window:
test.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>TEST</title>
</head>
<body>
<div id="my-name"></div>
<script src="js/test.js"></script>
<script src="js/jquery-1.5.1.js"></script>
</body>
</html>
In the new page, test.js will be invoked and it will append the text "JOHN" as the content of this page
js/test.js
$(document).ready(function(){
$("#my-name").append("<strong>JOHN</strong>");
});
But, when the test.html page opened in a new popped up browser window, I did not see the text "JOHN", it is an empty page, why?
(I have jquery-1.5.1.js under "js/" directory, and all JavaScript files are under js/)
Pretty simple here...
You're calling $(document).ready... before $ is defined.
This happens in the jquery, so you need to switch up your script order:
<script src="js/jquery-1.5.1.js"></script>
<script src="js/test.js"></script>
The content of test.js depends on jQuery, but you don't try to load jQuery until after you have executed everything in test.js.
Switch the script elements around.
Related
I have a PHP based website. I need to add a JavaScript code in to the head. I would like to include the code in to a small JavaScript file and call it from within PHP page. The code starts with <script type="text/javascript"> and ends with </script>. So I tried to save the code in to code.js and in the head of my website's PHP code I put <script type="text/javascript" src="code.js" /> but it didn't work. I am wondering what am I doing wrong?
The content of the PHP page is as follows:
<!DOCTYPE HTML>
<html>
<head>
<title>title of the page</title>
<link href='http://fonts.googleapis.com/css?family=Ropa+Sans' rel='stylesheet' type='text/css'>
<!--head-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<!----start-wrap---->
<div class="wrap">
<!----start-Header---->
<!----End-Logo---->
<!--body-top-->
code of the huge page
<!----End-wrap---->
</body>
</html>
I need to insert the following JavaScript code instead of the <!--head-->:
<script type="text/javascript">
var _prvar=_prvar||new Object();
(function(pa,s){if(document.getElementById('125456'))return false;
pa=document.createElement('script');pa.type='text/javascript';pa.async=true;pa.id='125456';pa.src='//abcdefg.com/pub.js';
s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(pa,s);})();
</script>
So what I did is placed the code
<script type="text/javascript">
var _prvar=_prvar||new Object();
(function(pa,s){if(document.getElementById('125456'))return false;
pa=document.createElement('script');pa.type='text/javascript';pa.async=true;pa.id='125456';pa.src='//abcdefg.com/pub.js';
s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(pa,s);})();
</script>
in to a code.js and instead of the <!--head-->in the PHP code I inserted <script type="text/javascript" src="code.js" />
The problem is that you have inserted the tag script as a non-templated tag, here is the right form:
<script type="text/javascript" src="code.js"></script>
Obviously, if the .js is located in the right place, it will be loaded.
You haven't seen the tag in your code probably because you've inspected the HTML with an HTML inspector, but that tool is not always capable to show you malformed tags. For be sure to see the right HTML result, you must view the souce code (usually, right click on the web page via browser and "show source code" option is there).
The content of the php page is as follows:
<!DOCTYPE HTML>
<html>
<head>
<title>title of the page</title>
<link href='http://fonts.googleapis.com/css?family=Ropa+Sans' rel='stylesheet' type='text/css'>
<!--head-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<!----start-wrap---->
<div class="wrap">
<!----start-Header---->
<!----End-Logo---->
<!--body-top-->
code of the huge page
<!----End-wrap---->
</body>
</html>
I need to insert the following javascript code instead of the <!--head--> :
<script type="text/javascript">
var _prvar=_prvar||new Object();
(function(pa,s){if(document.getElementById('125456'))return false;
pa=document.createElement('script');pa.type='text/javascript';pa.async=true;pa.id='125456';pa.src='//abcdefg.com/pub.js';
s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(pa,s);})();
</script>
So what I did is placed the code
<script type="text/javascript">
var _prvar=_prvar||new Object();
(function(pa,s){if(document.getElementById('125456'))return false;
pa=document.createElement('script');pa.type='text/javascript';pa.async=true;pa.id='125456';pa.src='//abcdefg.com/pub.js';
s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(pa,s);})();
</script>
in to a code.js and instead of the <!--head-->in the php code I inserted <script type="text/javascript" src="code.js" />
This would show up as "a" in chrome://history/. I'm asking for a way to change the title in history when doing some AJAX after page is loaded.
a.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>a</title>
</head>
<body>
<script src="a.js" async></script>
</body>
</html>
a.js:
document.title="abv";
OK, I've not used iframes for a long time but this problem is so basic I must be missing something really obvious.
I have a page (Page A) containing a link (to Page B in the same domain/folder as the parent) that I want to open in an iframe in Page A.
pageA.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Page A</title>
</head>
<body>
Load ...<br>
<iframe id="tgt"></iframe>
</body>
</html>
pageB.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Page B</title>
</head>
<body>
<p>This is a test. Should load in iframe.</p>
</body>
</html>
When the link is clicked pageB opens in a new page (as if the target id isn't present), not in the iframe in pageA.
What am I doing wrong?
=========================================================
OK, sorted that but now I need to do this using php generated JavaScript. Here is a very minimal example:
pageA.php (parent page):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Page A</title>
<?php
$srcPage = "/pageB.html";
echo "
<script>
function loadIframe() {
window.alert('Clicked, loading $srcPage');
document.getElementById('tgt').attr('src', '$srcPage');
}
</script>
";?>
</head>
<body>
<p id="load" onclick="loadIframe()">[Click me to load] ...</p>
<iframe id="tgt" name="tgt"></iframe>
</body>
</html>
pageB.html (page to load - same as before):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Page B</title>
</head>
<body>
<p>This is a test. Should load in iframe.</p>
</body>
</html>
The script executes (alert is displayed) but the page doesn't load.
Thanks
Nigel
You should add the attribute name="tgt" to your iframe.
open link in iframe
For your second question, you mixed jquery with plain javascript.
This is how you change the src of an iframe using plain javascript:
document.getElementById('iframeid').src = '$srcPage'
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
What does a script-Tag with src AND content mean?
I used the following in my html page
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="resources/scripts/jquery-1.8.2.min.js">
$(document).ready(function(){
alert("ABC");
});
</script>
</head>
<body>
<p>THIS IS MY INDEX PAGE.</p>
</body>
</html>
The jquery doesn't work here meaning I don't see any effect of it after putting an alert in it.
But when I put in seperate <script> tag like the one below it works,
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="resources/scripts/jquery-1.8.2.min.js">
</script>
<script>
$(document).ready(function(){
alert("ABC");
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
</body>
</html>
so if anyone any explain?
From w3schools:
http://www.w3schools.com/tags/tag_script.asp
"Note: If the "src" attribute is present, the element must be empty."
When you use script tag you can provide the source code using src attribute or inside the tag, but not both of them.
This is because, you are providing the src tag with the javascript.
The src file contents will get expanded as content of <script> (start and end) tag.
You can inspect this with firebug if you want.
What your first tag is doing is telling the browser that the content of the script is located in an external file. It will ignore any scripting in the actual tag in favour of the contents of the file.
You need to use the separate tag.
I don't know . But if the source you assigned in "src" inside the tag is a online one.
If you save go to that source and copy the script and save it in your local. Then
assign the "src" of your local one then it will work. ie.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="../polin/jquery_library.js">
function fn()
{alert("pp");}
</script>
<script type="text/javascript">
$(document).ready(function(){
alert("ABC");
});
function fn()
{alert("oo");}
</script>
</script>
</head>
<body onload="fn()">
<p>THIS IS MY INDEX PAGE.</p>
</body>
</html>
src="../polin/jquery_library.js" this file is in my local where the jquery source script is saved. And it work
I am getting no date picker in my web page but in fiddle it is coming, what i am missing?
http://jsfiddle.net/cBwEK/
It is coming fine in fiddle but i am getting nothing in my web page. I
have written below scripts
The whole source code is here: http://www.monkeyphysics.com/mootools/script/2/datepicker
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript" src="datepicker.js"></script>
<script type="text/javascript" src="mootools-yui-compressed.js"></script>
<script type="text/css" src="datepicker.css"></script>
<script type="text/javascript">
new DatePicker('.picker', {
pickerClass: 'datepicker ',
allowEmpty: true
});
</script>
</head>
<body>
<label>Datepicker starting at and allowing no value:</label>
<input name='date_allow_empty' type='text' value='' class='date picker' />
</body>
</html>
You need to run your JavaScript code after the relevant elements exist in the DOM. Just move the script to the end of the page. Also, if the date picker script relies on MooTools, you need to put the datepicker include after the MooTools include. E.g.:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<!-- FIRST CHANGE HERE, swapping the order of the script elements -->
<script type="text/javascript" src="mootools-yui-compressed.js"></script>
<script type="text/javascript" src="datepicker.js"></script>
<link type="text/css" rel="stylesheet" href="datepicker.css">
</head>
<body>
<label>Datepicker starting at and allowing no value:</label>
<input name='date_allow_empty' type='text' value='' class='date picker' />
<!-- SECOND CHANGE HERE, moving your script to *after* the elements it operates on -->
<script type="text/javascript">
new DatePicker('.picker', {
pickerClass: 'datepicker ',
allowEmpty: true
});
</script>
</body>
</html>
Live copy | source
There I've just moved your script, but you might move all the scripts down there as the YUI people suggest.
The reason it works in jsFiddle is that you have the fiddle set to load the JavaScript code from the onload event, which happens very late in the process; the DOM elements are there by then.
Try to load the the DatePicker Initialization after the page load.
A good programmer always use View Source
If you would have seen Fiddle you would see:
<script type='text/javascript'>
window.addEvent('load', function() {
new DatePicker('.picker', {
pickerClass: 'datepicker ',
allowEmpty: true
});
});
</script>
That's because the HTML elements are not loaded and your scripts don't see them.