Creating a very simple jQuery plugin, not working - javascript

I've never created a jQuery plug-in before. I'm trying it out and keeping it simple for now- here's my plug-in code which is hosted on a CDN in my company:
(function ($) {
$.fn.displayToastrNotifications = function () {
alert('test');
};
})(jQuery);
I'm referencing this JavaScript file inside my page:
<script src="http://server/sites/CDN/Scripts/toastr-notifications.js"></script>
Finally, in the same page, I have:
$(document).ready(function () {
$.displayToastrNotifications();
});
Am I doing this right? The JavaScript file containing my plug-in code is being brought back to the browser per Firebug. I do not get an alert box when I refresh my page. What am I doing wrong?
EDIT
The console reports an error:
TypeError: $.displayToastrNotifications is not a function
$.displayToastrNotifications();
But, it is a function, at least I think it is...

No, that's not right. You're adding the function to $.fn, so that means it's something to be used as a method of jQuery objects:
$(something).displayToastrNotifications();
If you want a "global" function like $.ajax, then you'd set it up as just a property of $, not $.fn.

since it is a plugin it need to be invoked in a jQuery wrapper object like
$('body').displayToastrNotifications();
Demo: Fiddle

Related

Is there a way to use jQuery functions if they are not defined in the `$(document),ready` function?

I have several scripts and the $(document).ready is being defined in another script. I tried defining functions in another file that make use of JQuery syntax but they don't work. Is there a way to use jQuery functions if they are not defined in the $(document),ready function?
Here is my first script. it's just a ready block (yes its empty):
$(document).ready(function () {
});
This is my second script:
function editPage() {
$("#mybutton").click(function() {
alert("Clicked");
});
}
editPage();
It does not work.
The second code does not work. They are in different files. The first script is always loaded. I have the jquery library defined. If i place the click code in the first script, it works.
This is ASP.NET MVC 5
If I understand you correct, as long as you reference JS file earlier, you can use it in all other files which is coming later in sequence.
In following scenario, you can use Jquery in "your-test-file.js"
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.min.js"></script>
<script src="/your-test-file.js"></script>

Why function in Javascript file does not load in master page?

I have a master page that has javascript files added with asp:ScriptReference, but in document.ready ( $(function(){}) ) the functions defined in the Javascript file do not load, and I get this error:
Microsoft JScript runtime error: Object doesn't support property or method 'nanoScroller'.
Whereas the same code runs in other simple projects.
Dear friend if you are using ajaxtoolkite and you are using updatepanel or scriptmanager then jquery make a conflict with it so you can use the following 2 method to make your code work properly the bellow code will solve your problem
$(document).ready(function() {
// bind your jQuery events here initially
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
// re-bind your jQuery events here
});

Using jQuery noConflict() with script.aculo.us

