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 ());
Related
I want a function declared on my viewmodel to trigger when clicking a button. However the functions are not called when the button is clicked.
I have tried renaming the methods, callling them with parameters, but nothing triggers them. I know that knockout.js i loaded on the page since the showSmsPanel observable is working as expected.
MyJavascript.js
function AdminTilmeldingerViewModel() {
var self = this;
self.showSmsPanel = ko.observable(false); // hidden initially
self.cancelSend = function () {
console.log('cancelSend');
this.showSmsPanel(false);
}
self.sendSms = function () {
console.log('sendSms');
};
}
var vm = new AdminTilmeldingerViewModel();
ko.applyBindings(vm);
MyHtml.aspx
<div id="smsPanel" data-bind = "visible: showSmsPanel" class="row">
<input type=button class="btn btn-primary" data-bind="click: sendSms" id="btnSendSms" value="Send sms">
<input type=button class="btn btn-default" data-bind="click: cancelSend" value="Annuller">
</div>
I would expect the function to be called on clicking the buttons, but I dont see output logged to the console.
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
Here is a form
<cfoutput>
<form name = "xrefform"
id = "xrefform"
action = ""
method = "post"
onsubmit = "return submitx('#coltop#', '#col#')">
</cfoutput>
There are two different way to submit it:
1) when you want the data in the form to be placed in a MySql Table
2) when you want the data to be deleted from the Mysql Table
For the first case I have
<input type = "Submit"
name = "SubmitXref"
class = "submitbut"
value = "Submit"
onclick = "aasubmit('xref2.cfm')">
with corresponding javascript:
function aasubmit(target) {
document.xrefform.action = target;
}//end function aasubmit
This works fine.
For the delete case I have
<input type = "Submit"
id = "delbut"
class = "onoffbut"
value = "delete"
onclick = "aasubmit('repdel.cfm')">
This has a problem, which is that the submitx() javascript runs, and in this case I don't want it to.
I find references that say using the document.form.submit() method will avoid running the onsubmit function. But I can't figure out how to indicate the action.
Can someone show me how to do this?
After fussing around some more I found the answer:
For the delete button --which needs to evade the onsubmit script --here is the HTML:
<input type = "button"
id = "delbut"
value = "Delete this item"
onclick = "buttonsubmit('xrefdel.cfm', 'xrefform')">
And here is the javascript.
function buttonsubmit(target, source) {
var q = document.getElementById(source);
q.action = target;
q.submit();
}
This works perfectly. The ordinary submit honors the onsubmit script, the delete button skips it.
Let's outline your requirements:
One form
Two submit buttons
No JavaScript submit.
If you give each of the submit buttons a name, then you can have a single action page and check which button was clicked.
name="doUpdate" or name="doDelete"
The only name key that will exist in the form scope is whichever submit button was clicked. Use structKeyExists() to check and process accordingly.
Of course, you probably want to use onsubmit="return validateForm()" to call a validation function. If you click on "delete", you might want the user to confirm that was what they wanted to do before processing it. The function validateForm() just needs to return true or false, so you'll still avoid the JavaScript submit().
Do something like this in the form:
<input name="action" value="save" id="action" type="hidden">
<button type="submit" class="button button-basic-green" onclick="document.getElementById('action').value='save';"><span class="fa fa-save"></span> Save</button>
<button type="submit" class="button button-basic" onclick="document.getElementById('action').value='reload';"><span class="fa fa-repeat"></span> Save & Reload</button>
<button type="submit" class="button button-basic" onclick="document.location.href='./';return false;"><span class="fa fa-arrow-circle-o-left"></span> Cancel</button>
Note the default action of "save". Gets you something like:
Then in the singular form-action page, check to see what the form.action is and process accordingly.
<cfif form.action eq "reload">
<cfset loc="page.cfm?id=#form.id#">
<cfelse>
<cfset loc="./">
</cfif>
Right now I have an input field:
<input type="number" ng-model="distance"></input>
In the JS I assign the distance to a value:
$scope.distance = 0;
I want this value to change when the user enters in a value and clicks a button. I have the button setup with my controller... But every time the button is clicked, it displays the value as 0.
Function when button is clicked:
//convert button function for when button is clicked
$scope.convert = function(myUnit, myUnit2, distance){
alert(distance);
}
The button:
<button class="button button-block button-balanced" ng-click="convert(myUnit.thisunit, myUnit2.thisunit2, {{distance}})">
Convert
</button>
Change ng-click to this ng-click="convert(myUnit.thisunit, myUnit2.thisunit2, distance)" because you were using {{distance}} interpolation directive inside ng-click directive that will never pass distance value
HTML
<button class="button button-block button-balanced" ng-click="convert(myUnit.thisunit, myUnit2.thisunit2, distance)">
Convert
</button>
Hope this could help you, Thanks.
Depending on the structure of your HTML, (if you have an ngIf above your <input>) the distance model may not be trickling up to your controller.
You should probably nest it for safety, like so:
$scope.formData = {distance: 0};
And then:
<input type="number" ng-model="formData.distance"></input>
Also, your click-handler should just read from the $scope value as well:
$scope.clickHandler = function() {
alert(formData.distance);
}
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.