I use JQuery in my django project quite often, and it hasn't been a problem so far. Even in my current project, I use it on multiple pages. But on one page, I get this error in the console:
Uncaught ReferenceError: $ is not defined
This is my JQuery Code:
$(document).ready(function(){
console.log("hello")
})
This is what I imported in my base.html:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
Like I said I used JQuery a lot in this project so and it worked fine so far. I also did extend Base.html properly.
What could be the problem?
This error might be caused by these following things:
You're using the slim version of jQuery, that excludes all Ajax, effects and deprecated code, I am not familiar with this package, so you might want to try the normal package
jQuery is loaded after your script, in your case, you might have extended a block that is contextualized before importing jQuery or maybe some JavaScript is running before the page is loaded, and before jQuery is fully loaded
jQuery is not loaded due to network errors or Cross-origin resource sharing, check the network panel in devtools/firebug aswell as the console for logged errors, to check if it's loaded, try calling $ in your console
Try comparing how you imported jQuery in the other working templates. Are they extensions of the same base template? Are all of your blocks correctly named? Is your script being run after jQuery is imported?
Related
When you want to add firebase to a web application it gives you some links to write in the html file. I've coppied and pasted those links in my project but an error appeared in the console. I've realized that writing (taking out "-app" in one of the links):
<script src="https://www.gstatic.com/firebasejs/7.12.0/firebase.js"></script>
instead of:
<script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-app.js"></script>
works perfectly.
Is that normal? Am I doing something wrong?
As explained in the doc,
<script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-app.js"></script>
is the core Firebase SDK and is always required and must be listed first. But then you need to add the imports for the other SDKs you plan to use, like, for example:
<script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-firestore.js"></script>
On the other hand, you can include the entire Firebase JavaScript SDK, rather than individual SDKs, as follows:
<script src="https://www.gstatic.com/firebasejs/7.11.0/firebase.js"></script>
Doing this way, all the Firebase SDKs will be imported, but it is not recommended for production apps, as stated in the doc.
So a couple of month back I wrote a test sender to get some experience with Cast senders. It worked fine and I could send images and videos to my Chromecasts.
I now need to create a custom receiver and I wanted to use my old sender to test my receiver code. However, my sender doesn't work anymore eventhough I didn't change anything since then.
The errors i'm now getting in Chrome's console are the following:
GET file://www.gstatic.com/cast/sdk/libs/sender/1.0/cast_framework.js net::ERR_FILE_NOT_FOUND
Uncaught ReferenceError: cast is not defined
at window.__onGCastApiAvailable (script.js:84)
at chrome.cast.cb (cast_sender.js:99)
When I look at the "Network" tab I can see that the cast_framework.js file failed to load after 22s.
I then tried to use the sample on Google's Github to see if it was my sender that was at fault but I get the same error.
I also can reach the devices with the Cast button in Chrome's menu.
What is going on with that file? Is it my browser that has a problem? Is it my devices?
So the problem was the following:
As you can see the browser was looking for the file with file://. This happens because I launched my HTML file locally so the url in the browser was file:///home/.../index.html and I guess when it loads the framework file it guesses that it has to use file:// too instead of html://.
Someone told me that I should serve the file from a server so I made a brief Node server with express.static to serve the file and it then worked again when I loaded the page via localhost:4000.
I still don't know how it worked a couple of month ago but I guess I was just lucky in some way.
Upon checking, this file below is visible:
www.gstatic.com/cast/sdk/libs/sender/1.0/cast_framework.js
You might want to try putting these codes inside your head tag in your html file that calls "script.js":
Check this Github Guide
Include the cast_sender.js tag
Add the script tag to your HTML page
<script type="text/javascript" src="www.gstatic.com/cast/sdk/libs/sender/1.0/cast_framework.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"></script>
I like working with the Brackets code editor for most of my projects. However, my team is doing a particular project right now for which we are going to need to create multiple re-usable components to provide prototype demos. We've used a GIT workflow to build all the various components and put them together on multiple prototype HTML pages.
However, every time the designer wants to make an update to a particular component/widget - we need to update it manually across all of the prototype pages.
I'm seeking a way to make a reusable code block like how Adobe Dreamweaver uses Library Items to streamline this workflow https://helpx.adobe.com/dreamweaver/using/library-items.html
I can't locate the equivalent in Brackets. I looked at this plugin https://github.com/chuyik/brackets-snippets - but I don't think it's what I need.
Is there a convenient solution to this? Perhaps I can just use import functions embedded in the HTML code to insert/import widget HTML code from another dir?
Update:
I have just attempted to use a JQuery solution as proposed here Include another HTML file in a HTML file but previewing the file locally - it does not appear to work. It gives an error like so
XMLHttpRequest cannot load file:///D:/Ryan%20GitHub/SLQ-Homepage-with-packery/html/widget-social.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.k.cors.a.crossDomain.send # jquery.js:8625
I think I need to try this on a local server - shame it won't work on local preview :#
Best solution I can come up with for the time being is to use jQuery as I'm already using the library for interactions on our pages.
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
Unfortunately, it does not work or preview locally in my Chrome browser because of the cross domain blocking protocol. It's not that fast either but it will do.
Well you could use PHP includes. They work similarly as what you are describing with jquery. Simply put, create the file that has the code you want and name it something.php Then do a simple php include.
<?php
include('something.php');
?>
You can also organize the includes into a folder called inc to keep it more organized. I do this for all my website for footers, nav's, menues, etc. I update one file and boom, it updates across every webpage at once. Been doing this for years. Hope this helps anyone else that comes across this, since it is an older thread.
this is more of how does it work question than a problem.
I building a polymer app and need to use jQquery text function. So I simply call $(this.variable).text(). It all works perfectly.
When removing this script include :
I receive the below error
Uncaught ReferenceError: $ is not defined
Nowhere else I include jQuery. So my questions are : If another script includes jQuery does it make jQuery included in hte current app? Does Polymer never includes jquery?
Currently, scripts included in a web component execute in the global scope. That is to say while shadow DOM sandboxes HTML and CSS, it does not currently do that with scripts. There is some discussion of this type of isolation occurring, but it appears to be long off.
So if any web component included jQuery in the global scope - it would be available to any other web component.
While any particular polymer element COULD include jQuery, I've yet to see one that does. The Polymer library itself most certainly does not include jQuery.
For the past 3 months I have been struggling with the Google sites "insert html box" to get the CDN to serve the Jquery user interface library-jqueryui- without any success.
I have used the following code and its variants without any themes but to no avail;
The jquery library loads fine but not the jqueryui library. The Google developer site suggests that this should work, but I only get these error messages - failed to load external url jquery-ui.css OR folding element body into parent
What am I doing wrong?? Getting frustrated here!
Apparently this is a known bug. Take a look at the answer here
There is a bug link to the actual issue and a possible workaround.
Following the hint about jQuery not always working in HTML boxes, I experimented and found that some versions of jQuery UI will load!
As of today, I was able to load the following versions:
1.8.21,
1.8.20,
1.8.18
or, using the direct links to Googleapis:
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.20/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
All other versions mentioned on https://developers.google.com/speed/libraries/ would not load.
That being said, I encountered more trouble when trying to link to the CSS themes. I couldn't find any way to get an HTML box to accept links to googleapis hosted jQuery UI CSS files.
I tried pasting the CSS directly into the HTML box, but the url() links to images are not kosher. Commenting them out resulted in my getting the HTML box editor to be at peace, but the attempt to make tabbed panes work was not successful.
To say that one can do jQuery inside a Google Site is almost an exaggeration.