<script type="text/Javascript">
function phase2Function(){
document.getElementById("0").onclick = buttonChangeFunction();
}
function buttonChangeFunction(){
document.getElementById("1").disabled = "true";
}
</script>
<button id="0" onclick="numberFunction(0)">0</button>
<button id="1" onclick="numberFunction(1)">1</button>
I have a problem with the above code that makes the "buttonChangeFunction" work without me clicking 0. The project im working on is a calculator, where after you press a math operator, it starts phase2Function. Edit: The Question Has been Answered, but I was wondering what to do if I actually want to put something in between the parentheses of buttonChangeFunction?
You need to remove the parenthesis after buttonChangeFunction in phase2Function.
What you are trying to do is make buttonChangeFunction fire each time the button with the ID of '0' is clicked.
Instead, what you're actually doing, is calling buttonChangeFunction, getting back an undefined result (since the function doesn't return anything) and then setting the click handler of the id=0 element to this undefined result.
So, simply change:
document.getElementById("0").onclick = buttonChangeFunction();
to
document.getElementById("0").onclick = buttonChangeFunction;
Related
Below is the HTML snippet for a button that I would like to be disabled while no files, from a UI list of files, are selected:
<button id="downloadButton" disabled.bind="selectedFileCount() == 0" click.trigger="downloadFiles()" type="button">Download Selected</button>
The conditional function for whether the button is disabled or not:
selectedObjects = [];
selectedFileCount() {
return this.selectedObjects.length;
}
When a file is selected, the following is triggered:
rowSelected($event) {
this.selectedObjects.push($event.detail.row);
}
I know that rowSelected works properly as I can console.log(selectedObjects.length) and get the correct length. I know that selectedFileCount() works because I can return boolean values which are reflected in whether the button is disabled or not.
It appears that once disabled.bind is set on DOM load, it cannot be changed. Is this assumption correct? What should I do?
Aurelia treats any function calls in a binding as being pure function calls. Since your selectedFileCount function doesn't take any parameters, this means that Aurelia assumes the output value of the function will never change. That is why your disabled binding never changes.
My recommendation for how to fix it is to simply put the check in the binding.
<button id="downloadButton" disabled.bind="selectedObjects.length == 0"
click.trigger="downloadFiles()" type="button">
Download Selected
</button>
I stuck with the inline validation in the kendo grid.
I don't want to validate after losing focus. I want to validate immediately after typing. So I start using the HTML validator. It works pretty well but the problem is I cant answer these two questions:
which event set the input from valid to invalid.
which event displays the error message.
My Current work: https://dojo.telerik.com/OSONo/56
which event set the input from valid to invalid.
...
which event displays the error message.
Just run your kendoValidator with validator.validate();
The error messages are also set with validate().
Something like this should work:
$(document).on('input propertychange', function() {
validator.validate();
});
The warning seems to be hidden behind some elements, so you can also add the folowing errorTemplate to your kendoValidator:
errorTemplate: '<div class="k-widget k-tooltip k-tooltip-validation" style="margin: 0.5em; display: block;"><span class="k-icon k-i-warning"></span>#=message#<div class="k-callout k-callout-n"></div></div>'
And the whole solution:
https://dojo.telerik.com/OSONo/66
Solved my Problem on my Own. I will edit the post so you can see what i mean but first i just give the dojo projcet.
https://dojo.telerik.com/OSONo/64
my edit:
I am sorry for my previous anwser, i just want to give him my solution i mention in my comment.
In my solution i created an event listener, how listen to all input elements. When something has changed it, saves the current cursor position (its import for ie support) and after this it trigger my "change" event. The "change" event check if it is valid or invalid. If it is invalid the kendo validator shows imidently the error-message (not as default by a blur event).
var ValidierungCheckClass = (function () {
return {
AllDOMElements: function () {
$('body').on('input', function () {
var myActiveElement = $(':focus');
if ((myActiveElement) && (myActiveElement.context.activeElement.nodeName.toLowerCase() !== "body")) {
var myActiveDOMElement = myActiveElement[0],
start = myActiveDOMElement.selectionStart, //just for IE Support
end = myActiveDOMElement.selectionEnd; //just for IE Support
myActiveElement.trigger("change");
myActiveDOMElement.setSelectionRange(start, end); //just for IE Support
}
})
}
}
});
The change event is allready created from kendo so you dont have to write your own.
At least you have to call the method when creating the website.
<script>
ValidierungCheckClass().AllDOMElements();
</script>
This is my Solution to my problem.
best regards.
I want to change value of a variable when the value of scroll position is greater than 100 from top but it doesn't work, the value doesn't change in $scope.
Here is the code:
<div ng-show="title===true">
<p>{{title}}</p>
<p>{{card.nome}}</p>
<p>{{card.prezzo}}€</p>
</div>
<ion-content style="top:0px" delegate-handle="cardScroll" on-scroll="getPositionScroll()">
$scope.title = true;
$scope.getPositionScroll = function () {
console.log("scrollPosition " + JSON.stringify($ionicScrollDelegate.$getByHandle('cardScroll').getScrollPosition().top));
console.log("valore title " + $scope.title);
console.log($ionicScrollDelegate.$getByHandle('cardScroll').getScrollPosition().top >= 100);
$scope.title = $ionicScrollDelegate.$getByHandle('cardScroll').getScrollPosition().top >= 100;
};
Does anyone know why this is not working?
I think it may have to do with the fact that Angular doesn't track changes that have been made by the getPositionScroll() function. A lot of Angular functions are wrapped in the $scope.$apply() function which notifies Angular about changes that have been made. But I think that the function used to track scrolling is not wrapped in this function, which means that you need to call it yourself.
So after $scope.title add:
$scope.$apply($scope.title);
There are a lot of questions regarding when to use $scope.$apply(), like this one, if overused it can cause serious harm to the performance of your app. There is also information about this in the Angular documentation. You may also find some insight in this question about when to use this function in a scroll event.
I'm protocolling how long someone is staying at a certain jsp-page, so I have three functions called in my body-tag:
<body onunload="pageLeft();" onload="pageEnter(); startInterval();">
pageEnter sends an ajax-request to the server which contains the ID of the page and a '1' for page-enter.
startInterval starts an interval and sends every few seconds an ajax-request to the server which contains a '2' for being still there.
pageLeft send a '3' by ajax so I know the user has left the page.
Most essential are '1' and '3' which are used to group all the protocolled-data.
There is also a form on the page which has a submit-button:
<form action="/UpdateDB/Customers.jsp" method="POST" name="Custpost">
I was in the intention the form-data would be transferred to Customers.jsp afterwards the current page is unloaded and Customers.jsp loaded.
All my trials making the procedures in Customers.jsp work failed and now I found out why:
In the database are only 1s and 2s but no 3. This means the current page was never unloaded - yet the procedure has started already...
I thought about manually setting the 3-entry in the Customers.jsp but this would leave two such entries in the database. Also if the user just leaves the page no 3-entry would be left at all.
What am I supposed to do?
Unfortunately onbeforeunload didn't work as expected - after the replacement nothing was called. onbeforesubmit didn't look too promising either (but I haven't tried), but I got another idea:
First: Adding a Function which is called on submit to the form, also a variable to distinguish whether the function had been called or not. Also saving the ID of the interval in the variable intervalid (See: Stop setInterval call in JavaScript):
var nosubmit = true;
$(function () {
$('#Custpostform').submit(function () {
if (nosubmit) {
pageLeft();
clearInterval(intervalid);
nosubmit = false;
return true; // return false to cancel form action
}
});
});
<!-- -->
<form action="/UpdateDB/Customers.jsp" method="POST" name="Custpost" name="Custpostform">
The rest remains pretty much the same, just the onunload is now slightly modiefied:
<body onunload="if (nosubmit) {
pageLeft();
nosubmit = false;
}"
It's not really the solution I anticipated but it works as supposed
This way would seem to be better. I can get both onbeforeunload and onunload to work in Chrome and Firefox (I didn't test any others).
See the fiddle for an interactive version.
HTML:
<body onload="testLoad()" onunload="testUnload()" onbeforeunload="return testBeforeUnload()">
</body>
JS:
function testBeforeUnload() {
return "test before unload event";
}
function testUnload() {
console.log("test unload event");
}
I'm at my wit's end with this.
Can anyone see anything wrong with this line? The function won't fire by clicking on the checkbox for some reason, but the calling function works fine (if I copy the exact "onclick" attribute over to the label for the checkbox, it works fine).
<input type="checkbox" name="match_35_0" id="match_35_0d" value="d0" onclick="checkSwap(document.page_form.match_35_0d, document.page_form.match_35_0)"></input>
If anyone can see why on earth this wouldn't be working, I would really appreciate it.
Thanks!
EDIT: Since a couple people asked, here's the checkSwap function (all it does is throw an alert so I can see that my onclicks are working before I add any code):
function checkSwap(radioid, groupid) {
alert("radio: " + radioid + " group: " + groupid);}
And here's the whole sample of the table cell that the checkbox in question is in (apologies for the formatting, the code sample doesn't seem to want to accept my newlines):
<td><label onclick="checkSwap(document.page_form.match_34_0d,document.page_form.match_34_0)" for="match_34_0">N</label><input type="checkbox" name="match_34_0" id="match_34_0d" value="d1" onclick="checkSwap(document.page_form.match_34_0d, document.page_form.match_34_0)"></input></td>
EDIT: Alright, canceling out a separate function that was limiting the checkboxgroup to 1 checked box was the issue.
The code that does the limiting was setting an onclick attribute for each checkbox, and that is apparently overriding the tag-set attribute. I'll have to figure out how to hack around it.
This syntax
document.page_form.match_35_0d
actually searches in the form with name of page_form for an input element with name of match_35_0d. But you have actually set it as an id of the checkbox where the onclick is definied.
You could solve your problem with the following call in the onclick:
checkSwap(this, document.page_form.match_35_0)
By the way, a checkbox is not the same as a radiobutton and you're actually not passing the ID's to the function, but instead the whole elements. Rewrite your function as
function checkSwap(checkbox, group) {
var checkboxId = checkbox.id;
for (var i = 0; i < group.length; i++) {
var element = group[i];
var elementId = element.id;
// ...
}
// ...
}
To obtain an element by ID, just use Document#getElementById().
var element = document.getElementById('someId');
If JQuery's ready method is already defined then Chek box onclick event do not work. You can fire the event if you add a Jquery click event inside ready. Not sure if this is IE issue ..?
Incase you already have Jquery's ready function then Onclick attribute of the ckeckbox will not fire. You have to add the click event in Jquery. Only then it works
Like below. I don't know the reason.
$('#cbFinalAttest').click(function (event) {
...
}
this function does fire - checked in firebug
<input type="checkbox" name="match_35_0" id="match_35_0d" value="d0" onclick="alert('55')"></input>
you have to check 'checkSwap'
It would be easier to pass in this to the function, then the parameter would be a reference to the element that called the function. So you can do:
function checkSwap(self){
alert(self.id);
}
Edit: Also, document.page_form.match_35_0.id will get the id, not the way you have it.