jquery 3 ready function does not work correctly - javascript

Good afternoon!
I moved from jquery 1.11.1 to jquery 3.3.1. I have the following code on the page:
...
<script type="text/javascript">
function onJqueryLoad() {
$(function () {
console.log(document.readyState);
window.app = new App({logsUrl: '3434'});
});
}
</script>
<script type="text/javascript" src="~/Scripts/jquery-3.3.1.js" defer onload="onJqueryLoad()"></script>
...
// more scripts
...
<script type="text/javascript" src="~/Scripts/Common/App.js" defer></script>
...
In the console I see the following error:
interactive
jquery-3.3.1.js:3818 jQuery.Deferred exception: App is not defined
ReferenceError: App is not defined
at HTMLDocument. (http://localhost:53228/:12:35)
at mightThrow (http://localhost:53228/Scripts/jquery-3.3.1.js:3534:29)
at process (http://localhost:53228/Scripts/jquery-3.3.1.js:3602:12) undefined
Uncaught ReferenceError: App is not defined
at HTMLDocument. ((index):12)
at mightThrow (jquery-3.3.1.js:3534)
at process (jquery-3.3.1.js:3602)
It turns out that the contents of $ (function () { were called before the App.js script was loaded, and the status of document.readyState was “interactive”.
But if you do not use “defer” when importing jquery:
<script type="text/javascript" src="~/Scripts/jquery-3.3.1.js" onload="onJqueryLoad()"></script>
then the console will have the status: “complete” and no problems will arise.
Description of the status document.readyState interactive (https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState):
The document has finished loading and the document has been parsed,
but sub-resources such as images, stylesheets and frames are still
loading.
I failed to find more detailed information on whether the status “interactive” indicates that all scripts are loaded.
I checked it in the latest versions of chrome and firefox, but in Microsoft Edge no problem.
In the earlier version of jquery 1.11.1, there were no such errors.
https://jsfiddle.net/uez1y7ft/4/ - if using without cash, the error appears from time to time(ctrl+f5 - see the console).
Any thoughts?

Yes, it's problem of jquery. You need use document.AddEventListener("DOMContentLoaded", function() {...}); or fix jquery library. You can see discussion about this problem here: https://github.com/jquery/jquery/issues/3271

Try this.
I've reordered the scripts, removed the defer and onload attributes, and have added a line to call onJqueryLoad when jQuery has finished initialising.
<script type="text/javascript" src="~/Scripts/jquery-3.3.1.js"></script>
<script type="text/javascript" src="~/Scripts/Common/App.js"></script>
<script data-worldcore>
function onJqueryLoad() {
console.log(document.readyState);
window.app = new App({logsUrl: '3434'});
}
$(function(){ onJqueryLoad(); } );
</script>

Related

Uncaught ReferenceError: onOpenCvReady is not defined

I tried openCVjs tutorial in my local and everytime I load it I get error on console
What I have tried ?
Loading without a file server, because the openCV.js library is around 11mb. So thought that could be an issue.
Loaded with simpleHTTPserver using python even then I got the same error. Attached below screenshot of the network requests.
Please note that test.js resides in the same path as that of openCV.js but test.js works because I tried console.log from it.
You should load opencv.js asynchronously.
Add this into your index.html
<script>
function onOpenCvReady() {
console.log( 'OpenCV Ready', cv);
}
</script>
<script async src="opencv.js" onload="onOpenCvReady();" type="text/javascript">
</script>
In my case, it only works when the onOpenCvReady() function is declarated in an HTML page.
When the function is loaded from an external test.js file, I have to refresh the index page two times, then it suddenly works without any errors.
I embedded it into my HTML page like this:
<p id="status">OpenCV.js is loading...</p>
<!-- <script async src="js/main.js" type="text/javascript"></script> -->
<script async src="js/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
<script>
function onOpenCvReady() {
document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}
</script>

SCRIPT5009: '$' is undefined , when adding scripts inside my partial view

I have a main view that render another partial view as follow:-
#Html.Partial("_PagedTable",Model)
I have define Scripts inside the _PagedTablepartial view as follow:-
<div id ="RackTable">
<script type="text/javascript">
$(document).ready(function () {
Currently the scripts inside the partial view is working well , but when i opened the F12 developer tool on IE and the firebug tool, there will always be the following error on the scripts , raised on the scripts that are defined inside the partial view:-
SCRIPT5009: '$' is undefined
Altohugh there is an error but users will not notice this error , since no error messages will be displayed (of course unless they open the F12 developer tool), and the scripts inside the partial view is working well. so what does this error indicates exactly ?
Are you sure the code within
$(document).ready(function () {
is being executed?
the error means jQuery not loaded, hence your script would not be able to execute
I have found similar problem from SO (such as IE10 and jQuery: SCRIPT5009: "$" is undefined), but they all seem to happen on IE but you mention it happen on firefox as well, so I would only suggest check if your jQuery is loaded properly or not.
Commonly, jQuery is referenced in your Layout page (MasterPage) only in the end of the file.
So, your partial view is coming before this, when jQuery wasn't loaded yet.
What is strange is the browser throws this exception, but jQuery still works.
Worth trying using Razor Sections:
<html>
<body>
[View]
[_PartialView]
#section Scripts {
<script type="text/javascript">
$(document).ready(function () {
// stuff
});
</script>
}
[_PartialView - END]
<!-- jQuery and other references -->
<script src="jquery.min.js"></script>
#RenderSection("Scripts", required: false)
</body>
</html>

JQuery does not work: uncaught type error

I have placed the following JQuery script in my HTML site header just to test if it works:
//in the header
<script src="modules/mod_djmenu/assets/js/catimage.js" type="text/javascript"></script>
//This is inside the script, it does load according to Chrome Developer Tools
$(document).ready(function(){
$("#navbar").hide();
});
navbar does not hide and I get the error (in Chrome Developer Tools):
Uncaught TypeError: Object # has no method 'ready'
Have I placed the script in the wrong place? I use Joomla for my site btw.
Site: europebathroom.com
Thanks in advance!
Include Jquery Library in head section
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="modules/mod_djmenu/assets/js/catimage.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#navbar").hide();
});
</script>
Seems like you havent include jquery in your code. Include the jquery, either by refering online or save it as local.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="modules/mod_djmenu/assets/js/catimage.js" type="text/javascript"></script>
//This is inside the script, it does load according to Chrome Developer Tools
$(document).ready(function(){
$("#navbar").hide();
});
Add this below script. before your script as you need to add jquery script before it.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript">

how to resolve Uncaught TypeError: Object #<Object> has no method 'corner' in jquery?

I am using jquery round corner plugin in lifray theme in order to add round corner functionality in all kind of browsers, including IE6 to IE8. i have included the jquery round corner plugin in portla_normal.vm like this :-
<head>
<title>$the_title - $company_name</title>
<script type="text/javascript" src="/html/js/jquery/jquery.js"></script>
<script type="text/javascript" src="$javascript_folder/jquery_roundcorner.js"></script>
<script type="text/javascript" src="$javascript_folder/jquery.corner.js"></script>
$theme.include($top_head_include)
</head>
This is my jquery_roundcorner.js file, when i see on console of the browser getting the error in this file like below.
$(document).ready(function() {
$('#navigation li').corner("round 6px");
$('#navigation a').corner("round 6px");
});
I am geting following error on browser console:
Uncaught TypeError: Object #<Object> has no method 'corner'.
Can any one help me how to resolve this?
<head>
<title>$the_title - $company_name</title>
<script type="text/javascript" src="/html/js/jquery/jquery.js"></script>
<script type="text/javascript" src="$javascript_folder/jquery.corner.js"></script>
<script type="text/javascript" src="$javascript_folder/jquery_roundcorner.js"></script>
$theme.include($top_head_include)
</head>
alter the load javascript order!
you have to make sure the jquery plugin is first loaded!
in my jquery_roundcorner.js i have replaced the above code with the following code. Actually in velocity file also $ is used, there may be conflicts. so lastly i tried this, its working now.
var jq=$.noConflict();
jq(document).ready(function(){
alert('hello alert1 ');
jq('#navigation li').corner("round 6px");
jq('#navigation a').corner("round 6px");
alert('hello alert3 ');
});

Why is $ undefined when jQuery is loaded?

I have this in the head of a page:
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function () {
$("#ListBoxSegment").change(function () {
GetAccountOpportunityTypes($(this).val());
});
$("#ListBoxType").change(function () {
GetNumberOfContacts();
});
});
Running the page gives this error:
0x800a1391 - Microsoft JScript runtime error: '$' is undefined
Why is $ undefined when jQuery is loaded in the line above?
IT WAS FIXED BY LOADING FROM THE URL:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
But still a little strange that it wouldn't load from local.
The problem is likely that jQuery isn't being loaded. Check the network tab of your browser tools to see if there is a 404 or something on the jQuery JavaScript file. Otherwise, this wouldn't happen.
Also, consider loading jQuery from a CDN to take advantage of caching that occurs from site to site:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
I was using IE, and i had the same issue.For me it was fixed when i cleared the cache and cookies in the browser options.

Categories

Resources