The Issue:
I've been unable to to accept a modal window with the ENTER key
I have modified the default Plunker to show you what I've done since now --> Here
What I have:
Briefly, the ENTER key is recognized by the modal, but it doesn't trigger my function (scope issues, I suspect).
The bad part is that I had to modifiy the template/modal/window, which I would gladly left unspoiled, if possible.
What I would love
I would love to simply put the ng-enter directive in my modal, without modifying the default template
Extra
I've also tried to add the "event 13" to the modal directive, but I couldn't pass any result in the modal.close, so I dropped that road
Any thought?
Check my Plunker. You should add ng-enter to "OK" button.
<button class="btn btn-primary" ng-enter="ok();" ng-click="ok()">OK</button>
Maybe you are looking for something more generic, I'm not sure. Then you might consider watchers. But personally I find this better since we don't have any constant watcher which listens modal event.
I have found that it is easiest just to add the enter event handler in the controller of the modal:
var text = "This is the text in the modal";
var modalPromise = $modal.open({
template:
'<div class="modal-body">' +
'<button class="close" ng-click="$dismiss(\'×\')">×</button>'+
'<h3 ng-bind="body"></h3>'+
'</div>'+
'<div class="modal-footer">'+
'<button class="btn btn-primary" ng-click="$close(\'ok\')">OK</button>'+
'<button class="btn btn-warning" ng-click="$dismiss(\'cancel\')">Cancel</button>'+
'</div>',
controller: function ($scope, $document) {
$scope.body = text;
var EVENT_TYPES = "keydown keypress"
function eventHandler(event) {
if (event.which === 13) {
$scope.$close('ok');
}
}
$document.bind(EVENT_TYPES, eventHandler);
$scope.$on('$destroy', function () {
$document.unbind(EVENT_TYPES, eventHandler);
})
}
}).result;
AngularJS support this be default.
Add a <form> tag in your template (modal.html) and add ng-submit directive
e.g.
<form name="questionForm" ng-submit="ok()">
<div class="modal-header">
<h3 class="modal-title">{{title}}</h3>
</div>
// the rest of the code here
</form>
Related
Okay so I am learning AngularJS, and one functionality is to allow the user to type HTML code into a textarea, this gets sent to the Controller and stored in a code variable. When the user presses the button to test the code, I want the text to be inserted into the HTML document. Currently all it does is add it as plain text, so not rendering it.
test-code.template.js:
<button type="button" class="btn btn-primary" ng-click="$ctrl.showCode()">Test Code</button>
<button type="button" class="btn btn-primary" ng-click="$ctrl.clearCode()">Reset All</button>
{{$ctrl.codeShow}}
test-code.component.js:
angular.
module('phonecatApp').
component('testCode', {
templateUrl: 'Components/test-code/test-code.template.html',
controller: [function TestCodeController() {
var self = this;
self.code = '';
self.codeShow = '';
self.showCode = function showCode()
{
self.codeShow = self.code;
}
self.clearCode = function clearCode()
{
self.codeShow = '';
self.code = '';
}
}]
});
Just to clarify, pressing the buttons do work and the data is successfully added from code to codeShow on the button press, and it can display it, but it is displayed as clear text instead of rendering. Thank you
Try
<div ng-bind-html="$ctrl.codeShow"></div>
also, do refer https://docs.angularjs.org/api/ngSanitize/service/$sanitize for better implementation
I have button "Cancel". On click on which I should show confirmation dialog to ask if user realy want to lost filled in data (in case he made some changes), and just hide form in case he didn't make changes.
I have variable canSave, which helps to detect if there are some changes on form.
cancel - method, which just clear all data and hide form.
This is what I've tried, but this didn't do anything.
<button data-bind="click: canSave ? function(){openConfirmation(!openConfirmation());} : cancel" type="reset" class="btn btn-default">Cancel</button>
Initial Code :
<button data-bind="toggleClick: openConfirmation" type="reset" class="btn btn-default">Cancel</button>
toggleClick is custom directive to change toggle some boolean variable.
<!-- ko if: canSave -->
<confirmation-modal class="delete-confirm-popup" params="showDialog : openConfirmation, bodyHtml: 'Your changes will not be saved.<br/> Do you want to continue?', confirmCallBack: cancel"></confirmation-modal>
<!-- /ko -->
I've showed confirmation in save there are some changes... But here I've missed case case when no changes and user click on Cancel button (in my case nothing happens).
So how can I combine 2 directives - click (for case with no changes) and toggleClick (for case when there are some changes) ?
Thanks.
You can simply have a single function on click event and then inside the function compare if there is a change that needs to be asked.
Here is a simple example : https://jsfiddle.net/kyr6w2x3/110/
HTML:
<form data-bind="visible:ShowForm">
<input type="text" data-bind="textInput:Input">
<input type="button" value="Cancel" data-bind="click:CancelForm">
</form>
<div data-bind="text:Status">
</div>
JS:
var MainViewModel = function() {
var self = this;
self.Input = ko.observable();
self.Status = ko.observable();
self.ShowForm = ko.observable(true);
self.canSave = ko.observable(false);
self.Input.subscribe(function(newValue){
if(newValue){
self.canSave(true);
}
})
self.CancelForm = function(){
if(self.canSave()){
self.Status("there is a change that needs to be asked the user");
}else{
self.ShowForm(false);
self.Status("there is no change so the form got hidden")
}
}
};
ko.applyBindings(new MainViewModel ());
I am trying to make a modal act like a confirm button. You click the button, a popup opens up and askes yes or no, if yes, stores some info in database, removes that item from the DOM then adds an item somewhere else. But, right now, if they click the confirm "yes", it runs the ajax call multiple times. I feel like it is running it for other places where data-express="yes" but I don't know why it could...shouldn't $(this) only be the button that is clicked? I don't see what in here would make it run more than one time.
The button -
<ul class="list-inline center-block">
<li><button type="button" class="btn btn-primary center-block express_button" data-confirm="yes" data-dismiss="modal">Yes</button></li>
<li><button type="button" class="btn btn-primary center-block express_button" data-confirm="no" data-dismiss="modal">No</button></li>
</ul>
JS
$('.snf_interest').on('submit', function(e){
e.preventDefault();
var id = $(this).find('input[name=resid]').val();
var ppcode = $('.placement_item_' + id + ' .pdcode' + id).text();
var ppdate = $('.placement_item_' + id + ' .pp_date').text();
var dcpname = $(this).find('input[name=dcpname]').val();
var dcpemail = $(this).find('input[name=dcpemail]').val();
var prefcom = $(this).find('input[name=prefcom]').val();
var ppid = $(this).find('input[name=ppid]').val();
var patientneeds = $('.placement_item_' + id + ' .patientneeds').text();
var dcphone = $('.placement_item_' + id + ' .dcphone').text();
var dcnote = $(this).find('input[name=notes]').val();
$('#express_interest_modal').modal();
//if(confirm('Are you sure you want to express interest in this patient')){
$('.express_button').on('click', function(){
console.log($(this));
if($(this).data('confirm') == 'yes'){
$.ajax({
// url: "/snf/express_interest",
type: "POST",
data: { 'ppid' : ppid,
'status' : status,
'dcpname' : dcpname,
'dcpemail' : dcpemail,
'prefcom' : prefcom
},
success:function(){
// $('#interest_modal').modal('show');
$('#panel-placement .panel-body').append('<ul class="list-group list-group-no-pad"><li class="list-group-item clearfix well well-sm"><label>'+ppcode+'| Posted: '+ppdate+'</label><form class="pull-right" action="http://dev.goodcareconnection.com/snf/" method="post"><input type="hidden" name="ppid" value="'+ppid+'"><div class="btn-group" role="group" aria-label="..."><input class="btn btn-sm btn-danger" type="submit" name="ppbutn" value="Hide This Patient"></div></form></li><li class="list-group-item clearfix"><div class="col-md-12"><label>Needs: <h5 class="patientneeds">'+patientneeds+'</h5></label></div></li><li class="list-group-item clearfix"><div class="col-md-4"><label>Posted by: <h5>'+dcpname+'</h5></label></div><div class="col-md-4"><label>Email: <h5>'+dcpemail+'</h5></label></div><div class="col-md-4"><label>Phone: <h5>(303) 570-9863 M: (303) 570-9863</h5></label></div></li><li class="list-group-item clearfix"><div class="col-md-6"><div class="form-group"><h5><label>Notes</label></h5><textarea id="ppnote35" class="form-control update_note" name="notes" readonly="">'+dcnote+'</textarea></div></div><div class="col-md-6"><form class="snf_interest"><button class="btn btn-danger btn-sm pull-right" name="submit">Remove Interest</button></form></div></li></ul>');
$('.placement_item_'+ppid).remove();
var number = $('.express_badge').html();
number = parseInt(number);
number = number + 1;
$('.express_badge').html(number);
var number = $('.bulletin_count').html();
number = parseInt(number);
number = number - 1;
$('.bulletin_count').html(number);
}
})
}
})
});
The problem stems from adding one event handler inside another event handler.
The first time submit is triggered...the express_button elements do not have a click handler that would do the ajax previously attached. It gets added in this first submit event
Clicking "Yes" should only do make one ajax request.
The next time submit is triggered it will add the same event handler again.
Now clicking "Yes" will run 2 instances of the event handler and make 2 requests.
Every submit will increment the number of requests made
A simple solution would be remove the click handler as soon as it gets used.
Beware though that if modal gets closed using methods other than the buttons the event handler will still be there and problem will persist
$('.express_button').on('click', function(){
$(this).off('click')
// other code
});
A better solution would be separate the submit and click handlers by storing the data that needs to be sent so it would be accessible when "Yes" is clicked
I have four buttons:
<button ng-disabled = "isDisabled1" ng-click="someFunc('isDisabled1')"></button>
<button ng-disabled = "isDisabled2" ng-click="someFunc('isDisabled2')"></button>
<button ng-disabled = "isDisabled3" ng-click="someFunc('isDisabled3')"></button>
<button ng-disabled = "isDisabled4" ng-click="someFunc('isDisabled4')"></button>
Now when click event fires on any one of the button it calls the someFunc() function and inside that function I want to disable the button that was clicked.
I am doing this inside the controller:
$scope.someFunc(toDisable){
$scope.toDisable = true;
}
But that does not work. Any idea how. I am new to AngularJS.
Use an map to store value
Ex : $scope.isDisabled={
isDisabled1:false,
isDisabled2:false,
.
.
.
}
and in
$scope.someFunc(toDisable){
$scope.isDisabled[toDisable]= true;
}
An alternative and simple way to do this is to use the ng-click directive to evaluate an expression that will manipulate the variable used in the ng-disabled directive.
e.g.
<button ng-disabled="ds1" ng-click="ds1 = true">btn1</button>
<button ng-disabled="ds2" ng-click="ds2 = true">btn2</button>
<button ng-disabled="ds3" ng-click="ds3 = true">btn3</button>
<button ng-disabled="ds4" ng-click="ds4 = true">btn4</button>
Associated plunker here.
To shorten up the post this is all the info needed for my problem, so i made a button that gives +1 rating and a button for -1 rating when clicked and this is its HTML code,
<p>
<strong>Rating: </strong> {{ album.rating }}
<button class="btn btn-small" ng-click="upVoteRating(album)">+</button>
<button class="btn btn-small" ng-click="downVoteRating(album)">-</button>
</p>
Nothing unusual, heres the angularjs code using scope and the function for the button.
$scope. upVoteRating = 'upVoteRating';
$scope. downVoteRating = 'downVoteRating';
function upVoteRating(album) {
album.rating++;
}
function downVoteRating(album) {
if (album.rating > 0)
album.rating--;
}
So theres no problem with the code by my guessings but everytime i click the button on my page, it says this on the console:
"TypeError: string is not a function
at http://localhost:1234/lib/angular/angular.min.js:168:37
at http://localhost:1234/lib/angular/angular.min.js:186:167
at g.$eval (http://localhost:1234/lib/angular/angular.min.js:104:308)
at g.$apply (http://localhost:1234/lib/angular/angular.min.js:105:48)
at HTMLButtonElement.o.event.dispatch (http://localhost:1234/lib/jquery-2.1.0.min.js:3:6055)
at HTMLButtonElement.r.handle (http://localhost:1234/lib/jquery-2.1.0.min.js:3:2830) angular.js:9507"
I've got no idea how to fix this, i've been looking for an hour, so please, if you need more code to help you out to find the problem out ask right away!
Thanks again!
You're setting it as a string here:
$scope.upVoteRating = 'upVoteRating';
and trying to call it as a function here
<button class="btn btn-small" ng-click="upVoteRating(album)">+</button>
Remove the quotes in the controller and you should be good:
$scope.upVoteRating = upVoteRating;
$scope.downVoteRating = downVoteRating;