jQuery的范围滑块没有加载在模态对话框 [英] jQuery Range Slider is not loading in Modal Box

问题描述

我试图加载 jQRangeSlider 在一个模式对话框。 加载所有 jQRangeSlider 的脚本之后。 成功加载脚本，但语气中不与 jQRangeSlider

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

我努力做的事情。

还有就是 ID 上市。 点击每个 ID名为 Ajax和获取来自后端滑块数据（MySQL的）。

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

那么模型箱将出现滑块。滑块有whitch从后端（MySQL的）获取的信息，根据 ID 。

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

有很多的名单 ID 。因此，不可能设置静态滑块。

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

JS小提琴 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>

更新：

我试图加载一系列滑块在仿真模型盒。

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.

我在做什么：这是显示在每一个JS树叶点击。点击叶后JSON会打电话给数据输入到滑块。使用JSON数据滑块设置它的车夫。

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.

我的链接的问题：<一href="http://stackoverflow.com/questions/24411886/jquery-range-slider-is-not-loading-in-modal-box">jQuery范围滑块没有加载在模态对话框

我也试图与 $。当（），但仍然有同样的问题。

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

推荐答案

您必须调用 $（＃sliderAjaxShow）。rangeSlider（调整）一旦模态显示，因为jQRangeSlider计算根据它的大小（即0时，父母是隐藏的）。

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. 添加 CSS规则，以你的小提琴，否则你将看不到任何东西。
2. 使用的缩小的文件，否则你就必须包括在正确的顺序每个开发文件的
3. 呼叫调整显示模式时（动画后）。在jQuery UI不提供事件触发，一旦动画完成，你就必须要绑定的事件显示 并呼吁调整与暂停。

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.

类似于

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

看看文档在这里，你会看到需求的显示隐藏的滑块的一个活生生的例子：的 https://ghusse.github.io/jQRangeSlider/methods.html#resizeMethod

这篇关于jQuery的范围滑块没有加载在模态对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！