Develop Reference

Deferred javascript noConflict different version jquery

In my one function I need use twice jquery version. One for all function and another jquery for one function..
I can not control conflict in deffering.
<script defer type='text/javascript' src='<%=FrSettings.Settings.AppVirtualPath %>resource/js/jquery-11.0.min.js'></script>
<script defer type='text/javascript' src='<%=FrSettings.Settings.AppVirtualPath %>resource/js/unitegallery.min.js'></script>
<script defer type='text/javascript' src='<%=FrSettings.Settings.AppVirtualPath %>resource/js/ug-theme-carousel.js'></script>
<script defer type='text/javascript' src='<%=FrSettings.Settings.AppVirtualPath %>resource/js/jquery-3.3.1.min.js'></script>
window.addEventListener('DOMContentLoaded', function () {
(function ($) {
jQuery(document).ready(function ($) {
// Need 2 different jquery version
LoadVideos();
});
})(jQuery);
});
// Need only 1 jquery version
window.addEventListener('DOMContentLoaded', function () {
(function ($) {
jQuery(document).ready(function ($) {
LoadAnaOwl();
LoadYayinAkisi();
$('body').on('click', '.mansetPaginition li a', function () {
$('.mansetPaginition li a').removeClass('active');
$(this).addClass('active');
});
$(document).on('mouseenter mouseleave', '.mansetPaginition li a', function () {
$('.mansetPaginition li a').removeClass('active');
$(this).addClass('active');
window.location.hash = this.hash;
});
});
})(jQuery);
});
</script>

Use jQuery.noConflict.
jQuery.noConflict(bool) will return the jQuery function and restores the $ global variable to its old reference. bool indicates whether or not to remove all global jQuery variables, including jQuery. Calling jQuery.noConflict(true) if there are two versions of jQuery loaded will restore the globally scoped jQuery variables to those of the first version.
window.addEventListener('DOMContentLoaded', function () {
(function ($) {
jQuery(document).ready(function ($) {
window.jq331 = jQuery.noConflict(true);
// Need 2 different jquery version
LoadVideos();
});
})(jQuery);
});
<script src="https://code.jquery.com/jquery-1.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var jq331 = jQuery.noConflict(true);
//jQuery and $ is version 1.1.0
//jq331 is version 3.3.1
console.log('jQuery version:',jQuery.fn.jquery);
console.log('$ version:', $.fn.jquery);
console.log('jq331 version:',jq331.fn.jquery);
</script>

JS not function in Firefox

I tries to used this code to make an alert when user click on the link. However, this function only work with Chrome and Internet Explorer but doesn't work in Firefox.
Please refer to the code below :
jQuery(function($) {
$(document).ready(function() {
$(".disableGA").on("click", function() {
event.preventDefault();
alert("Google Analytics was disabled");
window.location.href = 'javascript:gaOptout()';
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="disableGA">Disable Google Analytics</a>

Please pass event to the function and try again
<script>
jQuery(function ($) {
$( document ).ready(function() {
$(".disableGA").on("click", function(event){
event.preventDefault();
alert("Google Analytics was disabled");
window.location.href='javascript:gaOptout()';
});
});
});
</script>

how do I include a jQuery script into an include.js file?

lease forgive me if this is simple-minded a question.
I have a jQuery script shown below embedded in my app:
<script type='text/javascript'>//<![CDATA[
$(function(){
$('#div1).on('click', function () {
$('#divTitle').show();
});
$('#div1').on('click', function () {
$('#divTitle').slideUp();
});
});//]]>
</script>
<script type='text/javascript'>//<![CDATA[
$(function(){
$('#div2').on('click', function () {
$('#secDiv').show();
});
$('#div2).on('click', function () {
$('#secDiv).slideUp();
});
});//]]>
</script>
My boss just told me to put this jQuery in include.js file.
I included the file as shown below
function showIcon() {
toggleButtonIcon('[Widget dijit.form.ToggleButton, pan]');
navToolbar.activate(esri.toolbars.Navigation.PAN);
/*dijit.registry.byClass("dijit.form.ToggleButton").forEach(function(togbtn) {
if (togbtn == '[Widget dijit.form.ToggleButton, pan]') {
togbtn.attr("checked", true);
}
else
{
togbtn.attr("checked", false);
}
});
*/
}
//<![CDATA[
$(function(){
$('#div1).on('click', function () {
$('#divTitle').show();
});
$('#div1').on('click', function () {
$('#divTitle').slideUp();
});
});//]]>
<![CDATA[
$(function(){
$('#div2').on('click', function () {
$('#secDiv').show();
});
$('#div2).on('click', function () {
$('#secDiv).slideUp();
});
});//]]>
but now it isn't working anymore.
It is supposed to show and hide certain icons.
What am I doing wrong?

A couple things. First drop the <script> and CDATA tags. They aren't necessary in an external javascript file (presumably being included by a <script> tag in the HTML).
Secondly, you'll need to wrap your javascript with $(document).ready(). You probably had this javascript at the bottom of your current HTML (or at least after the HTML elements it was binding to), and since this external JS file likely gets loaded in the header, the HTML elements aren't there to bind to.
new include.js :
function showIcon() {
toggleButtonIcon('[Widget dijit.form.ToggleButton, pan]');
navToolbar.activate(esri.toolbars.Navigation.PAN);
/*dijit.registry.byClass("dijit.form.ToggleButton").forEach(function(togbtn) {
if (togbtn == '[Widget dijit.form.ToggleButton, pan]') {
togbtn.attr("checked", true);
}
else
{
togbtn.attr("checked", false);
}
});
*/
}
$(document).ready(function() {
$(function(){
$('#div1).on('click', function () {
$('#divTitle').show();
});
$('#div1').on('click', function () {
$('#divTitle').slideUp();
});
});
$(function(){
$('#div2').on('click', function () {
$('#secDiv').show();
});
$('#div2).on('click', function () {
$('#secDiv').slideUp();
});
});
});
Also verify that you have something like this in your HTML file:
<script type="text/javascript" src="path/to/include.js"></script>

You want to include your Javascript in a file right ?
Assuming jQuery has been included before :
Html
<script type="text/javascript" src="path/to/include.js"></script>
include.js
jQuery(function($){
$('#div1').on('click', function () { //missing '
$('#divTitle').show();
});
$('#div1').on('click', function () {
$('#divTitle').slideUp();
});
$('#div2').on('click', function () {
$('#secDiv').show();
});
$('#div2').on('click', function () { //missing ' here
$('#secDiv').slideUp(); //missing ' here too
});
});
//Edit omitted this part
function showIcon() {
toggleButtonIcon('[Widget dijit.form.ToggleButton, pan]');
navToolbar.activate(esri.toolbars.Navigation.PAN);
}

JQuery .click function not working for contained <a> tags

I have the following function that is supposed to trigger anytime one of the numbers in my pagination is clicked.
<script type="text/javascript">
$("div.pagination a").click(function(event) {
alert("Click");
event.preventDefault();
var url = $(this).attr("href");
$("input[name='order']").val(order);
$("#form_session").attr('action', url).submit();
});
</script>
The pagination looks like this:
<div class="pagination">
<ul>
<li>1</li>
<li>2</li>
...etc
</ul>
</div>
For some reason, the function is never firing. I even put in a very obvious alert to confirm that it's hearing the click, but I'm not even seeing this.
So what is it that I'm doing wrong Everything seems correct to me...

Try to wrap it inside $(document).ready(function () { ... }); Something like below,
$(document).ready(function () {
$("div.pagination li").click(function(event) {
alert("Click");
event.preventDefault();
var url = $(this).attr("href");
$("input[name='order']").val(order);
$("#form_session").attr('action', url).submit();
});
});
If the li is dynamically generated then you should use .on (for jQuery 1.7) or .live/.delegate (older jQuery).
$(document).ready(function () {
$(document).on('click', 'div.pagination li', function(event) {
alert("Click");
event.preventDefault();
var url = $(this).attr("href");
$("input[name='order']").val(order);
$("#form_session").attr('action', url).submit();
});
});
Note: Replace $(document).on('click', 'div.pagination li', function(event) { with $('div.pagination').on('click', 'li', function(event) { if div.pagination exist on load.

Put it in a document.ready
$(function(){
$("div.pagination a").click(function(event) {
alert("Click");
event.preventDefault();
var url = $(this).attr("href");
$("input[name='order']").val(order);
$("#form_session").attr('action', url).submit();
});
});

Try:
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("div.pagination li a").click(function(event) {
event.preventDefault();
alert("Click");
var url = $(this).attr("href");
$("input[name='order']").val(order);
// Where is order coming from?
$("#form_session").attr('action', url).submit();
});
});
</script>
You missed the a in your selector. Make sure the DOM is ready $(document).ready. And where is the order variable coming from? Is order defined?

How to convert this jquery code into noconflict

will we have to replace every $ with jquery?
$(document).ready(function() {
$('.tabs a').click(function(){
switch_tabs($(this));
});
switch_tabs($('.defaulttab'));
});
function switch_tabs(obj)
{
$('.tab-content').hide();
$('.tabs a').removeClass("selected");
var id = obj.attr("rel");
$('#'+id).show();
obj.addClass("selected");
}

As long as you are sure the snippet contains just jQuery usage of $ then you can wrap it in a closure
(function($){
$(document).ready(function() {
$('.tabs a').click(function(){
switch_tabs($(this));
});
switch_tabs($('.defaulttab'));
});
function switch_tabs(obj)
{
$('.tab-content').hide();
$('.tabs a').removeClass("selected");
var id = obj.attr("rel");
$('#'+id).show();
obj.addClass("selected");
}
})(jQuery);

use
$.noConflict();
(function($) {
$(function() {
// more code using $ as alias to jQuery
});
})(jQuery);
// other code using $ as an alias to the other library
Resolve the conflict issues
More detail : http://api.jquery.com/jQuery.noConflict/

var $j = jQuery.noConflict();
$j(document).ready(function() {
$j('.tabs a').click(function(){
switch_tabs($j(this));
});
switch_tabs($j('.defaulttab'));
});
function switch_tabs(obj)
{
$j('.tab-content').hide();
$j('.tabs a').removeClass("selected");
var id = obj.attr("rel");
$j('#'+id).show();
obj.addClass("selected");
}