Change values of the Jquery attribute,

Question

Change values of the Jquery attribute,

Navigation

#1 by (2 votes)

3

I have a jsfiddle.

Here is an intput tag:

              <div class="marging">
                     <input id="ex19" type="text" data-provide="slider"
                     data-slider-ticks = "[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]" 
            data-slider-ticks-labels = '["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]' />
                  </div>

                  <br/>
                  <br/>
                  <button id="myButton">
                  OKAY
                  </button>

When I click on the button I want to add the following attributes and also update the two that are already:

'data-slider-min':"1",
'data-slider-max':"3",
'data-slider-step':"1",
'data-slider-value':"3",
'data-slider-tooltip':"hide"

I have this javascript that works partially.

                var spanishLabels = ["Enero", "Febrero", "Marzo"];
                var num = [1,2,3];

                $('#myButton').click(function() {



                  $('.data-slider-ticks-labels').each(function(index) {
                    $(this).text(spanishLabels[index]);
                  });    
                   $('.data-slider-ticks').each(function(index) {
                    $(this).text(num[index]);
                  });  

                   $( "#ex19" ).attr({  
                    'data-slider-min':"1",
                    'data-slider-max':"3",
                    'data-slider-step':"1",
                    'data-slider-value':"3",
                    'data-slider-tooltip':"hide"
                });


                });

What am I doing wrong, why the JS does not work at all well.

javascript jquery html

asked by N'oel C'alero 04.10.2016 в 23:53

source

1 answer

JSfiddle does not help me "Skipped 76 frames" in Xamarin.Android

score 2 · Accepted Answer

I was reviewing in detail the documentation of Bootstrap Slider and I found the setAttribute() method that allows (in theory ) change the parameters of the slider, as well as the methods refresh() and relayout() that somehow redraw the slider, however it did not work well (see Slider 2 in the example below).

I thoroughly reviewed the Bootstrap slider code found at Github and after analyzing and testing it, I noticed that the ticks and ticks_labels, as well as the tooltip are generated only when the slider is created and are never modified by the refresh or relayout methods.

In other words, the only way I found to modify ticks and ticks_labels was destroying and recreating the slider, which does not seem logical to me (or something I did not understand).

// Slider 1
var mySlider = new Slider('#ex19', {});

$('#myButton').click(function() {
 
  mySlider.destroy();
  
  new Slider('#ex19', {min: 1, max: 3, step: 1, value: 3, tooltip: 'hide', ticks_labels: ["Eneros", "Febreros", "Marzos"], ticks: [1, 2, 3]});
  
});


// Slider 2
var mySlider2 = new Slider('#ex20', {});

$('#myButton2').click(function() {
  // No actualiza los ticks ni los labels ni el tooltip
  mySlider2.setAttribute('min', 1)
          .setAttribute('max', 3)
          .setAttribute('step', 1)
          .setAttribute('value', 3)
          .setAttribute('tooltip', 'hide')
          .setAttribute('ticks_labels', ["Eneros", "Febreros", "Marzos"])
          .setAttribute('ticks', [1, 2, 3])
          .relayout();
});

.slider {
  margin-top: 30px;
  width: 100% !important;  
}

.marging {
  margin-right: 80px;
  margin-left:50px;  
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.2.0/css/bootstrap-slider.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.2.0/bootstrap-slider.min.js"></script>

      <div class="marging">
        Slider 1
             <input id="ex19" type="text"
             data-slider-ticks = "[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]" 
    data-slider-ticks-labels = '["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]' />
          </div>
          <br/>
          <br/>
          <button id="myButton">
          Cambiar slider 1
          </button>
<hr>
      <div class="marging">
        Slider 2
             <input id="ex20" type="text"
             data-slider-ticks = "[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]" 
    data-slider-ticks-labels = '["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]' />
          </div>
          <br/>
          <br/>
          <button id="myButton2">
          Cambiar slider 2
          </button>