CODEWITHSUNDEEP
angularjs
texas697
texas697

Reputation: 6387

How to Dismiss Angular Modal

I am using Ekathuwa modals, I need to close it after a successfull Ajax PUT. I am trying to follow the examples they give. I am able to close the modal, but there is still a grey color on the screen. Like it is still open in the background? I still need to refresh the page for it to go away.

$scope.updateJob = function (job) {
    console.log($scope.currentItem);
    job.JobTypeId = $scope.currentItem.JobType.JobTypeId;
    job.JobClassId = $scope.currentItem.JobClass.JobClassId;
    job.GeoAreaId = $scope.currentItem.GeoArea.GeoAreaId;
    jobFactory.updateJob(job).success(successCallback)
        .error(errorCallback);
    console.log(job);
    var p = $ekathuwa.modal({
        id: "EditJobModal", contentStyle: "width:800px;heigth:400px",
        scope: $scope,
        templateURL: "views/modals/EditJobModal.html"
    });
    $q.when(p).then(function (m) {
        m.modal('hide');
    });
};
var successCallback = function (data, status, headers, config) {
    notificationFactory.success();
};
var errorCallback = function (job, status, headers, config) {
    notificationFactory.error(job.ExceptionMessage);
};

Upvotes: 0

Views: 884

Answers (2)

sarath2
sarath2

Reputation: 81

Move hide modal logic to successCallback function.

I don't know your editable fields on "views/modals/EditJobModal.html" or other pages. If it is on EditJobModal.html, Better to used two functions, one for create and open modal other for your update logic.

thanks, Sarath

Update

//Edit Job Modal
$scope.EditJobModal = function (id) {
    $.get('/api/apiJob/' + id, function (data) {
        console.log(data);
        $scope.currentItem = data;
        $scope.openEditJobModal =  $ekathuwa.modal({
            id: "EditJobModal", contentStyle: "width:800px;heigth:400px",
            scope: $scope,
            templateURL: "views/modals/EditJobModal.html"
        });
        //show modal window
        $scope.openEditJobModal.then(function (m) {
             m.modal('show');
         });
    });
}

 //Update Job 
$scope.updateJob = function (job) {
    console.log($scope.currentItem);
    job.JobTypeId = $scope.currentItem.JobType.JobTypeId;
    job.JobClassId = $scope.currentItem.JobClass.JobClassId;
    job.GeoAreaId = $scope.currentItem.GeoArea.GeoAreaId;
    jobFactory.updateJob(job).success(successCallback)
        .error(errorCallback);
    console.log(job);
 };
var successCallback = function (data, status, headers, config) {
     //hide modal window
     $scope.openEditJobModal.then(function (m) {
            m.modal('hide');
    });
    notificationFactory.success();
};
var errorCallback = function (job, status, headers, config) {
    notificationFactory.error(job.ExceptionMessage);
};

Modal

<input type="submit" ng-click="updateJob(currentItem)" value="Submit" />
<input type="button" ng-if="true" data-dismiss="modal" value="Exit" />

Upvotes: 1

Chankey Pathak
Chankey Pathak

Reputation: 21666

Seems to be a bug in AngularUI. See this: https://github.com/angular-ui/bootstrap/issues/1643

The modal scope is not being destroyed correctly on either close or dismiss.

Upvotes: 0

Related Questions