Simple jQuery "<script defer" not working - javascript

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

Functions not working when injecting jQuery

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 :)

Using FullCalendar for the first time

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.

jQuery function doesn't run as expected inside CDN script tag

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

This HTML fails to run the alert() script. Why? Yes. jquery is installed in the correct relative location

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:

Social Bookmarking using ShareThis : javascript error 'SHARETHIS is undefined'

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>

Categories

Resources