jQuery Range Slider is not loading in Modal Box

Question

I am trying to load jQRangeSlider in a modal box. After load all jQRangeSlider scripts. Scripts loaded Successfully but Modal box is not showing with jQRangeSlider

What I am trying to do.

There is listing of id. Click on each id ajax called and fetched the slider data from backend(MySql).

then a model box will appear with slider. Slider have the information whitch are fetched from backend(MySql) according to id.

There is lot of id in list. so it is not possible to set a static slider.

JS Fiddle http://jsfiddle.net/Njhvv/2/

jQuery

 $(document).ready(function () {
     $("#sliderAjaxButton").on('click', function () {
         $.when(
         $.getScript("http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"),
         $.getScript("http://ghusse.github.io/jQRangeSlider/stable/jQRangeSlider.js"),
         $.getScript("http://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderMouseTouch.js"),
         $.getScript("http://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderDraggable.js"),
         $.getScript("http://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderBar.js"),
         $.getScript("http://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderHandle.js"),
         $.getScript("http://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderLabel.js"),
         $.getScript("http://ghusse.github.io/jQRangeSlider/stable/jQRuler.js")

         ).done(function () {
             alert("Loaded all scripts");

         $("#sliderAjax").modal({
             "show": function(){
                 setTimeout(function(){
                      $("#sliderAjaxShow").rangeSlider("resize");
                 }, 500);
             }
         });

         });
     });
 });

HTML:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>  

 <link rel="stylesheet" href="http://ghusse.github.io/jQRangeSlider/stable/css/iThing.css" type="text/css" />
 <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <!-- Optional theme -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
  <!-- Latest compiled and minified JavaScript -->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="" id='sliderAjaxButton'>Show Slider Ajax</button>
   <!-- Modal -->
        <div class="modal fade" id="sliderAjax" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel">Modal title</h4>

                    </div>
                    <div class="modal-body" id='sliderAjaxShow'>...</div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>

Updated :

I am trying to load a Range Slider in Bootstrap Model Box.

Problem: First time it is not loading Properly. But after second time It is loading proper.

what i need : I need to load this in first attempt.

What I am doing: It is Showing on every JS tree leaf click. after click on Leaf a JSON will call to give data input to slider. With JSON data slider sets its postilion.

My linked Question :jQuery Range Slider is not loading in Modal Box

i have also tried with $.when() but still there is same problem.

Answer 1

You have to call $("#sliderAjaxShow").rangeSlider("resize") once the modal is shown, because jQRangeSlider calculates its position based on its size (which is 0 when the parent is hidden).

1. Add CSS rules to your fiddle, or you won't see anything.
2. Use the minified file, otherwise you'll have to include each development file in the right order.
3. Call resize when the modal is displayed (after the animation). As jQuery UI does not provide an event triggered once the animation is done, you'll have to bind the event show and call resize with timeout.

Something like

$("#sliderAjax").modal({
             "show": function(){
                 setTimeout(function(){
                      $("#sliderAjaxShow").rangeSlider("resize");
                 }, 500);
             }
         });

Take a look at the documentation here, you'll see a live example of an hidden slider displayed on demand: https://ghusse.github.io/jQRangeSlider/methods.html#resizeMethod