Develop Reference

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>

Function is not found in Jquery, but is found in Javascript

I have an html document in which a function is called like this
<div id="mon" class="topbar" onclick="verd()">
This calls a jquery function inside the body tag that goes like this
<script src="jquery.js">
function verd(){
$("#stillmain").empty();
} </script>
This returns the error:
Uncaught ReferenceError: verd is not defined
at HTMLDivElement.onclick
When I change the script to pure Javascript without Jquery however like this
<script>
function verd(){
$("#stillmain").empty();
} </script>
it does recognize the function verd(), can anyone explain what is going on, and how I could still use Jquery?
I am using the newest version of Jquery(just changed the name, nothing else).

When you give a script tag a src attribute it's going to load that source file in place of the script contents. So any script tags with a src should be kept empty.
You need to load jQuery by calling a script tag with its source on it, and then in a separate tag you can make your own script tag and write your custom JavaScript there.
<script src="jquery.js"></script>
<script>
function verd(){
$("#stillmain").empty();
}
</script>
Make sure that your custom scripts are loaded after jQuery.

If you want to run this as a jQuery function you need to use the proper syntax. Try the link below.
How to Create a jQuery Function
Also, you need to load jQuery in a separate tag or else none of your code will be ran other than the source of that script!

Error with jQuery on AngularJS app

I'm trying to function this code
But when I use it on my Angular app, I found some errors, and it seems to be jQuery
var element=$('.cds'); //the problem is right here (angular.element('.cds') is the same)
console.log(element.html()); //prints undefined,
// so, no animation
How can I fix it? Any ways to use jQuery edge?
index.html
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bundle.js"></script>
As the code is in bundle.js, created with browserify, should I call jQuery too? Like var jQuery=require('jquery');? or something. Thanks for your help

Try this line in your code, after definition of done(). It will not work.
console.log($('.cds').html());
Now click the javascript button and select 'OnDomReady'
Now it works. You cannot use jQuery until domReady event.
EDIT
This is the most classic method for jQuery
$( document ).ready(function() {
/* The DOM is now loaded and can be manipulated*/
});

Try using angular's built-in jqLite first before anything ...
$scope.el = angular.element('.cds').html();
console.log($scope.el)
Or if you want to user pure jquery then try searching the parent for your element an store this in a variable :
var el = $('.container-class').find('.cds');
console.log(el.html());
Hope this helps

Two different versions of JQuery in the same HTML page

I have an HTML document where I have referenced jQuery version 1.2.2 in the header for thickbox and I have later referenced jQuery 1.7.1 just before the </body> tag which is for a picture slideshow.
The problem is that the thickbox won't work unless the reference for jQuery 1.7.1 is removed which then stops the slideshow from working.
I have googled around to find out about $ conflict but none of the suggested solutions worked.
The most common one I have seen and did tried is: var $j = jQuery.noConflict();
How can I resolve this?

<script src="http://code.jquery.com/jquery-1.2.2.min.js"></script>
<script type="text/javascript">
var jQ122 = jQuery.noConflict();
</script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
var jQ171 = jQuery.noConflict();
(function($) {
$(function() {
// here $ is jQuery 1.2.2
});
})(jQ122);
(function($) {
$(function() {
// here $ is jQuery 1.7.1
});
})(jQ171);
</script>

If the plug-ins are well-behaved, then this should work:
<script src="jquery-1.2.2.js"></script>
<script src="thickbox.js"></script>
<script src="jquery-1.7.1.js"></script>
<script src="slideshow.js"></script>
(Obviously those script names are made up.) Here's an example (source) (I used jQuery 1.4.2 and jQuery 1.7.1 because Google doesn't host 1.2.2).
The above works with well-behaved plug-ins because a well-behaved plug-in doesn't rely on the global $ at all, but rather uses the value of the jQuery global as of when it was loaded and grabs a reference to it in a closure, then uses that local reference throughout the plug-in's code, like this:
// Example plug-in setup
(function($) {
// ...Plug-in code using `$` here -- note it's a *local* `$`,
// not the global `$`, and not the global `jQuery`...
})(jQuery);
or
(function() {
var $ = jQuery;
// ...Plug-in code using `$` here -- note it's a *local* `$`,
// not the global `$`, and not the global `jQuery`...
})();
Both of those grab the global jQuery value as of when the plug-in is loaded and then use their local alias throughout.
If the plug-in wants to wait for the ready event, it can also do this:
jQuery(function($) {
// ...Plug-in code using `$` here -- note it's a *local* `$`,
// not the global `$`, and not the global `jQuery`...
});
...which uses the jQuery function passed into the ready handler.
Any of those three would work correctly (with thickbox seeing jQuery 1.2.2, and slideshow seeing jQuery 1.7.1) with the script load order listed above.
But the "if" in my opening sentence is a big "if". A lot of plug-ins are not written to be bullet-proof in this way.
The above notwithstanding, I would migrate away from any plug-in that requires jQuery 1.2.2 in order to work, and wherever possible (and it's almost always possible) avoid having to load two different versions of any library, including jQuery, in the same page.

I would not advise using two different versions of jQuery. There are some other alternatives to thickbox that works perfectly with the latest jQuery.

What you want to do is an extremely bad practice (you should indeed migrate all code to the same version) but it can theoretically be done...
You would need to make changes to the respective plugins anyways tho...
consider this code:
<script src="jquery-1.4.js"></script>
var jQuery14 = jQuery;
<script src="jquery-1.7.js"></script>
var jQuery17 = jQuery;
you would then change the code of your plugins at the point where jQuery is handed to the plugin, which would look similar to this:
(function( $ ){
// all your plugins code would be here
})( jQuery ); // replace "jQuery" with one of your respective jQuery14/jQuery17 versions/variables
Be advised.. this is veryveryvery messy to say the least!
write clean code or pay later! :)

