Calling jQuery UI's slider() method may conflict with other libraries such as jQuery Mobile

[ghost]

Hi Alexander,

I did some more investigation regarding jme2 compatibility with jQuery Mobile that we spoke about. The issue is that jQuery Mobile includes it's own slider plugin who's calling method's name (i.e. $('input').slider(); ) collides with jQuery UI.

See jQuery Mobile Slider Documentation

To work around this, I aliased the jQuery UI slider within jme.js:

    /* Alias jQuery UI slider to avoid conflicts with other libraries (i.e. jQuery Mobile). */
    jQuery.fn.uislider = jQuery.fn.slider;

Then I modified all the calls to the slider method with uislider. Example:

    control.uislider({
        range: 'min',
        max: duration || 1,
        disabled: !duration,
        step: 0.1,
        value: media.prop('currentTime'),
        slide: function(e, data){
            if(e.originalEvent){
                time.set(data.value);
            }
        }
    });

What do you think of this approach?

Let me know if you want me to commit my updates.

Cheers, Matt

[aFarkas]

Hi Matt,

thanks for investigating this. I'm now using the following code, to fix this:

if(!$.mobile || !$.mobile.slider){
    $.fn._uiSlider = $.fn.slider;
} else {
    $.widget('jme._uiSlider', $.ui.slider.prototype);
}

If jQuery mobile is detected. JME will create a new module, so it does not depend on a specific embed order (jQuery UI -> JME -> Mobile). You can mix the files how you want :-)

Cheers Alex

[ghost]

Hi Alexander,

Thanks a lot for the fix. Very elegant! :)

Cheers, Matt

[toty29]

Hello, I know that a year ago of this commentary, but I have the same problem, I'm using a slider and I'm also using jquery-ui and jquery.mobile and slider loses its function, I tried this code but I'm not sure where I should put it, anyone can help me?