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

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>

Related

Rails js script code not working while screen back due to Turbolinks

In my rails app there is a JS script in partial view
const f2s = window.document.createElement("script");
f2s.defer = true;
(f2s.src = "https://face2.oktium.com/face2widget.js"),
(f2s.onload = function () {
new window.Oktium(face2params).init();
new window.Oktium(face2paramsMobile).init();
}),
document.head.appendChild(f2s);
it works fine when page load for first but when comes again from back or another page which have same code its not working. How can I work that with turbolinks?
From turbolinks docs
Working with Script Elements
Your browser automatically loads and evaluates any <script> elements present on the initial page load.
When you navigate to a new page, Turbolinks looks for any <script> elements in the new page’s <head> which aren’t present on the current page. Then it appends them to the current <head> where they’re loaded and evaluated by the browser. You can use this to load additional JavaScript files on-demand.
Turbolinks evaluates <script> elements in a page’s <body> each time it renders the page. You can use inline body scripts to set up per-page JavaScript state or bootstrap client-side models. To install behavior, or to perform more complex operations when the page changes, avoid script elements and use the turbolinks:load event instead.
Annotate <script> elements with data-turbolinks-eval="false" if you do not want Turbolinks to evaluate them after rendering. Note that this annotation will not prevent your browser from evaluating scripts on the initial page load.
Loading Your Application’s JavaScript Bundle
Always make sure to load your application’s JavaScript bundle using <script> elements in the <head> of your document. Otherwise, Turbolinks will reload the bundle with every page change.
<head>
...
<script src="/application-cbd3cd4.js" defer></script>
</head>
If you have traditionally placed application scripts at the end of <body> for performance reasons, consider using the <script defer> attribute instead. It has widespread browser support and allows you to keep your scripts in <head> for Turbolinks compatibility.
You should also consider configuring your asset packaging system to fingerprint each script so it has a new URL when its contents change. Then you can use the data-turbolinks-track attribute to force a full page reload when you deploy a new JavaScript bundle.
You can wrap your JS script inside such handler inside script tag in the head
<script defer>
document.addEventListener('turbolinks:load', () => {
// your code here
})
</script>
Also in Rails there is mechanism how to add some tags dynamically, you can add in the <head> in layout/application
<%= yield(:face2) %>
And then in your specific view
<% content_for(:face2) do %>
<script defer src="https://face2.oktium.com/face2widget.js" data-turbolinks-eval="false"></script>
<script>
document.addEventListener('turbolinks:load', () => {
new window.Oktium(face2params).init()
new window.Oktium(face2paramsMobile).init()
})
</script>
<% end %>
You should wrap your JS code inside
$(document).on('turbolinks:load', function() {
...
}
Bit of a repetition of what others have suggested, but I just wanted to stress that it was the wrapping of the functionality needed for the partial/view including variable declarations that worked for me. Initially I used the following in the erb which worked with some exceptions.
<div id="cart-counter" data-turbo-permanent>1 item</div>
This kind of worked but when user clicked button type submit on other pages, it broke again.
Tried many things, and as others have described, the following worked:
wrapped the script I needed for that view with :
document.addEventListener("turbo:load", ()=>{
// functionality
}

JS source not visible in Chrome/Firefox debuggers, but correctly loaded in the page

I have a web page which does navigation using templates and filling / showing them depending of user interactions.
It works quite well, but the templates contains some JS included with them. This JS code is correctly loaded (in the example below, it provides an alert saying "Hi") when the page is just loaded. However, I don't see the code within the debugger console, either in Chrome or Firefox.
I've provided a minimal example below, where I see in the console > Source, under localhost, only my HTML page and jquery.min.js in the asset/js sub-folder.
Here is my HTML :
<script src="assets/js/jquery.min.js"></script>
<template id="my_screen">
Hello
<script type="application/javascript" src="assets/js/testouille.js"></script>
</template>
<section class="container">
<div class="my_screen hide"></div>
</section>
<script type="application/javascript">
function useTemplate(elem) {
var myTemplate = $('#' + elem),
normalContent = $('.' + elem),
clonedTemplate = myTemplate.html();
normalContent.empty();
normalContent.append(clonedTemplate);
}
$(document).ready(function() {
useTemplate('my_screen');
}
)
</script>
And here is my Javascript :
alert("Hi");
Any idea?
Since testouille.js is in a <template>, it's not loaded automatically by the browser when the page is loaded.
When you clone the template and append it to a regular DIV, jQuery emulates loading the file using $.getScript(). In the Chrome debugger, code that's loaded this way will be shown in a VM:#### filename (where #### is an arbitrary number) in Sources, rather than with its actual filename.
You can make the debugger give this a filename by putting the following comment in testouille.js:
//# sourceURL=testouille.js

How to solve TypeError iterator is not a function with prototypejs when jquery is is noconflict mode

I have designed a page where jquery works alongside other libraries like Prototypejs therefore i have put jquery in noconflict mode. However when I resize the window, firebug gives me the following notification
TypeError: iterator is not a function[Learn More] prototype.js:859:7
forEach self-hosted:265:9 each
http://iusefaith.com/js/prototype/prototype.js:859:7 compressEvent
http://iusefaith.com/design/design1/app/common/assets/js/cache/front-2017073101.min.js:6579:13
http://iusefaith.com/design/design1/app/common/assets/js/cache/front-2017073101.min.js:6575:1
I think I have put jquery in noConflict mode the right way. Here is my javascript code in no conflict mode
<!-- include javascript -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$.noConflict();
</script>
...
<script src="js/prototype/prototype.js" type="text/javascript"></script>
...
<script src="design/design1/app/common/assets/js/cache/jquery-plugin-2017073101.min.js"></script>
<script src="design/design1/app/common/assets/js/cache/front-2017073101.min.js"></script>
I am new to this type of error so please How to solve TypeError iterator is not a function with prototypejs when jquery is is noconflict mode ?
I think this is a very specific problem/bug in the resize javascript you are using but - this fixes your js error
line 6579 of front.js in the compress method of windowResizeClass
change the contents of the method from
for (var k in windowResizer.resizeHandlers) {
windowResizer.resizeHandlers[k]()
}
to
windowResizer.resizeHandlers.each(function(item){
item();
});

Javascript can't find the script tag's id

I am facing problem with javascript document.getElementByID function. The HTML file is:
...
<script
id="scriptID"
type="text/javascript"
src="http://external.script.com/file.js">
</script>
...
When the page is loaded, the script is successfully included, but when executing expression from that file (the script is executed automaticaly after loading it):
... = document.getElementById('scriptID').src
The script fails with message saying that "document.getElementById('scriptID') is null".
Can anybody tell me, why it is null if the tag is the script tag itself?
Thx for any response.
EDIT:
I don't know if that is relevant, but the page is built in a bit more complicated way.
There is page of some product. When the customer orders that product, there is a div loaded by AJAX with some "Thanks for order" and that contains the script. Then the script is executed.
May be your DOM is not ready when you are try to get src of script,
<script id="scriptID" type="text/javascript" src="http://external.script.com/file.js">
</script>
window.onload=function()
{
alert( document.getElementById('scriptID').src);
}
Its workinfg fine SEE

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