jQuery conflict management in same page

Question

I have a page (this one actually http://gtsturism.agencia.ro/) where the client requested to use a theme from themefuse (which is quite difficult to modify).

However the theme uses jQuery 1.8.3 and I have developed a new section (the tuner down below) that requires v. 1.10.2 in order to function properly.

The problem is the same with jQuery UI. The idea is that if I import the newer version o jQuery the theme functions will not work (eg: the menu, sliders, popus etc.). If I rely on the theme jQuery and jQuery ui however, my component is not going to work at all.

The reason why I am here is because the client did not specify from the beginning what he was going to do with the component and the framework requirements.

I am looking for some kind of a workaround that will not direct me into rewriting the whole widget of the website.

Please note that on the top link the tuner is working right now (not the submit but the buttons and sliders).

Thank you for your time.

UPDATE #1: jQuery UI main issue

I have managed to make some of the aspects work, but the theme jQuery UI is highly modified and in special the sliders that initiate using this piece of code:

var OPTIONS = {

    settings: {
      from: 1,
      to: 10,
      step: 1,
      smooth: true,
      limits: true,
      round: 0,
      format: { format: "#,##0.##" },
      value: "5;7",
      dimension: ""
    },

    className: "jslider",
    selector: ".jslider-",

    template: tmpl(
      '<span class="<%=className%>">' +
        '<table><tr><td>' +
          '<div class="<%=className%>-bg">' +
            '<i class="l"></i><i class="r"></i>' +
            '<i class="v"></i>' +
          '</div>' +

          '<div class="<%=className%>-pointer"></div>' +
          '<div class="<%=className%>-pointer <%=className%>-pointer-to"></div>' +

          '<div class="<%=className%>-label"><span><%=settings.from%></span></div>' +
          '<div class="<%=className%>-label <%=className%>-label-to"><%=settings.dimension%><span><%=settings.to%></span></div>' +

          '<div class="<%=className%>-value"><%=settings.dimension%><span></span></div>' +
          '<div class="<%=className%>-value <%=className%>-value-to"><%=settings.dimension%><span></span></div>' +

          '<div class="<%=className%>-scale"><%=scale%></div>'+

        '</td></tr></table>' +
      '</span>'
    )

  };

The full theme jQuery UI slider can be found here http://jsfiddle.net/AEK8p/

So what I need is some other way to initiate my sliders since the theme makes it like this and uses the keyword slider :

jQuery(document).ready(function() {
  // Price Range Input
  jQuery("#range_field_short_latest_price_range").slider({
    from: 90,
    to: 2490,
    smooth: true,
    scale: ["$90","$2.5k"],
    skin: "round_green",
    limits: false,
    heterogeneity: [],
    dimension: '$'
  });
});

So what I was thinking was to rename the constructor in something like "customSlider" in the fiddle you see up in my text, but I do not think that this will suffice.

UPDATE #2: jQuery UI - possible solution - use alternative UI framework

So, after a lot of struggle I found a partial solution to this. So I have rewritten the sliders code using a different slider plugin for jQuery, that you can find here http://refreshless.com/nouislider/.

This way I avoid any type of conflict with the theme and I can keep the Jq version that comes with that.

The conclusion is that there is a very big pain to use 2 or more versions of jQuery, jQuery ui or other libraries that overwrite themselves due to the fact that the dimension of the overlapping is uncontrollable (like in this modified theme that my client bought from themefuse).

Thank you all for your contribution that led finally to this solution. It would have probably been more time consuming without your help.

The breaking changes between 1.8 and 1.10 are pretty low, why don't you just update to 1.10 and fix whatever little jquery issues there are in the theme? It is possible t load 2 jquery's at one time but this is baad and lazy — Dominic, Jul 30 '13 at 19:20
@infensus In fact the changes are kind of major since in 1.9 a lot of deprecated methods were removed(like .live() and .browser) so if you do not intend to rewrite code take a look at http://api.jquery.com/jQuery.noConflict/ — Valentin D, Jul 30 '13 at 19:52
True, I stopped using those so long ago I forget. live etc is easy to change to on, but browser should really need a refactor to use feature detection e.g. modernizr (though quick and dirty browser detects e.g. for IE are quite easy) — Dominic, Jul 30 '13 at 19:53
@DavidJashi - The idea is that I cannot use iframe since I need to submit that form and keep track of what values the user submitted, so this would be quite difficult. — Mike, Jul 30 '13 at 20:29
@infensus - This actually might work but there is a lot of debugging to be done in the whole theme. Moreover there is also a problem with Jquery UI there. — Mike, Jul 30 '13 at 20:30
OK, I think I found, what you need - http://stackoverflow.com/questions/4214551/using-different-versions-of-jquery-and-jqueryui-together — David Jashi, Jul 31 '13 at 06:22
@DavidJashi - I was just looking to the same here https://forum.jquery.com/topic/multiple-versions-of-jquery-on-the-same-page but still this does not solve the UI problem. I have rewritten part of the code and now the UI seems the only one left. — Mike, Jul 31 '13 at 06:52
Have you tried to isolate UI, as they did in the answer I linked to? — David Jashi, Jul 31 '13 at 11:20
@DavidJashi - I could not since there was a lot to modify. I will write one more update with the solution I found. — Mike, Jul 31 '13 at 13:13

score 0 · Answer 1 · answered Jan 25 '14 at 05:44

I Rewritten your code

$.noConflict();

jQuery(document).ready(function() {
  // Price Range Input
  jQuery("#range_field_short_latest_price_range").slider({
    from: 90,
    to: 2490,
    smooth: true,
    scale: ["$90","$2.5k"],
    skin: "round_green",
    limits: false,
    heterogeneity: [],
    dimension: '$'
  });
});

Some of the code you showed are not in correct alignment.

jQuery conflict management in same page

1 Answers1