update from inside function

[jahstation]

I'm using a ionRangeSlider as component of a bootstrap modal that im using for edit some recods of a table. So i need to initalize it inside the function called for puts the values on the modal form.

this is the "update function":

function edit(el) {
                id=$(el).parent().siblings('#degree_id').html();
                nome=$(el).parent().siblings('#degree_nome').html();
                cognome=$(el).parent().siblings('#degree_cognome').html();
                email=$(el).parent().siblings('#degree_mail').html();                votazione=$(el).parent().siblings('#degree_votazione').find('div').html();                lode=$(el).parent().siblings('#degree_votazione').find('#degree_lode').html();

               $('#id_edit').val(id);
               $('#nome_edit').val(nome);
               $('#cognome_edit').val(cognome);

               console.log(votazione);

               var select = $('#votazione_edit');

               select.ionRangeSlider({
                   min: 0,
                   max: 110,
                   from: votazione,
                   grid: true,
                   step: 1,
                   prettify_enabled: true,                      

           }

At the first time is called the function initialize the slider with the correct "from" value, but if I close the modal, then the slider have allways the same "from" value, even if "votazione" is different! I check it by the console.log(votazione) on the browser consolle.

So making a lot of tries I found that this method can do what not works here:

select.data('ionRangeSlider').update({
                       from: votazione
                   });

this function is outside the slider init/start, but make it works with the correct "from" value setted by the var "votazione". On the docs are called "Public methods" My problem now is that id like to control some event over it, and I add 2 methods like:

onStart: function (data) {
                       if(data.from==110)
                       {
                           $('#lode_edit').show();
                           if(lode==true){
                               $('#lode_edit').prop('checked', true);
                           }

                       }else{
                           $('#lode_edit').hide();

                       }
                   },
                   onChange: function (data) {
                       // Called every time handle position is changed

                       console.log(data.from);
                       if (data.from == 110) {
                           $('#lode_edit').show();
                       } else {
                           $('#lode_edit').hide();

                       }
                   },

But if put them inside the init method they works only the first time correctly, then are not reloaded correctly and they still publish the old result. If put them outside the init like:

select.on('Start', function (data) {
                   if(data.from==110)
                   {
                       $('#lode_edit').show();
                       if(lode==true){
                           $('#lode_edit').prop('checked', true);
                       }

                   }else{
                       $('#lode_edit').hide();

                   }
               });

               select.on('Change', function (data) {
                   // Called every time handle position is changed

                   console.log(data.from);
                   if (data.from == 110) {
                       $('#lode_edit').show();
                   } else {
                       $('#lode_edit').hide();

                   }
               });

they stop to works...

any idea for make them works?

[IonDen]

Hi, if you initialize the slider on modal open. You should destroy it on modal close. Then, next time it would work correctly.

Otherwise it will keep in memory previous instance.

[jahstation]

ok thats make sense to me, but wich one is the correct method to destroy it and wich event I must catch? I should work on "hide.bs.modal", but not clear to me wich method destroy the ionslider istance. many thanks.

[IonDen]

Method called destroy() :-)

http://ionden.com/a/plugins/ion.rangeSlider/api.html#a_public

[jahstation]

I've tried before rise this post to put it in the "close event" but this not works to me... still old value, the only method that set the right value is the update(). but this dont allow me to do the other things

[jahstation]

the things not works!!!!

thats the objcet before the destroy method:

h {VERSION: "2.3.0", input: input#votazione_edit.form-control.irs-hidden-input, plugin_count: 1, current_plugin: 0, calc_count: 0, …}

thats the same object, after the destroy method:

h {VERSION: "2.3.0", input: null, plugin_count: 1, current_plugin: 0, calc_count: 0, …}

both are "not expanded" but as u can see the method destroy works for the istance as suggested by you.

I put the destroy method on a "$(document).ready(function(e)" function. So the flow is: a button rise a js function called "edit" inside "edit" the ionrangeSlider is intialized with:

votazione=$(el).parent().siblings('#degree_votazione').find('div').html();
               console.log(votazione);
               var select = $('#votazione_edit');
               select.ionRangeSlider({
                   min: 0,
                   max: 110,
                   from: votazione,
                   grid: true,
                   step: 1,
                   prettify_enabled: true,
               });

Then on Document.ready there is:

$('#editDegreeModal').on('hide.bs.modal', function (e) {
                    let my_range = $("#votazione_edit").data("ionRangeSlider");
                    console.log(my_range);
                    my_range.reset();
                    my_range.destroy();
                    $('.error_mex').hide();
                    console.log(my_range);
                    window.alert('xxxx');
                });

As you can see there are many "manual debug mex" thats help me to understand if the function is done or not, and everything is ok!

So reset/destroy works, but when i reload the modal the old value is still there! how can i solve it and where is the right point to insert even controls like:

onChange: function (data) {

                        if(data.from==110)
                        {
                            $('#lode').show();
                        }else{
                            $('#lode').hide();

                        }
                    }