Databases
StackOverflow2013
Postsdbo
POjQuery conflict management in same page
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery conflict management in same page
    text
    copied!<p>I have a page (this one actually <a href="http://gtsturism.agencia.ro/" rel="nofollow">http://gtsturism.agencia.ro/</a>) where the client requested to use a theme from themefuse (which is quite difficult to modify). </p> <p>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. </p> <p>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. </p> <p>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.</p> <p>I am looking for some kind of a workaround that will not direct me into rewriting the whole widget of the website.</p> <p>Please note that on the top link the tuner is working right now (not the submit but the buttons and sliders). </p> <p>Thank you for your time.</p> <p><strong>UPDATE #1: jQuery UI main issue</strong></p> <p>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:</p> <pre><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( '&lt;span class="&lt;%=className%&gt;"&gt;' + '&lt;table&gt;&lt;tr&gt;&lt;td&gt;' + '&lt;div class="&lt;%=className%&gt;-bg"&gt;' + '&lt;i class="l"&gt;&lt;/i&gt;&lt;i class="r"&gt;&lt;/i&gt;' + '&lt;i class="v"&gt;&lt;/i&gt;' + '&lt;/div&gt;' + '&lt;div class="&lt;%=className%&gt;-pointer"&gt;&lt;/div&gt;' + '&lt;div class="&lt;%=className%&gt;-pointer &lt;%=className%&gt;-pointer-to"&gt;&lt;/div&gt;' + '&lt;div class="&lt;%=className%&gt;-label"&gt;&lt;span&gt;&lt;%=settings.from%&gt;&lt;/span&gt;&lt;/div&gt;' + '&lt;div class="&lt;%=className%&gt;-label &lt;%=className%&gt;-label-to"&gt;&lt;%=settings.dimension%&gt;&lt;span&gt;&lt;%=settings.to%&gt;&lt;/span&gt;&lt;/div&gt;' + '&lt;div class="&lt;%=className%&gt;-value"&gt;&lt;%=settings.dimension%&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;' + '&lt;div class="&lt;%=className%&gt;-value &lt;%=className%&gt;-value-to"&gt;&lt;%=settings.dimension%&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;' + '&lt;div class="&lt;%=className%&gt;-scale"&gt;&lt;%=scale%&gt;&lt;/div&gt;'+ '&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;' + '&lt;/span&gt;' ) }; </code></pre> <p>The full theme jQuery UI slider can be found here <a href="http://jsfiddle.net/AEK8p/" rel="nofollow">http://jsfiddle.net/AEK8p/</a> </p> <p>So what I need is some other way to initiate my sliders since the theme makes it like this and uses the keyword <strong>slider</strong> :</p> <pre><code>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: '$' }); }); </code></pre> <p>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.</p> <p><strong>UPDATE #2: jQuery UI - possible solution - use alternative UI framework</strong></p> <p>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 <a href="http://refreshless.com/nouislider/" rel="nofollow">http://refreshless.com/nouislider/</a>.</p> <p>This way I avoid any type of conflict with the theme and I can keep the Jq version that comes with that. </p> <p>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).</p> <p><em>Thank you all for your contribution that led finally to this solution. It would have probably been more time consuming without your help.</em></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload