Here's my head tag:
<head>
<!-- link JS here -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type='text/javascript' src="../../template/js/jquery.flexslider.js"></script>
<script type='text/javascript' src='../../template/js/preload.js'></script>
<script type='text/javascript' src='../../template/js/responsive-turnkey.js'></script>
</head>
simple eh? So the "responsive-turnkey.js" file is the one that has all the click functions that need to run once the user clicks the necessary DOM elements.
Here is the "responsive-turnkey.js" file:
$(document).ready(function(){
alert("This alert works on page load");
$(".btn").click(function(){
alert("this alert works on .btn clicked");
});
});
The first alert works on page load, but when I click on the element with the class ".btn", the click function doesn't work and the alert does not sound. THIS ONLY WORKS IN FIREFOX.
Does NOT work in: chrome or safari
What have I done wrong?
$.getScript("../../template/js/responsive-turnkey.js", function(){
alert("Script loaded and executed.");
});
I put this in my load function() to read the script in after elements loaded successfully.
Related
My test.jsp file:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/test.js"></script>
</head>
<body>
<a href='#' id='mylink'>click me</a>
</body>
</html>
My test.js file:
alert("HELLO");
var myLink = document.getElementById('mylink');
myLink.onclick = function(){
alert("I am a pop up ! ");
}
When I load the test.jsp page the Hello alert appears just fine. However when I click on click me, nothing happens.
At the point your script is running, the rest of the DOM hasn't been created yet.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<a href='#' id='mylink'>click me</a>
<script type="text/javascript" src="js/test.js"></script>
</body>
</html>
Moving the script tag to the bottom is one way to fix that.
It works fine here. Try wrapping it in an onload event listener to ensure the DOM is ready when the document.getElementById is called on the mylink element.
window.addEventListener("load", function()
{
var myLink = document.getElementById('mylink');
myLink.onclick = function() {
alert("I am a pop up ! ");
}
});
<a href='#' id='mylink'>click me</a>
This is a common issue of timing on how things are loaded into the browser on your page. The browser will run scripts and load HTML as it encounters it from the top down. Your JS file is running at the very top of the page. This means, at the point of its execution, the A HREF tag doesn't exist when you create the onclick event. The big issue is that when you call this line:
document.getElementById('mylink');
That A HREF tag doesn't yet exist, because the browser hasn't yet made it down the page to that line to load the tag into memory (again, because your JS file is at the top of the page). It's a timing issue. That function call returns null, effectively.
You need to put the event handler creation either on an body.onload event or, since you are using the jQuery library, inside a document.ready event. This delays the onclick event creation until the tag is loaded into memory and ready. For example:
$(document).ready(function() {
var myLink = document.getElementById('mylink');
myLink.onclick = function(){
alert("I am a pop up ! ");
}
});
I have some very simple code below that listens for an event (a click on an anchor tag). It works fine if I create a standalone html file. But if I create a file for just the script, register and enqueue it and then add that anchor tag to a Wordpress page, nothing happens when I click it. I can see in the console that the script file was loaded. I get no error when I click the link but neither do I get the results from the script. Do I have my anchor tag written correctly? Where is my error?
<html>
<head>
<script language="javascript" type="text/javascript" src="/wp-includes/js/jquery/jquery.js"></script>
</head>
<body>
Click here
<script id="source" language="javascript" type="text/javascript">
var $j = jQuery.noConflict();
$j( ".citation" ).click(function ( )
{
event.preventDefault();
// do stuff
});
</script>
</body>
</html>
event is not defined. Make it as an argument
$j(".citation").click(function(event) {
event.preventDefault();
// do stuff
});
I have a main HTML file with all the jQuery and JavaScript files included in it. Now I have a table which has a expand/collapse functionality. This table is in a different HTML file.
I am trying to load the table in the main file. I was successful in loading the table in the main HTML file but the expand/collapse is not working only in IE6/IE7. This works fine in FF, Chrome, Safari and IE8.
local.js has the expand/collapse code
table.html is the html file which has only the table code and no JavaScript.
MAIN HTML:
<html>
<title>Main html</title>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" scr="localjs.js"></script>
<script type="text/javascript">
$('#ajaxtable').load('ajax/table.html', function() {
alert('Table Loaded.');
});
</script>
</head>
<body>
<div id="ajaxtable"></div>
</body>
</html>
I can see the table gets loaded in the ajaxtable div but the expand/collapse is not working only in IE6.
As I mentioned in my comment above, you are loading localjs.js before the $('#ajaxtable') call. Attach the click handler after the table has been created and you should be fine...
<script type="text/javascript">
$('#ajaxtable').load('ajax/table.html', function() {
alert('Table Loaded.');
$('table tr.heading').click(function(){ $(tr.alpha).slideToggle('slow'); });
});
</script>
Suppose I have this code :
<head>
<script type="text/javascript">
func1();
</script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
func2();
</script>
<script type="text/javascript" src="tabber.js"></script>
</head>
Would func2() be called only after jquery.js is completely loaded? Basically I am trying to make a progress bar in a page with some heavy javascript code. So I want to know how much of the page has loaded.Now I can show this progress in the form of the number of js files that have been completely downloaded. So if func2() is called only after jquery completely loads, I can use that function to slide up the progress bar by some percentage.
JavaScripts in a page will be executed immediately while the page loads into the browser. The exception is when it's told to fire on an event (ie: click, after page load, etc)
If you want to ensure code is run only after the page is loaded you can use:
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
<script>
$(document).ready(function(){
[code to run once page loaded here]
}
</script>
</head>
Note: put your Javascript in tags as well.
None of those would ever be called because they are not in <script> tags.
What you probably want is to load all your scripts that are needed, and then use the window.onload or jQuery's ready event to trigger the functions you want to call.
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="tabber.js"></script>
<script type="text/javascript">
$(document).ready(function() {
func1();
func2();
});
</script>
</head>
I'm trying JQUERY on my machine, but for some reason, nothing seems to work. Here's the test file:
<html>
<head>
<script type="text/css" src="jquery.js">
</script>
<script type="text/javascript">
$("p").mouseover(function () {
$(this).css("color","black");
});
$(document).ready(function(){
$("body").css("background-color","black");
$("body").css("color","white");
});
</script>
</head>
<body>
<h1>This is a test</h1>
<p>Roll over me!</p>
</body>
</html>
Nothing in there works. Also, if anybody wants to know, accessing through my domain and through the local both don't work. I'm really confused, because I copied most of that code off the internet, just in case there was something wrong with my typing.
For some reason, firefox is throwing this error:
Code: Evaluate
$ is not defined
http://hussain.mooo.com/jq.html
Line: 6
$ is not defined
http://hussain.mooo.com/jq.html
Line: 6
New code (moved the p onmouseover handeler)
<script src="jquery.js" type="text/css">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseover(function () {
$(this).css("color","black");
});
$("body").css("background-color","black");
$("body").css("color","white");
});
</script>
Specify correct type for javascript file:
<script type="text/javascript" src="jquery.js"></script>
Update
You're currently using type="text/css" as content type for javascript file which is incorrect. Try to copy above code into your script.
Screenshot
removed dead ImageShack link
Install firebug and see what it tells you in the Console tab.
You should move the attachment of the mouseover handler into $(document).ready(...) because the paragraph won't necessarily exist until the document is ready and so no handler can be attached to it.
Download the latest version of jQuery "jquery-1.3.2.min.js" and link the file correctly. and try this,
<script type="text/javascript">
$(function(){
$("p").mouseover(function () {
$(this).css("color","black");
});
$("body").css("background-color","black");
$("body").css("color","white");
});
</script>