JQuery hide <p> does not seem to work? - javascript

Okay... obviously this is because I am so new. I don't understand why this does not work. I thought this is because the argument its not inside a function but I don't really know.
<head>
<title>Documento sin título</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
$(function(){
$("p").hide();
});
</script>
</head>
<body>
<p>hi</p>
</body>

It should look like this:
<script src="jquery.js"></script>
<script>
$(function() {
$('p').hide();
});
</script>
First you must load the external Javascript file (like jquery.js) in its own script tags. Then you include your Javascript (or jQuery for this case) in its own script tags.

Your code works!
However, you need to load the JS file first. The function to hide the p should be in its own <script> tag (different one from loading the script)
$(function() {
$("p").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<p>hi</p>
<div>world!</div>

Related

How to execute a script by call his id

from the html below I would like to execute a script by calling his id. So that when the script id is called the display fonction execute. Any other suggestion will be appreciate as long that the script only execute when the id is called. Thank you
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
//Here is where I would like to execute the script by calling his id.
//Any other suggestion to make it work will be appreciate
});
</script>
<script type="text/javascript" id="execute">
$(document).ready(function(){
display();
});
</script>
<!--------------------- Footer -------------------------------->
<script>
function display(){
$("#show").css("display", "block");
}
</script>
<p id="show" style="display:none">This is a paragraph with little content.</p>
</body>
</html>
That's not how JavaScript works.
Once you include a <script> in DOM, it's executed. However, the script itself can define functions, which could be named and called at a later point (by their name), by any other script or element in the page, as long as they have access to the context in which you defined your function.
Example:
<script>
function myFunction() {
window.alert('I got called!');
}
</script>
<button onclick="myFunction()">Execute myFunction()</button>
So instead of using the id of the script, I'm using the name of the function.
To fully answer your question: running a script by id is not possible because all scripts are executed as soon as they are parsed by the browser (which happens in their chronological order in DOM) and there is no way of re-running them after they have already been executed.
Obviously, one could argue that you could remove the <script> tag altogether, create a new one with the same contents, which is going to be rerun when added to DOM. But, at least in theory, it's not rerunning the same <script>, it's running a different one. Another instance/<script> tag.
Needless to say, nobody does that as it's much more convoluted than to simply define a function and call that function at a later time.
Thank you for your explanation on the DOM. It help me figure out another alternative
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
var result = window.prompt("Would you like the footer to be display?");
if(result == "yes"){
bodyPage1();
}
});
</script>
<script>
function bodyPage1(){
display();
}
</script>
<!--------------------- Footer -------------------------------->
<script>
function display(){
$("#show").css("display", "block");
}
</script>
<p id="show" style="display:none">This is a paragraph with little content.</p>
</body>
</html>

External JavaScript File not working when included in body of HTML page [duplicate]

I'm trying to use an external JavaScript file in order to write "Hello World" into a HTML page.
However for some reason it does not work, I tried the same function and commands inline and it worked, but not when it's using an external JavaScript file. The part I commented out in the JS file was the previous method I was trying to use. Those lines of could worked when I ran the script from the header, and inline. Thanks
Html file:
<html>
<head>
</head>
<body>
<p id="external">
<script type="text/javascript" src="hello.js">
externalFunction();
</script>
</p>
<script type="txt/javascript" src="hello.js"></script>
</body>
</html>
JavaScript file
function externalFunction()
{
var t2 = document.getElementById("external");
t2.innerHTML = "Hello World!!!"
/*document.getElementById("external").innerHTML =
"Hello World!!!";*/
}
In general, you want to place your JavaScript at the bottom of the page because it will normally reduce the display time of your page. You can find libraries imported in the header sometimes, but either way you need to declare your functions before you use them.
http://www.w3schools.com/js/js_whereto.asp
index.html
<!DOCTYPE html>
<html>
<head>
<!-- You could put this here and it would still work -->
<!-- But it is good practice to put it at the bottom -->
<!--<script src="hello.js"></script>-->
</head>
<body>
<p id="external">Hi</p>
<!-- This first -->
<script src="hello.js"></script>
<!-- Then you can call it -->
<script type="text/javascript">
externalFunction();
</script>
</body>
</html>
hello.js
function externalFunction() {
document.getElementById("external").innerHTML = "Hello World!!!";
}
Plunker here.
Hope this helps.
Script tags with SRC values do not run the contents. Split it to two script tags. One for the include, one for the function call. And make sure the include is before the call.
use onload eventListener to make it simple
<script>
window.onload = function() {
externalFunction();
}
</script>
You're trying to call the function before it has been loaded.
Place the load script above the declaration:
<html>
<head>
<script type="txt/javascript" src="hello.js"></script>
</head>
<body>
<p id="external">
<script type="text/javascript">
externalFunction();
</script>
</p>
</body>
</html>
Also you have a typo:
<script type="txt/javascript" src="hello.js"></script>
Should be:
<script type="text/javascript" src="hello.js"></script>
The script type needs to be "text/javascript" not "txt/javascript".

