This is the pen that shows that when a JSON request completes, a name 'Antonio' appears. But jQuery function is not executing on it. Please make sure that document.write is a necessary function for me.
This is the code I wrote to get the name Antonio.
<script type="text/javascript">
function gallery(json) {
document.write('<span>'+json.feed.title.$t+'</span>');
}
</script>
<script src='http://www.antonio-bloggerever.blogspot.com/feeds/posts/summary/-/Creative?max-results=2&alt=json-in-script&callback=gallery'/>
You don't have jQuery included. Add jQuery and it will work. Write this line in starting of your HTML.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
CodePen
You are essentially trying to bind a click event to an element that's not there yet.
For dynamically added elements to the DOM use on and off.
$('span').on('click', function(){
alert('aaaa');
});
Related
is there a better way to replace this kind of js function by simply collapse/toggle a div and show/hide its content?
$(function() {
$('#destselect').change(function(){
$('.dest').hide();
$('#' + $(this).val()).show();
});
});
The reason this is happening is because your js file is called on the head of your page.
Because of this, when you document.getElementsByClassName('collapsible');, colls result in an empty array, as your elements in body are not yet created.
You could either create a separate js file and add it at the end of your body (in that way you make sure your colls are created when your javascript is executed), or just wrap your code on a DOMContentLoaded event listener that will trigger your code once the document has completely loaded.
My guess would be that you are loading your script before browser finishes loading dom conetent and so when it runs the elements it is trying to add event listeners to, don't yet exist.
Try wrapping all you javascript in that file in this:
document.addEventListener("DOMContentLoaded", function(event) {
// all your code goes here
});
The above makes sure that your script is run after loading all elements on the page.
You could add a script tag to the header of your HTML file, this will import the JS file into your current page as follows
<script src="File1.js" type="text/javascript"></script>
Then call the function either in onclick in a button or in another script (usually at the bottom) of your page. Something like this:
<body>
...
<script type="text/javascript">
functionFromFile1()
</script>
</body>
Seems like your script is not executing properly due to a missing variable.
In this script https://www.argentina-fly.com/js/scripts.js
Naves variable in function UpdateDetailsDestination() is not defined.
I think you should resolve this first and then check your further code is working on not.
Please take a look into Console when running page. You'll see all JavaScript related errors there.
I have an html document in which a function is called like this
<div id="mon" class="topbar" onclick="verd()">
This calls a jquery function inside the body tag that goes like this
<script src="jquery.js">
function verd(){
$("#stillmain").empty();
} </script>
This returns the error:
Uncaught ReferenceError: verd is not defined
at HTMLDivElement.onclick
When I change the script to pure Javascript without Jquery however like this
<script>
function verd(){
$("#stillmain").empty();
} </script>
it does recognize the function verd(), can anyone explain what is going on, and how I could still use Jquery?
I am using the newest version of Jquery(just changed the name, nothing else).
When you give a script tag a src attribute it's going to load that source file in place of the script contents. So any script tags with a src should be kept empty.
You need to load jQuery by calling a script tag with its source on it, and then in a separate tag you can make your own script tag and write your custom JavaScript there.
<script src="jquery.js"></script>
<script>
function verd(){
$("#stillmain").empty();
}
</script>
Make sure that your custom scripts are loaded after jQuery.
If you want to run this as a jQuery function you need to use the proper syntax. Try the link below.
How to Create a jQuery Function
Also, you need to load jQuery in a separate tag or else none of your code will be ran other than the source of that script!
I am having this code:
Add
is there any way to make an alert whenever the user will press this button without changing the code or adding onclick event?
You can simple overwrite the attribute with JavaScript:
// Select the targeted element(s), in this case the first <a> element
// Note: You will need to replace this by a code that works
// for your actual markup!
document.getElementsByTagName("a")[0].onclick = function() {
alert("hi");
return false;
};
Demo: http://jsfiddle.net/WNZAP/
As the OP states that they are not allowed to change the HTML, and that jquery is not available to them.
Not having an 'id' on the link makes life very difficult. So the following code presumes the link is the very first one on the page...
Place this javascript into the <head></head> section of your page...
<script type="text/javascript">
window.onload = function() {
document.getElementsByTagName("a")[0].onclick = function() {
alert("Hello World");
return false;
}
}
</script>
See Live JSFiddle Demo
It's not possible to trigger an action without an event. But if I get your question right you want to trigger an alert without changing the HTML.
The easiest way would be by using a JavaScript library like jQuery. So load the library either by downloading it and placing it in your project or through the Google CDN:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
And then do something like this:
<script type="text/javascript">
$(document).ready(function(){
$(".submitme").click(function(){
alert("hello world");
});
});
</script>
I want to execute a function at the end when the HTML has been loaded. I tried it with onload without success. I also tried it with ready, but it still doesn’t work. Here is my code. This is again placed in the header:
<script type="text/javascript">
$(document).ready(function() {
$('#infowindow_content').html('test');
});
</script>
The div is also set by an external JavaScript file. Content:
window.onload = initialize;
function initialize() {
document.getElementById('infowindow_content').innerHTML = 'testa';
}
It is included the following way before the closing body tag:
<script type="text/javascript" src="../lib/functions.js"></script>
I tried to place the above code before the closing body tag, but currently I have no idea why this doesn't work (the content isn't changed by my JavaScript code). If I execute it on the console afterwards everything works fine.
Solution:
I set a configuration parameter (language) in the HTML file. In the JavaScript file I ask for this value and depending on the value I define another content. Sometimes it could be so simple ...
Try this:
setTimeout(function() {
$(document).ready(function() {
$('#infowindow_content').html('test');
});
}, 20);
I don't know the jQuery equivalent but try the native JS.
Since the <body> has the most HTML & loads after <head>...
document.body.onload=function(){
yourFunction(args)
}
<body onload="yourFunction(args)">...</body>
Or maybe the window object, since it's the root of every webpage DOM...
window.onload=function(){
yourFunction(args)
}
Always place DOM manipulating code directly before your </body> tag. JavaScript in the header should only be called to libraries, such as jQuery.
I am trying to load a Jplayer on my website. The instructions say to use this code to initialise the plugin:
$('body').ttwVideoPlayer(myPlaylist, {options});
Where do I place this code?
The player loads correctly and the script works, but won't play the files in the playlist function.
I would usually put all initialization code in a $(document).ready handler.
$(document).ready(function() {
$('body').ttwVideoPlayer(myPlaylist, {options});
});
The code you have posted should be wrapped in an appropriate handler you're using like
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('body').ttwVideoPlayer(myPlaylist, {options});
});
</script>
Don't forget to add an appropriate jQuery library for it to work.