My modal holds a form and I want to close the modal when the user clicks the submit button. The simplified form looks like this:
<div class='modal fade' id='{{ module.name }}Modal' role='dialog'>
<div class='modal-dialog modal-lg'>
<div class='modal-content'>
<form ng-submit='submitModule(module)'>
<div class='modal-body'>
...
</div>
<div class='modal-footer'>
<button type='submit' class='btn btn-primary'>Run</button>
<button type='button' class='btn btn-default' data-dismiss='modal'>Cancel</button>
</div>
</form>
</div>
</div>
You can see the two buttons. The close button uses data-dismiss='modal' which works fine. But I can't use that on the submit button, because that "cancels" out the ng-submit=submitModule() submission function; the modal will close but the function won't get called.
Would the solution be to close the modal from the submitModule() function? But how can I get a hold of the modal from there?
You can append as many method calls to the (ngSubmit) i.e
form class="well" (ngSubmit)="addUserModal.hide(); addUser(model); userForm.reset()" #userForm="ngForm"
You can add one small jQuery code in your HTML file...
Add onclick attribute in button.
<div class='modal fade' id='{{ module.name }}Modal' role='dialog'>
<div class='modal-dialog modal-lg'>
<div class='modal-content'>
<form ng-submit='submitModule(module)'>
<div class='modal-body'>
...
</div>
<div class='modal-footer'>
<button type='submit' class='btn btn-primary' onclick="$('.modal').modal('hide')">Run</button>
<button type='button' class='btn btn-default' data-dismiss='modal'>Cancel</button>
</div>
</form>
</div>
Use the Angular-UI library - Modal: download minified version here:
First include the library in your module:
angular.module('myModule', ['ui.bootstrap']);
Then, in your controller, you can close the modal within the form submit function:
$scope.submitModule = function(module) {
dialog.close(result);
// REST OF YOUR CODE TO HANDLE FORM INPUT
}
Related
I would like to have a modal window using uikit popup in my react application.
When I include this code in my public/index.html file the modal is showing correctly:
<a uk-toggle href="#my-id">Teste Modal bg-close:false</a>
<div id="my-id" uk-modal="bg-close: false">
<div class="uk-modal-dialog uk-modal-body">
<button class="uk-modal-close-default" type="button" uk-close></button>
<p>This modal can NOT be close by just clicking outside of it ...</p>
<p>Please click on the X at the top right to close it.</p>
</div>
</div>
But it will not work if I try to use it from inside a react component like this:
<a className="uk-toggle" href="#my-id">Test Modal bg-close:false</a>
<div id="my-id" uk-modal="bg-close: false">
<div className="uk-modal-dialog uk-modal-body">
<button className="uk-modal-close-default" type="button" uk-close></button>
<p>This modal can NOT be close by just clicking outside of it ...</p>
<p>Please click on the X at the top right to close it.</p>
</div>
</div>
I can see the link but the click doesn't have any effect.
Am I doing something wrong?
EDIT
I added a jsfiddle, and I confirm the react version is still not working...
https://jsfiddle.net/umfk8jnc/9/
You have to add a data- prefix. Here is an updated JSFiddle link: https://jsfiddle.net/pd8nt5mx/
NOTE React will work with data-uk-* prefixes only.
Source: https://getuikit.com/docs/javascript#component-usage
I'm using angular-ui-router-uib-modal and I have a question on it.
When I close my modal (which confirm a successfull/failed operation), I need to reload page below (that show a list of data). As shown in the example below, I can specify that behavior in 'Close' button and also in 'X symbol' to close modal (with the ui-sref-opts="{reload: true}").
But... How can I specify the same operation when a user clicks outisde the modal and automatically closes the modal itself?
<div class="modal-content">
<div class="modal-header">
<div class="bb8-modal-close" ui-sref="home.gestioneFondi({gestione:true, innescatoDaMenuLaterale:false})" ui-sref-opts="{reload: true}">
<span class="visuallyhidden glyphicon glyphicon-remove-circle"/>
</div>
<h4 class="modal-title modal-title-font">Info</h4>
</div>
<div class="modal-body" ng-switch="esito">
<p class="text-center modal-body-font" ng-switch-when="true">Success</p>
<p class="text-center modal-body-font" ng-switch-when="false">Error</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ui-sref="home.gestioneFondi({gestione:true, innescatoDaMenuLaterale:false})" ui-sref-opts="{reload: true}">Chiudi</button>
</div>
</div>
Thank you for any help
So when you open a modal like this it is returning the promise:
var modalInstance = $modal.open({..});
you can specify the modal closing event on the promise
modalInstance.result.then(function (result) {..});
You can specify below code to reload the state.
$state.reload();
For above to work, you have to inject $state dependency in your controller.
app.controller('controller', ['$state',function($state){..}])
I am using file input of jasny-boostrap in AngularJS in a Modal, so I also used the jasny-bootstrap-angular. I am having two doubts about:
When I Click on the button to open the model, I am able to select then file I want. If I select a file e close the model, when I open again the model, the file will be in data-preview, it it not cleaning up. I want pass null value (or reset) this image preview (fileinput-preview thumbnail) in my angularjs when I click in my button to open the modal;
If a click in a button that call a modal, I want to automatic get the image from my web service to the data-previw and automatic change the buttons to 'remove' and 'change' and I get a picture to service.
My HTML:
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-preview thumbnail" style="width: 200px; height: 150px;"></div>
<div>
<span class="btn btn-primary btn-file">
<span class="fileinput-new">Select a image</span>
<span class="fileinput-exists">Change</span>
<input type="file" name="file" file-model="fileinput"> <!--compose.myFile-->
</span>
Remover
<button class="btn btn-info" ng-click="showInput()">Show Input</button>
</div>
</div>
And if I click on 'show input' I can see the image binary, I used this angularjs:
$scope.showInput = function () {
console.log($scope.fileinput.result);
}
I am using this HTML code with my angularjs to see the image from web service and it is everything work perfect:
<!-- Foto view-->
<div class="form-group">
<img ng-show="equipamento.FotoEquipamento != null" style="height:auto; width:225px;" data-ng-src="{{getImage(equipamento.FotoEquipamento)}}" />
</div>
jasny-bootstrap-angular is UPDATED.
Please check it out.
Now it supports event handlers also.
I have inherited a GUI written with Angular, and at the moment I don't even know enough to trim it down to a fiddle. So I'm hoping this is more straightforward than it appeared on a quick Google.
I have a modal dialog created using Bootstrap that is basically the same as the live demo here: http://getbootstrap.com/javascript/
A copy of the source from that link:
<div class="modal fade" id="myModal" 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-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</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>
The main difference in my case is that the "Save Changes" button is actually a link - to a resource which is downloaded without leaving the page. It looks like this:
<a ng-href="{{downloadUrl}}" class="btn btn-primary">Download</a>
My goal is to have the above modal dialog dismissed when the link is clicked, while still downloading the file. If I use data-dismiss, the download doesn't happen.
If I need to go digging around the code, that's fine, but I'm hoping there's a simple change to the template that will do the trick. Any suggestions?
First, when using with AngularJS 1.x, always use Bootstrap UI.
When using Bootstrap UI's $uibModal, it is way easier to manipulate the modal, and pass data between the view and the modal. The reason the link does not work, is because the modal should be closed first.
You can create a simple function which replaces href or ng-href: It closes the modal first, and goes to the link second.
And, remember, please do not use jQuery, and always try to use AngularJS dependencies like $window instead of window, when they're available. This also goes for onclick. always use ng-click, and handle the logic in your controller.
In your template, add the controller, and an ng-click-attribute:
<div ng-controller="MyCtrl as $ctrl">
<a href target="_blank" class="btn btn-primary" ng-click="$ctrl.go('#/some/url')"> Go </a>
</div>
In your controller, add the logic, for closing the modal, and following the link:
app.controller('MyCtrl', function($uibModalStack, $window) {
this.go = function(path) {
$uibModalStack.dismissAll();
$window.location.href = path;
}
})
You have to close the modal yourself. Here is a bootstrap.js only solution without angular. In angular you would open the modal with angular-bootstrap and close it also that way.
<a ng-href="some-reosource-url" target="_blank" class="btn btn-primary" onClick="closeModal()">Download</a>
function closeModal() {
$('#myModal').modal('hide');
}
http://plnkr.co/edit/0sRb5VdT9isEFdJ66Rxe?p=preview
Here's a working Plunker.
JS
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.hideAndDownload = function() {
$('#myModal').modal('hide');
var link = document.createElement("a");
link.download = "data:text/html";
link.href = "http://code.jquery.com/jquery-1.11.3.min.js";
link.click();
}
});
Markup
<button type="button" class="btn btn-primary" ng-click="hideAndDownload()">Save changes</button>
I'm using AngularJS and AngularStrap, and I've been trying to create a popover that calls a function when a button is pushed and then if the function succeeds doing what it needs to do it automatically closes the popover. The popover inherits the parent scope, and the function I'm calling is on the parent scope, but the $hide function is not. I tried passing it via a parameter ng-click="vm.newAsUnitPriceRule(stagingItem, $hide), but that did not work, apparently you can't pass the $hide function, it just results in undefined when you step in to the function.
<div class="popover">
<a ng-click="$hide()"><small class="pull-right">X</small></a>
<div class="popover-content">
<button class="btn small newAsUnitPriceRule" ng-click="vm.newAsUnitPriceRule(stagingItem)">Pack As Unit Price</button>
<br>
<button class="btn small newPackAsSizeRule" ng-click="vm.newPackAsSizeRule(stagingItem)">Pack As Size Rule</button>
<br>
<button class="btn small newRule" ng-click="vm.newRule(stagingItem)">Custom Rule</button>
</div>
<div class="arrow"></div>
</div>