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.
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 a data attribute data-niq which i am using to store some data. I want to pass the data in *-niq to a function as a second parameter to a function.
This is the code
<button onClick="editevent(this.id,this.id.getAttribute('data-niq'));" id="mid" data-niq="niq" class="mr edit btn btn-success pull-right"> Edit</button>
<script>
function editevent(clicked_id,attri_bute){
console.log('clicked id',clicked_id);
console.log('data-niq',attri_bute);
}
</script>
and the link https://jsfiddle.net/codebreaker87/zob8dm4z/8/
When i run the code i get TypeError: this.id.getAttribute is not a function
How can i pass the data-niq value in the inline function that i am calling?.
Few things here
Never mix your mark up with javascript
Try to bind events in javascript end.
check the following snippet.
window.onload = function() {
var mid = document.getElementById("mid");
mid.addEventListener('click', function() {
editevent(this);
})
}
function editevent(thisObj) {
var id = thisObj.getAttribute('id');
var dataniq = thisObj.getAttribute('data-niq');
alert(id);
alert(dataniq);
}
<button id="mid" data-niq="niq" class="mr edit btn btn-success pull-right">Edit</button>
Hope it helps
you have added this.id.getAttribute('data-niq');
remove id
this.getAttribute('data-niq')
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 going through the following examples in JsViews site for buttons http://www.jsviews.com/#link-button. When I modify the code to take an input and display the same in the alertbox on clicking the button, the helper function gets executed onload. Also, instead of on click of the button, the function gets executed when the input value changes. I am guessing since the model value is changed in the view, the function gets called with the updated model value but why is it not working on click of the button. I am quite new to jsviews and not able to understand what is happening. Can anyone tell me what is wrong with my approach. Below is the updated code.
<div id="topLinked">
<input type="text" data-link="test"/>
<button data-link="{on ~doSomething(test)}">Do something</button>
<input type="button" data-link="{on ~doSomething(test)}" value="Do something" />
</div>
var person = {};
var helpers = {
doSomething: function(val) {
alert(val);
}
}
$.link(true, "#topLinked", person, helpers); // Data-link top-level content
You made a mistake this: data-link="{on ~doSomething(test)}".
Arguments are passed through the one or more spaces like this: data-link="{on ~doSomething test test2 ...}".
I changed the example like this:
html
<div id="result"></div>
<script id="tmpl" type="text/x-jsrender">
<input type="text" data-link="test" value="Do something" />
{^{on ~doSomething test}}Do something{{/on}}
<button data-link="{on ~doSomething test}">Do something</button>
<input type="button" data-link="{on ~doSomething test}" value="Do something" />
</script>
js
var person = {
test : "start value"
};
var helpers = {
doSomething : function (val) {
alert(val);
return false;
}
}
var tmpl = $.templates("#tmpl");
tmpl.link("#result", person, helpers);
example on jsfiddle
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.