Although you could use jQuery.noConflict(); to declare separate versions of jQuery at the same time.
I've often had some problems with IE8 with certain libraries when I do that.
So, an alternate solution would be to use an iframe to load a page within your current page.
Have a given version of jQuery on one page, and another on the second.
For example:
<iframe frameborder="0" width="700" height ="400" scrolling="no" seamless="seamless" src="your.html"></iframe>

Multiple jquery noConflict files

I am implementing 2 sets of functions as below:-
For Window generation - Required jQuery Libraries are:
- jquery.js (v1.3.2)
- jquery-ui.js (v1.7.2)
I am using an extensive library used here - which creates a jquery based dialog window using $.window{...}.
For Autocomplete/Plugin Searching, - the required Libraries that I am using are:
- jquery.js (v1.7.2)
- jquery-ui.js (v1.8.18)
These 2, separately, work perfectly fine. But, when used on the same page, I had to create noconflict files so that both of these functions meet somewhere in between. Thus, for now, I am using:
jquery.js (v1.3.2)
jquery.js (v1.7.2)
jquery-ui.js (v1.8.1)
as:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.autocomplete.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.js"></script>
<script type="text/javascript">
var jQuery_1_3_2 = $.noConflict(true);
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.js"></script>
/* Here I would like to use the script below with another noConflict, because v1.8.1 (above) causes flickering of dialog boxes while dragging around & isnt smooth like the one below, which is v1.7.2:-
<script type="text/javascript" src="http://fstoke.me/jquery/window/js/jquery/jquery-ui.js"></script>
*/
<script type="text/javascript" src="http://fstoke.me/jquery/window/js/jquery/window/jquery.window.js"></script>
When used like above, there are fair amount of visual glitches when interacting with windows. When moving windows around often other sections of the page get highlighted or flicker (quick highlight) - roughly 50% of the time. The dragging & resizing arent much smooth either.
If I remove the v1.7.2 jquery.js, the windows are a lot smoother, but the autocomplete functionality ceases to work. If I remove v1.3.2 jquery.js, the windows are not generated.
Right now, I use the functions like:-
function createSampleWindow() {
sampleWnd = $.window({
.......//Code here
}(jQuery_1_3_2);
How can I use the v1.7.2 jquery-ui.js here too using some variable like:-
<script type="text/javascript" src="http://fstoke.me/jquery/window/js/jquery/jquery-ui.js"></script>
<script type="text/javascript">
var jq_172= $.noConflict(true);
</script>
Qn 1 What is the correct syntax for using both variables - jQuery_1_3_2 AND jq_172 - for the same function? Something which is used here like:-
function createSampleWindow() {
sampleWnd = $.window({
.......//Code here
}(jQuery_1_3_2, jq_172);
Or
function createSampleWindow() {
sampleWnd = $.window({
.......//Code here
}(jQuery_1_3_2),(jq_172);
Doesnt work.
Qn 2 Would it be possible to implement a large javascript such as the one used in fstoke with jquery.js v1.7.2 instead of v1.3.2 - If someone can make a notable distinction as to why replacing v1.3.2 with v1.7.2 makes it stop working - I would be much obliged.
If I might add, since the windows are made by $.window({...}); - Replacing $.window by $.dialog doesnt make a dialog box. Is there somewhere I am going wrong? Please glance through the js file used in fstoke.
Qn 3 Could someone point out what difference is there between fstoke jquery-ui and cdn hosted jquery-ui - both being v1.7.2 jquery-ui.js files.
I feel it is a very long query, but I need help with this urgently. Kindly help me at the earliest.!

I'll take question 1.
The correct syntax for using both versions of jQuery would be something like
var jQuery_1_3_2 = jQuery.noConflict(true);
function createSampleWindow() {
var no_op = jQuery.noop; // refers to jQuery 1.7.2's noop function
var no_op = $.noop; // same as the above
var no_op = jq_172.noop; // same as the above
var guid = jQuery_1_3_2.guid; // refers to jQuery 1.3.2's guid member
}
In other words, you just use them, if you have them defined already. noConflict(true) will return $ and jQuery to their previous meanings, so you can go on using them as usual.