I have a site using a "widget" (from http://healcode.com) that includes the script.aculo.us JavaScript library. The problem is that the site I'm building is on WordPress, so there's the classic jQuery vs script.aculo.us conflict.
I know that I need to run jQuery in .noConflict() mode, but I must be getting the syntax wrong. When I assign the $ to jQuery .noConflict as follows, it still shuts down the script.aculo.us functions:
var $ = jQuery.noConflict();
$(document).ready(function () {
//#nav-main dropdown effects
$('#nav-main ul li').hoverIntent(function () {
$(this).find('.dropdown').stop(true,true).slideDown('900'); },
function(){
$(this).find('.dropdown').stop(true,true).slideUp('500');
});
}); // end document.ready
I know that I am assigning the $ to jQuery in .noConflict() mode, and I assume that script.aculo.us (which loads via a widget in the main body, therefore AFTER jQuery) is trying to re-assign the $ back to script.aculo.us.
How can I assign the $ to jQuery in a way that the later-loaded script.aculo.us library won't conflict? I've already tried the following without any success (the following code causes script.aculo.us to work, but jQuery to fail):
jQuery(document).ready(function () {
//#nav-main dropdown effects
jQuery('#nav-main ul li').hoverIntent(function () {
jQuery(this).find('.dropdown').stop(true,true).slideDown('900'); },
function(){
jQuery(this).find('.dropdown').stop(true,true).slideUp('500');
});
}); // end document.ready
EDIT
The debug console output for the above code is:
Uncaught TypeError: Object #<HTMLDocument> has no method 'ready' (anonymous function) so the document.ready fails because it's assigned to jQuery, which is somehow not loading properly...
EDIT 2
Both of the 2 (at the time of this update) answers posted below do nothing to address the issue I'm struggling with. Perhaps they are technically correct, but they do not address my issue.
This worked for me so that I can have jQuery and script.aculo.us/Prototype working well together. Credit goes to codeimpossible for this lifesaver!
Instead of:
jQuery(document).ready(function () {
// Code to run on DOM ready
}); // End document.ready
Try this:
( function($) {
// Code to run on DOM ready
} )( jQuery ); // End document.ready
I found the solution VERY surprising!
First of all, using the $j = jQuery.noConflict(); mode did not work.
Second, calling jQuery.noConflict(); at the head did not work.
The method that did work was this one: http://codeimpossible.com/2010/01/13/solving-document-ready-is-not-a-function-and-other-problems/
Oddly, the Coda Slider 2.0 plugin does not automatically do noConflict so it turned out that IN ADDITION to the problems listed above, I needed to wrap that plugin in .noConflict(); as well. Shout out the the author of the blog post, not sure why other noConflict(); calling methods didn't work, but I'm glad I found the post.
Assigning jQuery right back to $ doesn't do anything.
Either assign jQuery to a different variable:
var j$ = jQuery.noConflict();
Or don't assign it to anything:
jQuery.noConflict();
Try this:
<script src="url to jquery"></script>
<script type="javascript">jQuery.noConflict();</script>
<script src="url to scriptaculous"></script>

Drupal problems with noConflict JQuery

Hi I am trying to make a jquery no conflict work as descriped here:
http://drupal.org/node/1058168
I have this in my php template:
<script type="text/javascript">
var $jq = jQuery.noConflict();
</script>
I modified my javascript accordingly. But it does not work... it starts the first function, but then after it, it does not run any of it:
$jq(function () {
console.info('First $JQ function');
//"use strict";
// this function is strict...
$jq(document).ready(function () {
The $jq(document).ready(function () does not run, hence the whole script stops. The full script is located at www.htconsulting.hu/sites/validation.js
Thank you for your help!
Update:: removing the first $jq(function () did help to at least remove the dougle ready functions. Still it does not solve the problem I faced initially for which I use the noConflict. Part of the code would ensure that based on input thhe input area color changes, as the helper text next to it. The text still does not change. Since in my testing enviroment everything worked, I assumed its because the site I am forced to use, uses old Jquery. Appereantly, using the newer one still does not solve the problem. Form located at www.htconsulting/test/form
$jq(function () {
is equivalent to
$jq(document).ready(function () {
http://api.jquery.com/ready/
So basically you have a document.ready inside of a document.ready. I don't think that works, try removing the inner ready and see if that helps.

jQuery: Trigger help

I'm using the cluetip jQuery plugin.
I'm trying to add my own close button. The the jquery I'm trying to call is:
$(document).bind('hideCluetip', function(e) {
cluetipClose();
});
There are many references to cluetipClose() through the code and the button that the jquery inserts uses it and works so that function as far as I'm aware works fine.
I'm trying to trigger that using
$('a.close-cluetip').trigger('hideCluetip');
I've created my link:
Close
But it isn't doing anything.
Am I calling it incorrectly?
The problem here is that in the cluetip plugin, the function clueTipClose() is inside a closure, so you have no access to it unless you're inside the closure (i.e. inside the plugin's code). Now I've gotta admit, this plugin doesn't seem to be set up to be all that extensible. If they made this function accessible via a "clueTip" object that was set up for each element that uses it, you'd be able to add another jQuery method to the end of the closure like this:
$.fn.cluetipClose = function() {
return this.each(function() {
var thisCluetip = findCluetipObj(this);
if (thisCluetip)
thisCluetip.cluetipClose();
});
};
But you have the unfortunate luck of not being able to do this easily. It looks like this guy wrote his jQuery plugin with non-OO code inside of a closure. Poor you.
Now on the plus side, it seems this plugin is already running this code directly after it instantiates the cluetipClose() function. Have you tried just doing this from your code:
$('a.close-cluetip').trigger('hideCluetip');
Without redeclaring the document hideCluetip bind? I think that should probably work.

Categories

Resources