I'm trying to upgrade a site template that uses mainly jQuery 1.08 to use 1.11, since a widget I want to connect to the subscribe form uses 1.11.
Here's the template I'm using:
http://multifour.com/projects/ray/ios/image-intro/index.html
What's weird is if I use the following code, the header is there but the form doesn't work properly:
<script src="scripts/jquery-1.11.0.min.js"></script>
And if I use this code, the form works but the header disappears:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
I can't use both either, because whenever I enter the second line the header disappears for some reason. What gives, can someone please help me? Thanks!
For your first problem
I checked your directory for the jQuery script and it returned a 404. Perhaps you updated it because I noticed a different jQuery version being loaded in your view source.
http://multifour.com/projects/ray/ios/image-intro/scripts/jquery-1.11.0.min.js
For your second problem
Ya, I've actually included the jquery file in the scripts directory and either way I thought reading it in through googleapis would include jquery anyway. The console is reading two errors, saying that $().smoothScrool and $.stellar aren't functions in a custom.js file. If you check out the source code of the template I linked to and bring up the custom.js file (line 498), it's the exact same as the one I'm using locally. Thanks for your help so far, guys.
You should use some kind of Javascript Loader because your custom.js is loaded before your jQuery libraries are loaded and thats why you would be getting the error $().smoothScrool and $.stellar aren't functions. Maybe try the HTML5 async Javascript attribute.
http://www.w3schools.com/tags/att_script_async.asp
Related
Recently I've discovered AngularJS as mentioned in the title. After some lectures I'm trying to use this plug-in in order to obtain some dragNdrop feature for my web-page. I've downloaded the code from the git's master but nothing seems to work as planned. All the pages are filled with the AngularJS's syntax.
code result
I've tested the example on 3 different browsers but the result is always the same. The question is: what is the missing step for a correct browser-interpretation of the code? What do I need to include in the stock files given by the owner?
i'm not sure, but i think that the problem is that you're trying (according to attached screenshot) to load nested.html that is sort of "view page" (according to gihub repo), because of that there are no links to angular libs there. That's why try to include angular.js to your page or load index.html instead of nested/nested.html.
I hope my answer will help you to solve your problem.
My need is to display OrgChart vertically and found getOrgChart is the one to try. I downloaded the js file from here and followed the instructions but I am getting getOrgChart is not defined. I did alert(jQuery) to check whether the jquery is loaded and everything working fine. I tried the sample demo ones which came with the free download package and those are also getting same issues $(...).getOrgChart is not a function. Please let me know what could be the issue? Do I need to purchase the full version to get it worked? I wanted to test the free version first and then buy the license one.
Are you sure to include the javascript source in your HTML?
<script src="../getorgchart/getorgchart.js"></script>
<link href="../getorgchart/getorgchart.css" rel="stylesheet" />
Before calling any javascript function it needs the related javascript library files should be declared before. So please check it before the calling that library files are added.
I included a javascript file in typoscript (typo3 6.2) , but I can't select anything using the $ selector , the console tells me that $ is not defined . I'm quite sure that the javascript file is successfully included because when I use the document.getelement... selectors they work fine .
I have no idea why this is happening ?
any idea ??
thanks
You didn't include jQuery file and/or your jQuery is included too late (i.e. after including your JS file)
Use browser's dev tools to check the order of inclusions.
The main jQuery library is missing or isn't inialized properly (i.e. you're trying to access functions from it before you include it to your page).
Make sure that it is loaded before any other parts of your page try to use the $ selector.
In layman terms put
<script src="js/lib/jquery-1.10.2-CUSTOM.js"></script>
before other scripts..
I am working on a Magento Extension. Magento has a known issue when you try to use jQuery in Magento because Magento uses the Prototype library.
The work around for it is to put your jQuery code in no conflict mode like this...
jQuery.noConflict();
Once I did this, it resolved 90% of my problems i was having with JavaScript errors. However I still have 3 major problems with JavaScript right now and I believe they are related...
Uncaught TypeError: undefined is not a function
http://www.codedevelopr.com/screenshots/2014/2014-08-23_16-14-37.png
When I view the line numbers that it is reporting these errors from I see this...
Line 1168 jQuery(".acc-wizard").accwizard({ now this accwizard() is a function that is loaded from a jQuery plugin file. I have verified the file is loaded and it is loaded after my jQuery and after I set the no conflict mode for jQuery. I am not sure if something in the plugin file needs to be changed as well to work with the no conflict mode or why it is saying it is undefine?
Same situation with simplecolorpicker() on line 1180.
I have uploaded the file that holds the accwizard() jQuery Plugin, it is about 14kb in size and can be found here http://www.codedevelopr.com/screenshots/2014/acc-wizard-bs-3.js I figured it is a little to large to post that code here.
Can anyone help me to get these errors resolved? It seems any jQuery plugin I try to use results in this undefined error above?
UPDATE
So I have been experimenting with a lot of things with no luck...that is until I tried loading all my JS files inline in my actual template page that my extension uses...once I do that, it all works with none of these errors.
This is frustrating though as I much prefer to have separate JS file for my JS...instead of loading 3 JS files I even tried putting all 3 into 1 file and loading that 1 file but I still get the JS errors...now when I copy that 1 file that had all 3 files combined and put it directly in the template file...everything works perfectly! This makes no sense to me, please help?
There's not enough context in your answer to pinpoint the reason, but it sounds like your web browser executes the code ...
jQuery('foo').accwizard
BEFORE it has downloaded and initialized the plugin that defines the accwizard method.
How do I include jquery and other scripts in my firefox extension? I know this topic is a copy of many other questions asked on SO, but none of them were so helpful.
I tried using in one of the JS files where i want to use jquery,
Components.utils.import('chrome://myaddon/content/jquery.min.js');
but it gives me an error saying,
ReferenceError: window is not defined
I also tried adding the script in XUL file, but somehow, I cant get it to work as well.
Is there any other way around it?
Ok man here's the solution to using Custom Events.
Much thanks to #M.J. Saedy for figuring this one out.
Gist - HERE is a template that will listen to custom events dispatched from non-privileged scope.
You can't import a library to use in your addon. What you gotta do is inject that into the web page you want to use it on.
Is this a bootstrap addon? Did you make a chrome.manifest? Before injecting to websites you have to make the injectable stuff contentaccessible in the manifest.
so an example manifest file:
content myaddon ./ contentaccessible
then your code of Cu.import('chrome://myaddon/content/jquery.min.js') will work
if you want to use this library in an iframe for like a panel. put in that iframe <script src="chrome://myaddon/content/jquery.min.js">
Let me know if you need more help, if you upload it to GitHub I can see what exactly you're doing