JQuery UI Slider in modal

1

I have a JQuery UI Slider that is not displayed within a modal.

What do I have to do to make the Slider show inside the modal?

This is my code (also available at Plunker ):

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function($scope, $uibModal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.animationsEnabled = true;

  $scope.open = function(size) {

    var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function() {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function(selectedItem) {
      $scope.selected = selectedItem;
    }, function() {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };



});

// Please note that $uibModalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function($scope, $uibModalInstance, items) {
  $scope.cancel = function() {
    $uibModalInstance.dismiss('cancel');
  };
});

$(function() {
  $(".slider").slider();
});
<script data-require="[email protected]*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link data-require="[email protected]*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<script data-require="[email protected]*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div ng-app="ui.bootstrap.demo">
  <div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
      <div class="modal-header">
        <h3 class="modal-title">I'm a modal!</h3>
      </div>
      <div class="modal-body">
        <span>SLIDER?</span>
        <div class="slider"></div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
        <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
      </div>
    </script>
    <button type="button" class="btn btn-default" ng-click="open()">Open me!</button>

    <div>
      <span>Slider OK</span>
      <div class="slider"></div>
    </div>
  </div>
</div>
    
asked by Tuco 02.06.2016 в 17:41
source

2 answers

2

The problem is that you start the slider when the page is loaded instead of when the modal is opened. So the slider is created at the beginning.

A possible solution would be to make the slider be created when the modal is opened (and specifying that it should be inside the modal and not because otherwise it seems that jQuery has problems).

Here I leave a possible solution modifying your original code minimally (I added the slider inside the function that opens and renders the modal):

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function($scope, $uibModal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.animationsEnabled = true;

  $scope.open = function(size) {

    var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function() {
          return $scope.items;
        }
      }
    });
    
    modalInstance.rendered.then( function() {
      $(".modal-body .slider").slider()
    });

    modalInstance.result.then(function(selectedItem) {
      $scope.selected = selectedItem;
    }, function() {
      $log.info('Modal dismissed at: ' + new Date());
    });
    
  };



});

// Please note that $uibModalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function($scope, $uibModalInstance, items) {
  $scope.cancel = function() {
    $uibModalInstance.dismiss('cancel');
  };
});
<script data-require="[email protected]*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link data-require="[email protected]*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<script data-require="[email protected]*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div ng-app="ui.bootstrap.demo">
  <div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
      <div class="modal-header">
        <h3 class="modal-title">I'm a modal!</h3>
      </div>
      <div class="modal-body">
        <span>SLIDER?</span>
        <div class="slider"></div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
        <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
      </div>
    </script>
    <button type="button" class="btn btn-default" ng-click="open()">Open me!</button>

    <div>
      <span>Slider OK</span>
      <div class="slider"></div>
    </div>
  </div>
</div>
    
answered by 02.06.2016 / 19:26
source
1

In addition to Alvaro's excellent response, this solution only uses the JQuery UI components and does not present the problem described.

PLUNKER HERE

    

<head>
 <script data-require="[email protected]*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
 <link data-require="[email protected]*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
 <script data-require="[email protected]*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
 <link rel="stylesheet" href="style.css" />
 <script src="script.js"></script>
</head>

<body>
 <meta charset="utf-8" />
 <title>dialog demo</title>
 <button id="opener">open the dialog</button>
 <div id="dialog" title="Dialog Title">I'm a dialog
 <div id="slider"></div>
 </div>
</body>
</html>

JS

$(function() {
 $("#dialog").dialog({
  autoOpen: false
 });
$("#opener").click(function() {
$("#dialog").dialog("open");
$("#slider").slider();
});
});
    
answered by 02.06.2016 в 19:11