Jquery conflict between two versions

Question

Ok i have site with old version of jquery, then i imported modul, where i have newer version of jquery, in my modul page i have this line of jquery

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

Somehow i have conflict. I cant remove old version from header cuz some function dont work, in the other side in my module page if i remove newer version spinner function dont work. I cant use both jquery versions in same time. is there some way how to resolve this conflict.

Code where i have error is: In this script i need older version not before loaded new version jquery-1.10.2.js

var notice = new Array();

$(document).ready( function() {
    /*setTimeout(function(){ $(".notice").fadeTo('slow',1), 500; });
    setTimeout(function(){ $(".notice").fadeTo('slow',0.4); }, 1500);*/
    /*setTimeout(function(){
        $(".notice").animate( { backgroundColor: '#B8B8B8' }, 1000)
    });*/

    setTimeout(function(){
          $(".notice").animate( { backgroundColor: '#e0e0e0' }, 1000)

    }); 

    $.safetynet({

        message : isDirtyWarning


        });




});

/**
 * Funkcija ce Sve vrednosti Combo Boksa upisati u hidden polje razdvojeno
 * zarezom
 * 
 * @param hidden_field_id
 * @return
 */
function ComboFieldsToValue(combo_selector, hidden_field_id) {
    var vrednosti = "";

    $(combo_selector + ' option').each( function() {
        vrednosti += $(this).val() + ',';
    });
    $(hidden_field_id).attr( {
        value :vrednosti.substring(0, vrednosti.length - 1)
    });
    // alert($(hidden_field_id).attr("value"));
}

/**
 * Proverava da li Combo ima item sa zadatom vrednoscu
 * Vraca true ako ima, false ako nema
 * @param combo_selector
 * @param key
 * @return
 */
function IsItemInCombo(combo_selector, key) {
    var is_in_combo = false;
    $(combo_selector + ' option').each( function() {
        if ($(this).val() == key)  {
            is_in_combo = true;
        }
    });
    return is_in_combo;
}

/**
 * Potrda brisanja
 * @param link
 * @return
 */
function PotvrdiBrisanje(link, str) {
    if(str == "") str = "Potvrdi brisanje?";

    if (confirm("" + str)) {
        document.location = link;
    }   
}

function ajaxPotvrdiBrisanje(link, str, autoconfirm, flexi_id) {
    if(str == "") str = "Potvrdi brisanje?";
    if(autoconfirm == "") autoconfirm = false;
    if(flexi_id == "" || !flexi_id) flexi_id = 'flex1';

    if (autoconfirm || confirm("" + str)) {
        $.ajax({
          url: link,
          async : false,
          success: function(data) {
            if (data.substr(0, 4) == "msg:") {
                notice[notice.length] = data.substr(4,data.length);
            }
          }
        });
    }
    return false;
}
function addToNotice(data)
{
    if (data.substr(0, 4) == "msg:") {
        notice[notice.length] = data.substr(4,data.length);
    }   
}
function PrikaziNotice() {
    if (notice.length == 0) return;

    $('p.flexy_notice').html('');
    $('p.flexy_notice').css({ backgroundColor: '#FB2D2B' });
    $('p.flexy_notice').hide('');

    /*
     * Uknjamoi osmnovni notce
     *
     */

    if ($('.notice').length != 0) {
        $('.notice').hide();
    }
    html = "";
    for ( var i in notice ) {
        html += '<p>' + notice[i] + '</p>';
    }

    $('p.flexy_notice').html(html);
    $('p.flexy_notice').show();
    $(".flexy_notice").animate( { backgroundColor: '#e0e0e0' }, 1000);

    notice = new Array();
}

function reloadFlexi() { $("#flex1").flexReload(); }

function ShowAudit(id) {
    $(".audit_" + id).toggle();
}
function setDirtyTiny(){
$.safetynet.raiseChange($('textarea'));
}

Can someone explain me how to adjust this js file

You have to use the noConflict mode for using two versions of jquery in the same page http://stackoverflow.com/questions/1566595/can-i-use-multiple-versions-of-jquery-on-the-same-page — Matteo, Oct 23 '14 at 09:23
not sure how they could conflict but the first is just ***jQuery***, while the second is ***jQuery UI***. jQuery UI is some kind of extension to jQuery (based on jQuery). So it would be so terrible if they could conflict. — King King, Oct 23 '14 at 09:24
no it ui for second page only i am not writing jquery in header — Vladimir Štus, Oct 23 '14 at 09:26

score 0 · Answer 1 · answered Oct 23 '14 at 09:23

0

Here is a blog dealing with this problem:

http://blog.nemikor.com/2009/10/03/using-multiple-versions-of-jquery/

answered Oct 23 '14 at 09:23

Albin

2,912
1
21
31

score 0 · Accepted Answer · answered Oct 23 '14 at 09:27

If you need to run two versions of jquery, you can use noconflict.

Example:

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
    newJquery = jQuery.noConflict(true);
    newJquery(document).ready( function() {
    ...
    ...

score 0 · Answer 3 · answered Oct 23 '14 at 09:27

0

Just add this to your html page in which the conflict occurs:

<script>
    $.noConflict();
</script>

answered Oct 23 '14 at 09:27

Hazem Taha

1,154
6
18
31

Jquery conflict between two versions

3 Answers3