[RESOLVED ]Problem with an old version of // Jquery Help upgrade to last version

Question

I have problem with a code after migrating to jquery 3

NOT WORKING : Need update and need delete ui jquery I would like migrate to 3.6 but error : https://jsfiddle.net/alex447/u817ybjk/1/

Working but old version : https://jsfiddle.net/alex447/c06tb5rL/28/

Having done very little jquery I would like to review the code in the latest jquery version and without ui-query so that the progress bar is displayed.

If you change the code to version 1.5 with ui jquery you can see the final result I want.

If i go to jquery 3.4.1 or other I have error :

"jQuery.Deferred exception: $(...).progressbar is not a function", "TypeError: $(...).progressbar is not a function at HTMLDocument. (https://fiddle.jshell.net/_display/?editor_console=true:728:23) at mightThrow (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js:3534:29) at process (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js:3602:12)", undefined

Thanks

user_2932476 · Answer

You have to add the jQuery ui library , ( knowing that progress() function belong to this last ),

It works on the previous version because the is a checked input that import the ui automatically as you can see here :

add theme + jQuery ui cdn url will resolve the issue as this jsFiddle

But if you want to get rid of the jQuery ui ,

You could create your own progress , some css and simple js ,as shown in the below Snippet :

$(document).ready(function() {
    
    $("#progressbar").css("width",0);
    
    $('[type*=radio]').click(function() {
        var totalChecked = 0;
        var totalRadioGroups = 0;
        var previousName = '';
        $.each($('[type*=radio]'), function(index, value) {
            var radioName = $(this).attr('name');
            var radioId = this.id;
            
            if (previousName != radioName) {
                totalRadioGroups++;
            }
            if ($('#' + radioId).is(':checked')) {
                totalChecked++;
            }
            previousName = radioName;
        });
        var percentage = (totalChecked / totalRadioGroups) * 100;
        $('#progressbar').css('width', percentage+"%");
        $('#progressbar').html(percentage.toFixed(2) + "%");
        
        $('#percentage').html(percentage.toFixed(2) + "%");
    });

});

#progress-container {
  width: 100%;
  border: 1px solid #ddd;
  height:25px;
  border-radius:5px;
  overflow:hidden;
}

#progressbar {
  height: 25px;
  background-color: #0412AD;
  text-align: center;
  line-height: 30px;
  color: white;
  width:0;
}



Question 1


  Option 1



Option 2



Option 3



Question 2


Option 1



Option 2



Option 3



Question 3


Option 1



Option 2



Option 3




Question 3


Option 1



Option 2



Option 3





  
    
  


  fff

[RESOLVED ]Problem with an old version of // Jquery Help upgrade to last version

1 Answers