Skip to content

Instantly share code, notes, and snippets.

@vogelbeere
Created April 13, 2018 13:32
Show Gist options
  • Save vogelbeere/f2902bcb5995bcdbc9c385ea3c5c0a28 to your computer and use it in GitHub Desktop.
Save vogelbeere/f2902bcb5995bcdbc9c385ea3c5c0a28 to your computer and use it in GitHub Desktop.
Angular: Submit a post request from a modal and refresh the main page
var myApp = angular.module('myApp', ['ui.bootstrap']);
/* main controller - items */
myApp.controller('itemsCtrl', function ($scope, $rootScope, $http, $uibModal) {
//wrap $http.get request in a function
$scope.loadMyData = function () {
url = '<your_server>';
$http.get(url).then(function (response) {
$scope.items = response.data;
$scope.showModal = false;
$scope.open = function (item) {
$('.overlay').show();
var modalInstance = $uibModal.open({
controller: "itemsModalInstanceCtrl",
templateUrl: 'itemModalContent.html',
resolve: {
item: function () {
return item;
}
}
});
};
});
}
//initial load
$scope.loadMyData();
//event listener for refresh_items event
$rootScope.$on('refresh_items', function (event, data) {
console.log(data);
$scope.loadMyData();
});
});
/* modal instance - item */
myApp.controller('itemsModalInstanceCtrl', function ($http, $scope, $timeout, $uibModalInstance, item) {
$scope.item = item;
$scope.cancel = function () {
$uibModalInstance.dismiss();
$('.overlay').hide();
};
updateUrl = '<your_webservice_url>';
$scope.confirm = function () {
var myitemid = $scope.item.uniqueid;
// use $.param jQuery function to serialize data from JSON
var data = $.param({
uniqueid: myitemid
});
var config = {
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
}
}
$http.post(updateUrl, data, config)
.success(function (data, status, headers, config) {
$scope.PostDataResponse = "You have successfully submitted your data";
})
.error(function (data, status, header, config) {
$('.response').addClass('error');
$scope.ResponseDetails = "data: " + data +
"<br />status: " + status +
"<br />headers: " + header +
"<br />config: " + config;
});
$timeout(function () {
$uibModalInstance.close({});
$('.overlay').hide();
//tell parent controller to refresh the data
$scope.$emit('refresh_items', data);
}, 3000);
}
});
<!--MODAL WINDOW for item details -->
<script type="text/ng-template" id="itemModalContent.html">
<div class="modal-dialog ng-hide="hidden">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="cancel right button" data-dismiss="modal" aria-hidden="true" ng-click="cancel()"><i class="fa fa-close"></i></button>
<span class="item-name">{{item.name}}</span>
</div>
<div class="modal-body">
<p class="description">{{item.description}}</p>
<input type="hidden" ng-model="item.uniqueid" id="uniqueid" value="{{item.uniqueid}}" name="uniqueid"/>
<p class="response"> {{PostDataResponse}}</p>
<p class="error"> {{ResponseDetails}}</p>
</div>
<div class="modal-footer">
<button type="button" class="button cancel btn-default" data-dismiss="modal" ng-click="cancel()">Cancel</button>
<button type="button" class="button ok btn-primary" ng-click="confirm()">Submit</button>
</div>
</div>
</div>
</script>
@vogelbeere
Copy link
Author

I have a main controller with some data (fetched by $http.get), and when you click on one item, it pops up a modal with more details.

In my modal, there is a button to modify the data (sent by $http.post) which then closes the modal and needs to tell the parent controller to refresh the data, because it has been modified by the event in the modal.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment