I am adding a slider dynamically on a page using a string like the one below:
"<input type=\"range\" name=\"aName\" min=\"1\" max=\"9\"/>";
Then, after I append it to the page using plain javascript I can delegate using the following code:
$('input[name=aName]').on('change', function () { alert(this.value)});
and indeed when the value changes, I receive the alert with the correct value. However, if I delegate like this:
$('input[name=aName]').on('change', handleChange);
and define the function later on like this:
function handleChange () {
var theValue = $('input[name=aName]').value;
alert("value: " + theValue);
}
I receive the alert with the message "value: undefined". Why is this thing happening?
This is wrong $('input[name=aName]').value. I think you're mixing javascript & jquery.
For getting the value, use like this.
$('input[name=aName]').val()
Related
I have an Xpages Application and I am currently using a checkbox in a repeat control to call an onChange function, I want to parse the calling element/elementID to my Client Side Javascript located in: Events->onChange. My problem is that my Javascript returns undefined when using "this". I tried to parse an object on the Function call but that doesnt seem to be possible in Xpages either.
Javascript Code (probably wont be much help):
var fieldsets = document.querySelectorAll("table.checkboxGroups");
console.log(fieldsets);
console.log("-----------------");
var fieldsetCurrent = fieldsets[0]; //this is where I need the calling elem
console.log(fieldsetCurrent);
console.log("-----------------");
var fieldsetCheckboxes = fieldsetCurrent.getElementsByTagName("input");
console.log(fieldsetCheckboxes);
console.log("-----------------");
for(i=0;fieldsetCheckboxes.length;i++){
var elem = fieldsetCheckboxes[i];
console.log(i + " : " +elem);
elem.setAttribute("checked","");
//elem.checked;
}
If your repeating on notes documents then you could add the documentid to the checkbox as an attribute and use this id to call your onChange eventhandler. dojo.query might also be of some value here.
I'm trying to use jQuery for email validation in a form field
$(document).ready(function() {
var email = new RegExp("[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$");
var value = $("#email_address").val();
$("#email_address").on("keypress", function() {
if(email.test(value)) {
$("#email_address").parent().addClass("has-success");
}
});
});
However, the has-success class doesn't get added. I've tried each line of code individually in the console and they all seem to be doing/pointing to the right thing. It's when it's all put together that it doesn't seem to work.
You load the value on jQuery's DOM ready and never load it again.
You need to test the current value, not the one that's there when the DOM is ready, roughly:
$("#email_address").on("keypress", function() {
if(email.test($(this).val())) {
$("#email_address").parent().addClass("has-success");
}
});
Unrelated, but personally I'd wrap up the email test in a function so instead of saying email.test(xxx) you could read it more naturally like validEmail(xxx) etc.
I basically have a very complicated set of tabs with various input controls but lets not worry about this for now. For now let consider simple input wtching issue I am baffled by.
For example:
<input type="text" placeholder="Associate some tags please" data-ng-model="tag" data-ng-maxlength="250">
I am try to detect if user has typed something into my input:
$scope.$watch('tag', function () {
//$scope.$watchCollection('tag', function () {
console.log('tag changed');
});
But I seem to get zero response. However, when I perform my save operation I always seem to get the value user typed in.
Is a case of ng-model not binding correctly or is it that I am not $watching it correctly?
Also after I've performed my save operation I try to clear what user typed in for the tag with:
$scope.tag = '';
But that doesn't seem to work for some reason as though $scope.tag doesn't exist.
PS: When I say save operation I am actually performing a array.push() into an object which later gets saved by a service.
For example:
$scope.checkSaveTag = function (tag) {
...
// checked for duplicate tag beforehand
$scope.myForm.Tags.push(tagObj); // complicated form object
$scope.tag = ''; // tag input control
...
};
Any chance that the tag is an object or an array? If that is the case, you'll need to do a deep $watch, e.g:
$scope.$watch('tag', function () {
console.log('tag changed');
}, true);
Try like this
Controller
$scope.form={
tag:''
}
$scope.$watch("form.tag",function(newVal,oldVal){
console.log(newVal);
})
Html
<input type="text" placeholder="Associate some tags please" data-ng-model="form.tag" data-ng-maxlength="250">
How can I check all Meteor helpers have run?
When I use this code, I get a new, empty div. When I remove the code from the rendered function and run it from my console, everything works fine.
Template.CasesShow.helpers({
value: function (n) {
if (this.data) {
var result = this.data.filter(function (obj) {
return obj.name == n;
});
if (result && result[0])
return result[0].value;
}
}
});
Template.CasesShow.rendered = function () {
$(document).ready(function () {
$textarea = $('[name=1]');
var content = $textarea.val().replace(/\n/g, '<br />');
$textarea.replaceWith($('<div class="box">' + content + '</div>'));
});
};
<template name="CasesShow">
<textarea class="w-input box" placeholder="{{_ 'laborauftrag.praxis'}}" name="1" data-name="1">{{value 1}}</textarea>
</template>
So I think, Meteor hasn't inserted the value yet, which is strange because it shouldn't run the rendered function then, right?
How can I make sure Meteor has run the helpers?
Template.rendered = func will run once before your template's helper (and long before your route provides you data). Your template isn't working when you have Template.rendered function because in your rendered function, you replace your textarea with div, and in helper you're returning value which is being set on the textarea which no longer exist (because Template.CaseShow.rendered has replaced it with <div>.
If you can provide more details about what you're actually trying to achieve here, we can solve that. What you have right now is intended behaviour of meteor.
If what you want to achieve is show your content in a div but after replacing /n with <br>, I believe you can do that by performing that regexp on your data in the template helper.
Put a console.log("FIRED VALUE HELPER"); and do the same for your .rendered console.log("TEMPLATE RENDERED"); The code will log in your client browser console. For chrome I right click on the browser and choose inspect element. Then choose console from the array of logs. Your client js code would look like this:
Template.CasesShow.helpers({
value: function (n) {
console.log("FIRED VALUE HELPER");
Template.CaseShow.rendered = function () {
console.log("FIRED RENDERED");
If you don't see the log in the client browser console, the helper/rendered function did not get called.
I'm new to jQuery right now I'm using Telerik asp.net MVC control along with Razor view engine. Here is a code snippet from my view.
Html.Telerik().ComboBox().Name("cmb")
.AutoFill(true)
.DataBinding(binding => binding.Ajax().Select("_loadData", "MyController").Cache(false))
.ClientEvents(ce => ce.OnLoad("cmbLoaded"))
function cmbLoaded(e) {
var ComboBox = $("#cmb").data("tComboBox");
//do stuff here
}
Ok this what I'm trying to do I want to send extra parameter to the telerik Combobox event say cmbLoaded event handler. how can i do that.
thanks in advance.
It's been awhile but a ran into a similar situation. The string you pass as a parameter to the OnLoad event is a Javascript function reference, so you can pass something like:
.ClientEvents(ce => ce.OnLoad("function(e) { cmbLoaded.call(this,e," + Model.Id + "); }"))
Then your Javascript function signature would change to:
function cmbLoaded(e, id)
You want to submit extra parameter when your combo is fetching the data from the server?
Then you can send it with the help of the OnDataBinding event.
For example:
function onComboBoxDataBinding(e){
e.data={extraParameter:"Cool"};
}
you can do it by defining some variables in a code block, and then use them in your javascript event handler. Here is an example:
#{
string myPar1 = "some text";
int myPar2 = 10;
}
<script type="text/javascript">
function cmbLoaded(e, '#myPar1' #myPar2) {
var ComboBox = $("#cmb").data("tComboBox");
//do stuff here
}
</sciprt>