Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have a thumbnails scroller driven by a jquery plugin, everything works fine.
The plugin that I'm trying to integrate works perfect individually but when I try to add on my actual markup I check it with Firebug and I receive this strange error: Uncaught TypeError: Cannot call method 'extend' of undefined
I can not post the entire markup on jsfiddle or here so I prefer to give you a link to that error maybe you can help me understand what's happening. It's very stressful.
Here is my attempt.
You are running jQuery in so-called "no-conflicts" mode. This basically boils down to not using the $ function as an entry point. If your module is not programmed with this in mind, you will see failures such as this one.
Either: 1) do not use jQuery in no-conflicts mode
If you are not planning on using other javascript libraries (and really, one is enough I assure you) then you're perfectly fine taking this route,
Simply remove this code
* jQuery.noConflict() for using the plugin along with other libraries.
You can remove it if you won't use other libraries (e.g. prototype, scriptaculous etc.) or
if you include jQuery before other libraries in yourdocument's head tag.
[more info: http://docs.jquery.com/Using_jQuery_with_Other_Libraries] */
jQuery.noConflict();
... and check out the documentation that comment references for a deeper understanding: http://docs.jquery.com/Using_jQuery_with_Other_Libraries
Never hurts to read the docs!
Or: 2) Fork and fix the source code of the module (if it is on github or other open-source repository)
You'll need to re-write the module to use the safer entry point jQuery instead of assuming that $ is available (as it currently does). You can also just correct your copy, but if you're doing the work you may as well put it in a place where someone else can benefit too -- after all, you're benefiting from the work of others (jQuery, the module, etc) :D
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I am writing my first html application. I have both JavaScript and jQuery embedded at the bottom of the html file.
Is it a good practice to mix JavaScript and jQuery together?
Currently, I am importing jQuery 3.3.1; what if next version comes out? How can I make the imported jQuery dynamic?
Answering your questions one by one.
First of all, you are keeping your scripts at the bottom of the page. And that is really a good practice to keep all the scripts at the bottom of the page so that it will not block rendering of the page.
Second, mixing JavaScript & jQuery code is completely a personal choice. But still, I would recommend going with either JavaScript or jQuery to maintain code consistency & it's understandability. It will be easier for other developers to understand code that is written in a consistent way. Though, there might be some points where you would like to prefer JavaScript to achieve performance & you should do that but such cases will be very few.
Best Practice: Write all your scripting code in separate file & take reference of that file in your HTML page.
Don't worry about the jQuery version updates. Current jQuery version is very very much stable, so even if the newer version comes up - you would not need to switch to that version until or unless you are blocked for some feature that is only available in the latest version.
This will be your Jquery which is in your system
<script src="jquery-3.3.1.min.js"></script>
and if you thinking according updates then you should go with CDN links
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
1) JQuery is a JavaScript framework. You can write the same exact thing in plain JavaScript that you can in JQuery. The difference is that JQuery will often be shorter and perhaps easier to read. So in short they are meant to be mixed together.
2) Also, if a new version of JQuery comes out nothing will happen to your project. Jquery is just a bunch of plain Javascript that makes things easier for you. It won't stop working because a newer version is available.
Jquery is Javascript I don't think it is bad practice to mix them!
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
There are many ways to use JavaScript. When I use JavaScript with an anchor, I write code like this and I think this way is right.
Method One
But my co-worker uses JS like this.
Method Two
Is there a coding standard or are both methods correct?
DISCLAIMER: Inline JavaScript is, generally speaking, a bad idea, and 99% of the time you're much better off separating concerns, and using a library, such as jQuery, or whatever similar toolset that your framework of choice recommends.
Nonetheless, to answer your question, if you must use inline JavaScript, I recommend that you omit the "JavaScript:" keyword. It specifies a "pseudo-protocol," and is not necessary for modern browsers to interpret the code. It is a relic from the last decade, and there is a bug with some versions of IE:
"There is one (somewhat obscure) bug with the javascript protocol - in
Internet Explorer*, it will think you are leaving the page when you
click the link. If you are using window.onbeforeunload, then your
navigate-away message will appear at this time. For this reason alone,
we've stopped using the javascript protocol completely so we don't
have this bug show up because we forgot to check for it when we add a
navigate-away message to some page."
When do I need to specify the JavaScript protocol?
https://bytes.com/topic/javascript/answers/504856-javascript-pseudo-protocol-event-handlers
Both the ways are ok but in first way you should use a external JS file. Otherwise it is ok.
For small tasks and events second ways is good.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm learning web development now and have been going through many websites and looking at the source code through Chrome's developer tools. This has been helpful in understanding HTML and CSS.
However, I am unable to make any sense of the Javascript. If they link an external javascript file, I open that file and try to read through. I know its minified but I don't think I'd be able to make sense of it regardless. If they have Javascript directly in their code, I'm still unable to make sense of it.
BTW - I have gone through a few Javascript tutorials so I'm at least a little familiar with JS.
Am I missing something here?
Thanks
There's a special button which looks like this: { }. It can be found under the source code in the Sources tab. It prettifies the code for you :D
Please Note: Jumping in to reading some websites code is a pretty poor way in a lot of cases, of learning javascript. Best to write your own, and read others from a repository liek github, or pastebin, or plunkr, or jsfiddle, etc.
That said:
Using your browsers debugger you can see the javascript files being used in the page. I'm guessing you already know this since you've found minified javascript files. 2 issues to address:
How to make sense of a minified file: firefox has an unminifier feature. Very google-able.
Given a javascript file, how to see what it's doing. I would suggest creating a breakpoint on a line in the javascript file that you know will be hit when you do something on the web page. Find a button in the html, see what click function is attached to it, then go into the javascript file and find that click function by name using 'ctrl-f' to find it. Then create a breakpoint on a line in the function you want to debug. As soon as the breakpoint is set, once you click the button, your deubgger will stop the code right on the breakpoint, you can then step through the code to your leasure. All of these key concepts and keywords are googleable. This should give you a headstart to answering your question.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
On my following website every function that related to javascript (using bootstrap framework) isn't working properly. Today when I began to work on it the application worked fine and the only thing I changed on the website that could affect the page itself / all pages that the website contains is the navigation bar that I edited when I added a simple green button, that when I delete it will not fix the error. I've been searching and testing for days and can't find the solution.
Whenever I view the error logs there is one simple error
ReferenceError: $ is not defined (index.php:110)
that refers to
<script type="text/javascript" >
$(document).ready(function() {
$('.carousel').carousel()
});
</script>
which should only affect the home page as this file is not called on any other part of the website.
However, as I don't know where to start searching in the code for this error, I can't really post the whole code here. However it can be viewed on the link above. I'm actually just searching for a position to start fixing or looking for some typos or whatever, but I got confused because it worked before I added a PHP-script which doesn't affect the websites state at all.
Any clues? Thanks for answers.
My guess is that the jquery file is not properly linked.
You have to consider that your main html has to link to the custom javascript code AND a javascript library code, wich can be hosted in your local server or somewhere in the internet.
Make sure you have something like this in the body of your Html file, and before your custom js code:
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
The jQuery library is not loaded yet - or at all.
You forgot to load the jQuery library. Be sure you load it before all your javascript code and before bootstrap library also.
You should load bootstrap after jQuery, and you should execute the code below only after you load jquery.js and bootstrap.js
$(document).ready(function() {
$('.carousel').carousel()
});
Note: Any code that has to do with $ it's linked to jQuery, so you have to use it after (not before) the jQuery library. I recommend you to use all your Javascript code just before the </body> tag
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I've been writing Javascript with jQuery for a while, I can make it do what I want, but I've never written anything really reusable or modular. Now it's time for me to take that step and write proper reusable Javascript.
I thought I'd start with something I've implemented countless times, a confirm delete dialog. I want to be able to specify a function to execute on confirm and a function to execute on cancel.
The way I see this working (and this is open to criticism) is to do something like:
$(element).confirmDialog(function(){
// this is the cancel callback
},
function(){
// this is the confirm callback
});
I'd also like the dialog to show based on a data attribute on the link, rather than having to write an .on('click'... handler each time, but I don't know how to 'link' the specific confirmDialog with the function which handles the .on('click'....
This is really as far as I've got so far. I know that as I want to be able to add the functionality to any element I need to define confirmDialog() as $.fn.confirmDialog = function(){...}.
Although I can implement the entire thing in an ad-hoc way, I'm unsure as to how to implement this functionality as a clearly defined, loosely coupled reusable module.
Could someone help me get my head around how to structure this module, or provide a link to a very thorough tutorial which is specifically about writing reusable Javascript?
You can read more about how to create jQuery plugins at the following links:
http://learn.jquery.com/plugins/basic-plugin-creation/
http://www.codeproject.com/Articles/291290/How-To-Write-Plugin-in-jQuery
NetTuts videos are particularly useful:
http://net.tutsplus.com/articles/news/learn-how-to-create-a-jquery-plugin/