Why are uibmodals only draggable on second call?

Question

I placed .draggable() on my modals but they only work on the second calls. The modals are called from a service file.

Service file:

function callWarningModalService(data) {
  var modalInstance = $uibModal.open({
    animation: true,
    templateUrl: vm.constants.WARNING,
    controller: vm.constants.WARNING_CONTROLLER,
    backdrop: vm.BACKDROP,
    resolve: {
       params: function () {
          return data;
        }
    }
  });

  $timeout(function () {
    $(".modal-content").draggable({ handle: ".modal-header" });
  }, 10);

  return modalInstance;
}

Inside callWarning() calling the modalService in Controller file:

modalService.callWarningModalService(vm.params).result.then(function (data) {
   if (data !== vm.constants.CANCEL) {
      vm.isDocumentAction = data;
      }
});

So yeah as a test, I moved a modal call from the service to the controller file and but same results were shown.

Inside callWarning() in Controller file

modal.message = vm.constants.WARNING_MESSAGE;
var modalInstance = $uibModal.open({
  animation: true,
  templateUrl: vm.constants.WARNING,
  controller: vm.constants.WARNING_CONTROLLER,
  backdrop: vm.BACKDROP,
  resolve: {
     params: function () {
        return modal;
      }
  }
});

$timeout(function () {
  $(".modal-content").draggable({ handle: ".modal-header" });
}, 10);

modalInstance.result.then(function () { });

I tried to debug it on chrome dev tools and it calls jquery-ui-draggable on first and the succeeding modal calls with the exact same patterns.

Is there a way so that the modals will already be draggable on the first call? Why do you think it won't work on the first call?

user_7418061 · Answer

The reason why draggable() is not functioning properly is because you called the draggable() function after you executed the $uibModal.open(). The draggable should be executed inside your modal controller.

First, you can remove the argument on your draggable() function like this.

$timeout(function () {
  $(".modal-content").draggable();
}, 10);

According to TutorialsPoint:

The draggable (options) method declares that an HTML element can be moved in the HTML page. The options parameter is an object that specifies the behavior of the elements involved.

Second, you must transfer the $timeout function inside the WARNING_CONTROLLER.js and remove it from your callWarning() function. Your callWarning() function should look like this

function callWarning()
{
     modal.message = vm.constants.WARNING_MESSAGE;
     var modalInstance = $uibModal.open({
         animation: true,
         templateUrl: vm.constants.WARNING,
         controller: vm.constants.WARNING_CONTROLLER,
         backdrop: vm.BACKDROP,
         resolve: {
             params: function () {
                 return modal;
             }
         }
     });

     modalInstance.result.then(function () { });
}

Why are uibmodals only draggable on second call?

1 Answers