Develop Reference

Call method in jQuery plugin

I've downloaded The Schedule Template from Codyhouse - it's a jQuery plugin (and CSS) that creates a Calendar Schedule on a div.
The jQuery plugin autoruns since all code in the .js file (main.js) is placed in the document.ready function:
jQuery(document).ready(function($){
..
.. function SchedulePlan( element ) {
this.element = element;
this.timeline = this.element.find('.timeline');
..
..
}
The problem is that the div element I'm trying to apply the Schedule template to isn't created (dynamically created via JavaScript) when document.ready fires.
Is there some way to call the SchedulePlan function from JavaScript, after the div is created?
#calendarDetail is the div. I've tried a few syntaxes, such as:
$("#calendarDetail").SchedulePlan($('#calendarDetail'));
and
$().SchedulePlan($('#calendarDetail'));
But I get this error:
SchedulePlan is undefined
Is there any way to call this method?

The plug in does not expose a method for doing this, so I would suggest to delay the loading of the plug in until you have all your elements with the cd-schedule class loaded in the DOM.
So remove the <script src="main.js"></script> element you have, and instead add this code at the right place, so it executes at the appropriate time:
$.getScript("main.js");

Autocomplete in joomla

I'd like to add the autocomplete to a joomla componenet that I'm developing
I used JQuery
I follwed this exemple
http://af-design.com/blog/2010/05/12/using-jquery-uis-autocomplete-to-populate-a-form/
The exemple work well but there is some problem
1 - When you add JQuery with joomla you have some problems with mootlools
wen I added Jquery with this code
if(!JFactory::getApplication()->get('jquery'))
{
JFactory::getApplication()->set('jquery',true);
$document = JFactory::getDocument();
$document->addScript(JURI::root() . "administrator/components/com_tkcontrack/assets/js/jquery.js");
}
if(!JFactory::getApplication()->get('jquery.min'))
{
JFactory::getApplication()->set('jquery.min',true);
$document = JFactory::getDocument();
$document->addScript(JURI::root() . "administrator/components/com_tkcontrack/assets/js/jquery.min.js");
}
if(!JFactory::getApplication()->get('jquery-ui.min'))
{
JFactory::getApplication()->set('jquery-ui.min',true);
$document = JFactory::getDocument();
$document->addScript(JURI::root() . "administrator/components/com_tkcontrack/assets/js/jquery-ui.min.js");
}
I got some Javascript error with Mootools(thank's to firebug)
2 - Even I think some css does not work any more
Well can someone please help me to add autcomplete to joomla componene, and how to add JQuery to Joomla without having problem
Actually I tried to add JQuery with onther way, edit this file
\libraries\joomla\document\html\renderer
but I does not work I have problem with Jquery then

Not sure on what the error is exactly but it sounds like a conflict.
First of all, you're using the correct method to ensure your scripts only get imported once, however check Firebug see see if you only have 1 of each being imported just in case. You will then need to call noConflict like so:
$document = JFactory::getDocument();
$document->addScriptDeclaration( $noconflict );
What you could also do to import jQuery and jQuery UI only once and in noConflict mode is use the jQuery Easy Plugin:
One of the features that will apply to you is:
places jQuery libraries after MooTools calls for perfect compatibility
Hope this helps

replace above code with
JHtml::_('jquery.framework');
and in your js file start like this
jQuery(document).ready(function($) {
// your code goes here
}
to get ready-made code you can use JQUERY UI in ready function

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
});

Ext.onReady() vs $(document).ready()

Whats the difference? I have on $(document).ready function which should check if extjs is loaded but the main problem is extjs does not load on time and things inside $(document).ready starts to execute, extjs create function which produces the main error 'cannot execute create of undefined' on Ext.create("...", {..}); line. If i put double check like this:
$(document).ready(function() {
Ext.onReady(function() {
Ext.create('Ext.Button', {...});
});
});
Things magically work. Now I'm using ext-all.js which has ~1.3MB minified which is pretty large imho...and things get magically loaded while he does the second check...but I think those 2 functions are not the same as they definitions suggest, because if I put another $(document).ready instead of Ext.onReady() line, things break again. I think Ext.onReady({}); function does some other black magic which $(document).ready() does not, and I'm interested if someone knows what is this kind of magic?
Because it work's and I don't know why which is killing me.
Thanks for reading the post. =)
ps. I'm using ExtJS for about day so I'm pretty new to it.

No they're not the same, the first one will proc when your jQuery library is loaded, the Ext.onReady(.. will proc when your ExtJS library is loaded.
If you want to combine them you could do something like this:
var extReady = false;
var jQueryReady = false;
var librariesReady = function () {
if (jQueryReady && extReady) {
//They're both ready
}
};
$(document).ready(function () {
jQueryReady = true;
librariesReady();
});
Ext.onReady(function () {
extReady = true;
librariesReady();
});

Ext.onReady() and $(document).ready() have nothing to do about either library being loaded as the current accepted answer suggests.
According to the documentation both are about the DOM being loaded and ready.
Documentation
Ext JS: https://docs.sencha.com/extjs/6.7.0/modern/Ext.html#method-onReady
jQuery: https://api.jquery.com/ready/
An Answer to Your Case
It's possible that you're loading the Ext JS resource after your script fires, but jQuery is already loaded above your script. Thus using jQuery to wait until the DOM is loaded guarantees that the DOM has been loaded and thus by then Ext JS has also been loaded.
If you try to invert them and us Ext JS first you'll likely have an error.
According to the documentation they're doing the same thing so you shouldn't need to nest them
A Fix for this Scenario
If you are loading your resources like so:
jQuery
Your Script
Ext JS
It would be best to load them in this order:
jQuery and/or Ext JS
Order shouldn't matter as they can stand by themselves without requiring one or the other
Your Script
Additional Explanation
Due to how the DOM is loaded and parsed by the time it reads your script it guarantees that jQuery and Ext JS are available. This is why you can reference their libraries in your script; you're not waiting for them to load they're already there and available to be used which is why you can call them and use their ready calls.
You need to use the ready event of one of the libraries to guarantee that all elements are loaded into the DOM and available to be accessed. You also shouldn't try to add anything to the DOM until it's ready although you can append to current elements that have been loaded above your element/script tag. It's just best practice to not touch the DOM until it's finished loading.
Additional Explanation Nobody Asked For 🔥
Handling DOM ready is more involved than these libraries make it which is why they both include such an event handler.
The following link explains with vanilla JS how you cannot only add your event listener you also need to check if it has already fired when you go to add your event listener for DOM ready. This is a common case to handle with eventing - where you create a race condition where an event may fire before you start listening for it - then you don't know that it ever happened without another way to check.
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded#Checking_whether_loading_is_already_complete

They both check for when the DOM is ready.
If you need Ext to be loaded when using jQuery, try to invert the logic (don't know if it will work, haven't tried).
Ext.onReady(function() {
$(document).ready(function() {
Ext.create('Ext.Button', {...});
});
});
Another StackOverflow question on this subject: Extjs + jQuery together

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>