I'm trying to defer a very simple jQuery test, in order to optimize the speed of my website:
This is the jQuery test:
<html>
<head>
<title>Test Defer</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">$(document).ready(function(){$("#jquerytext").html("Hello World by JQuery");});</script>
Hello World by HTML
<div id="jquerytext"></div>
</body>
</html>
It works correctly. However, if I change the call to the jQuery libraries:
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
it won't work.
Am I doing something wrong? Thank you.
As rightly pointed in the nice comments, it should have used 'window.onload' event, because it will fire after all page is loaded including deferred scripts.
<html>
<head>
<title>Test Defer</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
$(document).ready(function(){$("#jquerytext").html("Hello World by JQuery");});
};
</script>
Hello World by HTML
<div id="jquerytext"></div>
</body>
</html>
Related
I'm not able to run a simple script in a web which I inject jQuery
So lets imagine an almost blank web:
<html>
<head>
<title>Demo</title>
</head>
<body>
</body>
</html>
Then I open DOM and insert this:
<html>
<head>
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
</head>
<body>
<button class="btn btn-danger btn-block" id="demo">Demo</button>
<script>
$(function(){
$(document).on('click','#demo',function(){
alert("Hello World!");
});
});
</script>
</body>
</html>
And thats not working :( only works if the web starts with all the code at first, but don't when injecting.
Is there a way to make it possible?
Thanks a lot and greetings :)
I hope this is not a stupid question/issue. I am trying to use fullcalendar for the first time. I am running this from flask on a local server. Here is the code I am attempting to use, based on examples I have found from some googling:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
<script>
$(function() {
$('#calendar').fullCalendar();
});
</script>
</head>
<body>
<div id="calendar"></div>
So when I run that, it just gives me nothing.Am I missing a resource?
You never load the fullcalendar into the div. Do it like this:
<!DOCTYPE html>
<html>
</head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
<script type="application/javascript">
$(document).ready(function() {
$('#calendar').fullCalendar();
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
This way you load it as soon as the document is ready.
Can you check your css link? I think It should end with fullcalendar.min.css not fullcalednar.min.css.
Here is the code. I'm over Arch Linux, if this is a important thing...I'm tired of trying different libraries, in local, from jquery's site but it does't work...
<!doctype html>
<html>
<meta charset="utf-8" />
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript">
$(document).ready(function(){
$("#header").hide();
$("#header").fadeIn(2000);
});
</script>
<title>1</title>
</head>
<body>
<h1 id="header" align="center">Page content</h1>
<p align="center">
Footer
</p>
</body>
</html>
Put your jQuery call and your custom script in separate tags.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#header").hide();
$("#header").fadeIn(2000);
});
</script>
Note that with HTML5 you don't need to specify type for JavaScript.
Wrong way of using script tag !
Make sure you properly wrapped your jQuery code inside a <script></script> block. Also close all open script blocks.
This should work
<!doctype html>
<html>
<meta charset="utf-8" />
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#header").hide();
$("#header").fadeIn(2000);
});
</script>
<title>1</title>
</head>
<body>
<h1 id="header" align="center">Page content</h1>
<p align="center">
Footer
</p>
</body>
</html>
Working sample
The system at JSFiddler seems to think this is Ok too, but won't display the alert either. http://jsfiddle.net/dmafackler/zEEpB/3/
<!doctype html>
<html>
<head>
<title>foobar</title>
<script type="text/javascript" src="jquery.js" />
<script type="text/javascript">
$(document).ready(function() { alert("Is anybody home?"); });
</script>
</head>
<body>
<p>Copasetic.</p>
</body>
</html>
<script> tags aren't self-closing. You need to provide a closing tag:
<script type="text/javascript" src="jquery.js"></script>
If you don't, the HTML isn't parsed correctly:
I am getting "SHARETHIS is undefined" in a page where I used ShareThis social bookmarking utility. Here is my code
<HTML>
<HEAD>
<TITLE>Demo</TITLE>
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher:'f5b1585e-488a-403c-8b7e-ade3efab880a'});</script>
</HEAD>
<BODY>
<span class='st_sharethis' displayText='ShareThis'></span>
<script type="text/javascript">
SHARETHIS.addEntry({
url:'http://www.google.com'
}, {button:true} );
</script>
</BODY>
</HTML>
Can anyone please tell me what could be the problem and how to resolve?
Thanks,
Amit Patel
I inspected the DOM using Firebug. No variable named SHARETHIS. However, there is a variable named stWidget which has a function addEntry. I replaced SHARETHIS with stWidget and there were no errors. I dont know the correct behavior of the widget, but there is no error.
EDIT: Changed the code to share google.com instead of current url.
<HTML>
<HEAD>
<TITLE>Demo</TITLE>
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher:'f5b1585e-488a-403c-8b7e-ade3efab880a'});</script>
</HEAD>
<BODY>
<span class='st_sharethis' st_url="http://www.google.com" st_title="Google" displayText="Share This"></span>
</BODY>
</HTML>