Javascript Jquery Fadeout Woes

My javascript isn't currently working. I guess while I'm at it, is there any programs that I can use that can essentially give me errors made so that I am able to trouble shoot myself?
Javascript...
<script type="text/javascript" src="/js/jquery-ui.min.js">
$(document).ready(function() {
$(".button").click(function(){
$("#ticketTable").fadeOut( 'slow', function(){
});
});
});
</script>
Button used to fadeout...
<button class="button">Respond</button>
HTML That I want to fade out...
<div id="ticketTable">
<table border="1" width="1000" class="transparent">
<tr><th width="15%">Ticket</th><th width="15%">Queue</th><th width="15%">Severity</th><th width="15%">Created</th><th width="15%">Creator</th><th width="25%">Subject</th></tr>
</table></div>
Your code seems fine but the way you are including your .JS file (and later initializing behaviour) seems incorrect.
Try adding this to your page's <head> tag, and change your JS <script> tag like this:
<head>
<script type="text/javascript" src="/js/jquery-ui.min.js"></script>
<!--other script and also external css included over here-->
<script type="text/javascript">
$(document).ready(function() {
$(".button").click(function(){
$("#ticketTable").fadeOut( 'slow', function(){
});
});
});
</script>
</head>
DEMO: JS Fiddle

How to inject an external javascript file into a div

How can an external javascript file be injected into a div. When I try to set it using below code, the div 'toupdate' is not updated with new javascript file.
<script type="text/javascript">
$(document).ready(function () {
$('#toupdate').html('<script type="text/javascript" charset="utf-8" src="http://static.polldaddy.com/p/5968383.js"></script>');
});
</script>
<body>
<div id="toupdate">
<script type="text/javascript" charset="utf-8" src="http://static.polldaddy.com/p/6343621.js"></script>
</div>
</body>
Your replacement code is being executed before the div 'toupdate' has loaded, you either need to move the <script> tag to after the div or put you replacement code within a $(document).ready() function like so:
$(document).ready(function () {
$('#toupdate').html('<script type="text/javascript" charset="utf-8" src="http://static.polldaddy.com/p/5968383.js"></script>');
});
EDIT:
tested and working example:
$(document).ready(function() {
$('#toupdate').children('script').attr('src', 'http://static.polldaddy.com/p/5968383.js');
});​
JSfiddle: http://jsfiddle.net/m7q3H/45/
you could use the $.getScript("URL") function
definition

What's wrong with this jQuery example?

The following jQuery example should put some text into the div, but it doesn't. I tried Firefox, Google Chrome and Internet Explorer.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" language="javascript"></script>
<script language="javascript">
$(window).load(function() {
$('adiv').html('<p>hello world</p>');
alert('done');
});
</script>
</head>
<body>
<div id="adiv">
</div>
</body>
</html>
Sorry, this might be stupid, but I'm stuck.
change $('adiv').html('<p>hello world</p>');to
$('#adiv').html('<p>hello world</p>');
You're not actually selecting anything in your select function
Directly after your $( opening, you need to use a CSS3 valid selector. Just a string won't select anything unless it's a HTML element (table, div, h2)
You need to preface it with a . or a # to signal either a class or ID name.
$('adiv') should be $('#adiv').
Unlike Prototype, in jQuery you specify a CSS selector, not just a string that is implicitly inferred to be an ID. I find myself forgetting this from time to time.
As e-turhan already mentioned you need # in front of adiv in your $() otherwise this is not a id selector. Also it's always better to call these .load() events inside the .ready() jQuery event whose famous shortcut is $(function() { //execute when DOM is ready }); . In your case:
$(function(){
$(window).load(
function(){
$('#adiv').html('<p>hello world</p>');
}
);
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" language="javascript"></script> <script language="javascript"> $(window).load(function() { $('#adiv').html('<p>hello world</p>'); alert('done'); }); </script> </head> <body> <div id="adiv"> </div> </body> </html>
Paste this code instead ur query
It Will Work
Try $(document).ready(function()... instead of $(window).load(function()...

Categories