TypeError: o.element is undefined - jquery ui

Question

I'm using jquery-ui. I cannot solve this after 2 weeks.

I don't know why I got this error after clicking on sliders:

console Firefox:

TypeError: o.element is undefined[Learn More]  jquery-ui.min.js:6:6058

console chrome:

jquery-ui.min.js:6 Uncaught TypeError: Cannot read property 'toggleClass' of undefined
    at t.(anonymous function).(anonymous function)._toggleClass (http://localhost:8000/assets/frontend/_js/jquery-ui.min.js:6:6067)
    at t.(anonymous function).(anonymous function)._addClass (http://localhost:8000/assets/frontend/_js/jquery-ui.min.js:6:5877)
    at t.(anonymous function).(anonymous function)._mouseCapture (http://localhost:8000/assets/frontend/_js/jquery-ui.min.js:6:14171)
    at t.(anonymous function).(anonymous function)._mouseCapture (http://localhost:8000/assets/frontend/_js/jquery-ui.min.js:6:1111)
    at t.(anonymous function).(anonymous function)._mouseDown (http://localhost:8000/assets/frontend/_js/jquery-ui.min.js:6:9414)
    at t.(anonymous function).(anonymous function)._mouseDown (http://localhost:8000/assets/frontend/_js/jquery-ui.min.js:6:1111)
    at HTMLDivElement.<anonymous> (http://localhost:8000/assets/frontend/_js/jquery-ui.min.js:6:8701)
    at HTMLDivElement.dispatch (http://localhost:8000/assets/frontend/_js/jquery-3.1.1.min.js:3:10315)
    at HTMLDivElement.q.handle (http://localhost:8000/assets/frontend/_js/jquery-3.1.1.min.js:3:8342)

<script type="text/javascript" src="http://localhost:8000/assets/frontend/_js/jquery-3.1.1.min.js"></script>
<!-- http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js -->
<script type="text/javascript" src="http://localhost:8000/assets/frontend/_js/bootstrap.min.js"></script>
<!-- https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js -->
<script type="text/javascript" src="http://localhost:8000/assets/frontend/_js/jasny-bootstrap.min.js"></script>
<script type="text/javascript" src="http://localhost:8000/assets/frontend/_js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="http://localhost:8000/assets/frontend/_js/persian-datepicker.min.js"></script>
<script type="text/javascript" src="http://localhost:8000/assets/frontend/_js/script.js"></script>

<script type="text/javascript" src="http://localhost:8000/assets/frontend/_js/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://localhost:8000/assets/frontend/_js/jquery.ui.touch-punch.min.js"></script>
<script>

    $(document).ready(function(){

        $( "#slider" ).slider({
            range: true,
            min: -10000000,
            max: -1000,
            values: [ -8000000, -2000 ],
            slide: function(event, ui) {
                $(".amount .min-price").text(addCommas (ui.values[1]*-1) + " ریال ");
                $(".amount .max-price").text(addCommas (ui.values[0]*-1) + " ریال ");
            }
        });

        $(".amount .min-price").text(addCommas ($("#slider").slider( "values", 1 )*-1  ) + " ریال ");
        $(".amount .max-price").text(addCommas ($("#slider").slider( "values", 0 )*-1  ) + " ریال ");
        // Hover states on the static widgets
        $( "#dialog-link, #icons li" ).hover(
            function() {
                $( this ).addClass( "ui-state-hover" );
            },
            function() {
                $( this ).removeClass( "ui-state-hover" );
            }
        );

    });

</script>

My HTML code:

<div class="col-md-12">
    <div id="slider" class="ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content">
        <div class="ui-slider-range ui-corner-all ui-widget-header">

        </div>
        <span tabindex="1" class="ui-slider-handle ui-corner-all ui-state-default">

        </span>
        <span tabindex="2" class="ui-slider-handle ui-corner-all ui-state-default" >

        </span>
    </div>
</div>

//used in slider
function addCommas(nStr){
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}

My site address:

http://tahrircenter.com/products

I removed extra codes but I got the same error:

It works fine on jsfiddle !!!:

https://jsfiddle.net/Twisty/3gm3sfem/

.toggleClass() is a function of jQuery, so if you're getting an error that it's undefined, then it's possible another version of jQuery may be loaded elsewhere. Or it's not being loaded at all.

jane · Accepted Answer · 2019-05-31 12:14:59Z

3

I had this problem, and solved it.

I accidentally set the slider to a value which was undefined. At that point, no error was produced.

But, when I later tried to move the slider, I got the error o.element is undefined.

When I set the slider to a good value, the problem disappeared.

answered May 31, 2019 at 12:14

jane

312 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

law_81 Over a year ago

which value was undefined?

helgatheviking Over a year ago

This appears to be a problem when any of the slider parameters (:ie: min, max, value, etc) that expect integer numbers are given anything else... like nulls or strings.

Collectives™ on Stack Overflow

TypeError: o.element is undefined - jquery ui

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related