JQuery event not caught when triggered iife - javascript

I have the following html file, called a.html
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="a.js"></script>
</head>
<body>
<script>
$(document).on('foo', function () {
alert('test');
});
</script>
</body>
</html>
And the following Javascript file, called a.js
(function() {
$(document).trigger('foo');
}());
When I open a.html, the trigger call in a.js is called, the line
$(document).on('foo', function () {
is called but the alert is never called. What am I doing wrong?

The issue in the above code as per my understanding is a.js is getting loaded before the below script.
<script>
$(document).on('foo', function () {
alert('test');
});
</script>
And this event is getting bind after its already been called in a.js.
Try loading a.js below above script like below.
<script>
$(document).on('foo', function () {
alert('test');
});
</script>
<script type="text/javascript" src="a.js"></script>

place both the scripts at one place in the order as shown it will work..
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="a.js"></script>
</head>
<body>
<label> rerwnr</label>
<script>
</script>
</body>
</html>
(function() {
$(document).on('food', function () {
alert('test');
});
$(document).trigger('food');
}());
https://codepen.io/pavankumark/pen/WExNEg
Check out the link here for more details.

Try adding the script file a.js at the end of body,
<body>
<script>
$(document).on('foo', function () {
alert('test');
});
</script>
<script type="text/javascript" src="a.js"></script>
</body>

You need to update your code like this:
You can put script code to a.js file:
Here id demo: https://jsbin.com/fukujad/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<script>
$(function(){
$(document).on("test", function(){
alert("test triggered");
});
$(document).trigger("test");
});
</script>
</body>
</html>

In a.js you call trigger foo before you defined it,
try to use document ready like this and it will work
$(document).ready(function(){
$(document).trigger('foo');
})
It will wait to load whole document (and all scripts in the document)

Related

Why is my Javascript and JQuery scripting not working?

I was looking at another question and saw that they had been told, when their Javascript was not working, to put a function that started on loading of the page.
I was trying to use this code:(well, not exactly this code, but something like it)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
function doThisWhenLoaded(){
var code = document.getElementsByTagName("body");
code.append("<p>Yes it did.</p>");
}
</script>
</head>
<body onload="doThisWhenLoaded">
<h1 style="font-family:sans-serif;">Did it work?</h1>
</body>
</html>
And nothing happened. All that it did was show the h1 code that I put in there.
Since you are already including jQuery try this
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var code = $("body");
code.append("<p>Yes it did.</p>");
});
</script>
</head>
<body >
<h1 style="font-family:sans-serif;">Did it work?</h1>
</body>
</html>
You forgot to include the parenthesis to call the function in the body element's onload attribute:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
function doThisWhenLoaded() {
//Modified the two lines below slightly
var code = document.querySelector("body");
code.innerHTML += "<p>Yes it did.</p>";
}
</script>
</head>
<body onload="doThisWhenLoaded()">
<h1 style="font-family:sans-serif;">Did it work?</h1>
</body>
</html>
A better/cleaner way to achieve the same thing would be to use addEventListener and DOMContentLoaded event. Something like below:
document.addEventListener("DOMContentLoaded", appendHtml.call(null, {
selector: 'body',
html: '<p>Yes it did.</p>'
}));
function appendHtml(config) {
document.querySelector(config.selector).innerHTML += config.html;
}
<h1 style="font-family:sans-serif;">Did it work?</h1>
Two reason why it doesn't work:
To select the body you have to use document.body or $("body") (in jQuery)
And you forgot to add parentheses to your function call doThisWhenLoaded()
Here is the code corrected:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
function doThisWhenLoaded(){
$("body").append("<p>Yes it did.</p>");
}
</script>
</head>
<body onload="doThisWhenLoaded()">
<h1 style="font-family:sans-serif;">Did it work?</h1>
</body>
</html>

jQuery code doesn't work in CodeIgniter

I'm trying to do following with jQuery:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('#test').hover(function(){
alert('sub');
});
</script>
</head>
Thanks.
I'm assuming that HTML DOM element with id="test" exists.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function() {
$('#test').hover(function() {
alert('sub');
});
});
</script>
</head>
By the way, CodeIgniter has nothing to do with your issue.
Seems like you are accessing an element which does not exists.
Try this:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#test').hover(function() {
alert('sub');
});
});
</script>
</head>

Functions with alert boxes from an outside JQuery file don't work

Here is my HTML excerpt:
<html>
<head>
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript" src="alert_box.js">
</script>
<title></title>
</head>
<body>
<input type="button" id="name" value="click" >
</body>
</html>
Here's what's in my alert_box.js
$('#name').click(function(){
alert('alert box working');
});
Both JQuery and alert_box.js are imported
Based on the answers given, this should be solved. But I will summarize it. You may also want to just use a remote jquery script hosted somewhere else, which you can reference like so:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
Otherwise...
<html>
<head>
//make sure your path here is correct
<script type="text/javascript" src="jquery.js"></script>
//make sure your path here is correct
<script type="text/javascript" src="alert_box.js"></script>
<title></title>
</head>
<body>
<input type="button" id="name" value="click" >
</body>
</html>
alert_box.js
(function() {
$('#name').click(function() {
alert('alert box working');
});
});
When you call that, the DOM isn't yet ready therefore, there is no #name element which you're looking for. Wrap your code in DOM ready like this
$(document).ready(function() {
$('#name').click(function() {
alert('alert box working');
});
});
Or bring the <script src="alert_box.js"> before </body>
Learn about DOM Ready
Now, after EternalHour provided me with an external JQuery source, some of the functionality resumed to normal. However, this would not work and I have no idea why:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="alert_box.js"></script>
<script type="text/javascript">
if(window.jQuery){ <!--this is a small test I ran ti see if jquery is loaded/-->
alert('jquery functional');
}else{
alert('jquery not loaded');
}
</script>
</head>
<body>
<input type="button" value="submit">
</body>
</html>
Now back to alert_box.js ...
$(window).ready(function(){
$(':button').click(function(){
$(this).attr('value','loading...');
});
});
The button won't change value, what's causing this?

Call function defined in body from head

I have this simple HTML page:
<html>
<head>
<script>
share();
</script>
</head>
<body>
<script>
function share() {
alert('test');
}
</script>
</body>
</html>
I need to call the function share from the <head> and the function itself must be defined in the <body>.
The above code leads to undefined function error.
This is just a simplified script to explain the issue so it needs to be done that way. Is there a way around this?
You need to wait for the body to be loaded, so
<html>
<head>
<script>
window.onload=share;
</script>
</head>
<body>
<script>
function share() {
alert('test');
}
</script>
You can use
<html>
<head>
<script>
windows.onload = function(){
share();
}
</script>
</head>
<body>
<script>
function share() {
alert('test');
}
</script>
</body>
</html>
or you can use Jquery version
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function() {
share();
});
</script>
</head>
<body>
<script>
function share() {
alert('test');
}
</script>
</body>
</html>
Both of them work in this condition however if you want to know the difference between this tow I suggest to see this
window.onload vs $(document).ready()
Use
<html>
<head>
<script src="jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function() {
share();
});
</script>
</head>
<body>
<script>
function share() {
alert('test');
}
</script>

How can I call a javascript function from an html file

I have a .js file defined as follows:
<script>
function sayHello() {
alert("Hello World");
}
</script>
And I have a .html file defined as follows:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/testCSS.css">
<title>test html</title>
</head>
<body>
<script type="text/javascript" src="js/testJS.js"></script>
</body>
</html>
How can I call the sayHello() function?
script.js
function sayHello() {
alert("Hello World");
}
index.html
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<script src="script.js"></script>
<script>
sayHello();
</script>
</body>
</html>
You just need to call it!
let me explain in an example.
let's say you have a button in that html that calls sayHello function.
<button type="button" onclick="sayHello ()">Say hello</button>
I think you should take a look at here.
Jus replace the link to script with content of .Js file...
Or call the function
<script>
sayHello()
</script>

Categories