CODEWITHSUNDEEP
ajaxjquery-uidom
krifur
krifur

Reputation: 890

bind a jquery slider to the dom

I've got a jquery UI slider in an ajax part of my webpage. if I'm reloading this part with ajax, the slider disappears. I guess I need to attach the slider to the DOM but it looks like it needs an event to be attached on like :

$(".radio").on("click", function () {

but I don't know which kind of event I need to attach there?

thx

current html:

$(function() {
  var handle = $("#custom-handle");
  $("#custom-handle").text(sizes[0].value);
  $("#slider").slider({
    create: function() {},
    min: 0,
    max: sizes.length - 1,
    step: 1,
    slide: function(event, ui) {
      handle.text(sizes[ui.value].value);
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="slider">
  <div id="custom-handle" class="ui-slider-handle"></div>
  <br>
</div>

Upvotes: 4

Views: 388

Answers (1)

Hooman Bahreini
Hooman Bahreini

Reputation: 15559

I've got a jquery ui slider in an ajax part of my webpage. if I'm reloading this part with ajax, the slider disappears.

Are you replacing the slider HTML code in ajax? i.e. are you replacing this div?

<div id="slider">
  <div id="custom-handle" class="ui-slider-handle"></div>
  <br>
</div>

If that is the case, then I don't think the problem is with binding... have you tried reinitialize the slider once the ajax call is completed?

$.ajax({
    type: 'post',
    url: 'some url',
    success: function(data) {                       
        initializeSlider();
    }
});      

function initializeSlider() {
    $("#slider").slider({
        create: function() {},
        min: 0,
        max: sizes.length - 1,
        step: 1,
        slide: function(event, ui) {
            handle.text(sizes[ui.value].value);
        }
    });
}

Upvotes: 1

Related Questions