I have a javascript library which does returns a list of results to a div triggered on keyup events. I want to use Jquery to apply a standard keyup event to all fields on all pages which have a certain class.
That part I can do and it works OK.
My issue is that the parameters which I use are dynamic and the last 2 of these are optional functions.
<input type="text"
class="font8_input" name="wsFromPart"
value="<%=wsFromPart%>" id="wsFromPart"
size="20" maxlength="20"
onfocus="javascript:fncAjaxClear()"
onkeyup="javascript:fncAjaxSearch('wsDatabase','..\\AjaxBrowses\\PartBrowse.asp','wsFromPart','wsFromPartList','fncPrePartAjax',null);"/>
At present, to control this I pass null if I don't have a function.
I'm trying to get the to a position where I can define all of the fields like this.
<input type="text" class="PartClass" name="wsFromPart" value="<%=wsFromPart%>" id="wsFromPart" />
Everything else will be added by setting classes/events by Jquery.
I'm trying to work out how I can test if a function exists on my page, and only execute if it does. I've tried passing the function name as a string but can't seem to make that work. My last attempt is to have a generic function, and pass the name of the function which may exist to this function to evaluate and, if a function, execute it.
<input type="text" class="font8_input" name="wsFrPt" id="wsFrPt" size="20" maxlength="20" value="<%=wsFrPt%>" onfocus="javascript:fncAjaxClear()" onkeyup="javascript:fncAjaxSearch('wsDatabase','..\\AjaxBrowses\\PartBrowse.asp','wsFrPt','wsFrPtList',fncCheckFunction('fncPreAjaxPart1'),'fncPostAjaxPart');"/>
function fncAjaxSearch(wsDb,wsAsp,wsId,wsTarget,wsPreFunction,wsReturnFunction) {
var myDate = new Date();
var myDate1 = myDate.getTime();
if (objXHR.readyState == 4 || objXHR.readyState == 0) {
var wsDatabase = escape(document.getElementById(wsDb).value);
var wsStr = escape(document.getElementById(wsId).value);
var wsParam = "";
if (wsPreFunction !== null) {
wsParam = wsPreFunction();
}
//Only do ajax call if the 'source' field is not empty, otherwise empty target and clear border.
if (document.getElementById(wsId).value > '') {
objXHR.open("GET", wsAsp + '?qryDatabase=' + wsDatabase + '&qryDummy=' + myDate1 + '&qrySearch=' + wsStr + wsParam, true);
objXHR.onreadystatechange = function(){if(objXHR.readyState==4){fncAjaxSearchReturn(objXHR,wsId,wsTarget,wsReturnFunction)}};
objXHR.send(null);
}
else {
document.getElementById(wsTarget).innerHTML = '';
document.getElementById(wsTarget).style.borderWidth = '0px';
}
}
}
If it is a global, you can do this
var fnc = window["yourFunctionName"]; //Use bracket notation to get a reference
if( fnc && typeof fnc === "function" ) { //make sure it exists and it is a function
fnc(); //execute it
}
If it is namespaced, you can do the same type of thing, just involves some looping.
var myFnc = "foo.bar.fun";
var nameParts = myFnc.split("."); //split up the string into the different levels
var fnc = window; //set it to window
for(var i=0;i<nameParts.length;i++){ //loop through each level of the namespace
fnc = fnc[nameParts[i]];
if(!fnc){ //make sure it exists, if not exit loop
fnc = null;
break;
}
}
if( fnc && typeof fnc === "function" ) { //make sure it exists and it is a function
fnc(); //execute it
}
You can check if function exists by:
if(typeof(yourFunctionName) == "function")
//...do your code
else
//...function not exists
if you passing the function name as a string, then change typeof(yourFunctionName) to typeof(eval(yourFunctionName))
Related
I want to disable an element and also set its placeholder in Javascript.
I'm able to do this with the below code (I'm referring to the writecontent element).
function toggleType() {
var type = document.querySelector('select[name="type"]').value;
if(type == 'Review') {
aboutreview.style.visibility = ('visible');
document.querySelector('.writecontent').disabled = true;
document.querySelector('.writecontent').placeholder = "Not available in Review";
} else if (type == 'Discussion' || '') {
aboutreview.style.visibility = ('hidden');
document.querySelector('.writecontent').disabled = false;
Instead of calling the element twice, how would I set the disabled and placeholder at the same time when calling the element the first time?
May be by storing the element reference in a variable.
const writeElem = document.querySelector('.writecontent');
if (writeElem) {
writeElem.disabled = true;
writeElem.placeholder = "Not available in Review";
}
I would like to get inputs values of a form and place in an object (for an offer).
So i tried to place this code on submit :
$(document).ready(function(){
$('#formOffre').on('submit', function(e) {
e.preventDefault();
console.log(Offre); // give undefined in console
if ( typeof Offre == 'undefined'){
// if undefined, create object
var Offre = {
BuyerID: 1, //I will handle this later
Total: 0,
OffreItem: [] //array with json objects
};
Offre.OffreItem.id = 0;
console.log("object created");
for (i=0; i > Offre.OffreItem.id ; i++) {
Offre.OffreItem.modele = formOffre.modele.value;
Offre.OffreItem.longueur = formOffre.longueur.value;
Offre.OffreItem.hauteur = formOffre.hauteur.value;
Offre.OffreItem.qte = formOffre.qte.value;
Offre.OffreItem.rix = formOffre.prix.value;
console.log("getting parameters of inputs to offer");
}
} else {
//if object exists ony get informations of inputs
Offre.OffreItem.id = 0;
for (i=0; Offre.OffreItem.id < i; i++){
Offre.OffreItem.modele = formOffre.modele.value;
Offre.OffreItem.longueur = formOffre.longueur.value;
Offre.OffreItem.hauteur = formOffre.hauteur.value;
Offre.OffreItem.qte = formOffre.qte.value;
Offre.OffreItem.rix = formOffre.prix.value;
}
}
this is my code. when i click on submit for the first time, it go to the if statement and create the object. But when i click again, I go through the if statement like the object is not set.
i put a console log and in every case the object is undefined.
Can you someone help me please?
Thanks
You are checking Offre out side of scope in which it is defined .
enter coconsole.log(Offre); // give undefined in console
if ( typeof Offre == 'undefined'){
// if undefined, create object
var Offre = { //here is issue this should be above submit function
BuyerID: 1, //I will handle this later
Total: 0,
OffreItem: [] //array with json objects
};
Also make sure your page is maintaining state.
For you I have created example give a look. here
Hoping this will solve your problem.
Fiddle
The problem here is that you're defining your variable inside the function.
To simplify your code:
$('#formOffre').on('submit', function(e) {
if ( typeof Offre == 'undefined'){
var Offre = { }; // This variable is only accessible inside this function
} else {
//
}
}
The var Offre will define a variable within the scope of the function, the next time you run the function, a new variable with that name will be created (Meaning it will always be undefined initially)
To get around this, you can define your variable outside of the function:
var Offre;
$('#formOffre').on('submit', function(e) {
if ( typeof Offre == 'undefined'){
Offre = { }; // Notice that we're not creating a new variable here, just accessing the one defined above
} else {
//
}
}
Feel kind of stupid to ask..
I want to get something like this:
var value = $scope.settings.paper.font.color || 0;
The problem is that some of the middle objects may not exist.
Is there an ultimate way to get value if all "object chain" exists and get some fallback if not?
For example, in line above if all objects exists, we may return value of color, but if only $scope.settings exists, and there's no paper object in it, i will get an error, not 0.
First of all: There is no builtin function for it.
Shortest generic solution
Simply wrap it into a try - catch
try {
// handles defaultVal if d is undefined
yourVar = typeof a.b.c.d === 'undefined' ? defaultVal:a.b.c.d;
} catch (e) {
// handles defaultVal if a,b or c are undefined
yourVar = defaultVal;
}
Alternative solution
You could use the following function to safely traverse an object (gv - for getValue):
var gv = function(scope, chainStr, defaultValue) {
var chain = chainStr.split('.');
for (var i = 0; i < chain.length; i++) {
var newScope = scope[chain[i]];
if (typeof newScope !== 'undefined') {
scope = newScope;
} else {
return defaultValue;
}
};
return newScope;
};
Like this:
var a = {b:{c:{d:3}}};
console.log(gv(window, 'a.b.c.d', -1));
// 3
console.log(gv(window, 'a.b.c.e', -1));
// -1
console.log(gv(a, 'b.c.d', -1));
// 3
console.log(gv(a, 'b.c.e', -1));
// -1
Sure, just check for the existence of $scope and each property in its namespace:
var value = (typeof $scope != 'undefined' && $scope.settings && $scope.settings.paper && $scope.settings.paper.font && $scope.settings.paper.font.color) || 0;
The last part of the statement in parenthesis will return the value of .font
Example: http://jsfiddle.net/silkster/gM8uh/
You can also make use of build in $parse service:
var value = $parse('settings.paper.font.color || 0')($scope);
It will make all necessary checks behind the scene.
Demo: http://plnkr.co/edit/1GLb5PEvxMzPMYc5ZxZn?p=preview
I've searched everywhere for longer than i would care to admit, and can not find an answer to this question. the documentation here - http://angular-ui.github.io/bootstrap/#/datepicker - says...
date-disabled (date, mode)
(Default: null) : An optional expression to disable visible options based on passing date and current mode (day|month|year).
and in the HTML markup all of the examples show this in the code as an attribute on the input...
date-disabled="disabled(date, mode)"
i need to know what to do in my JavaScript to get this actually functioning. an example for a single day and an example for passing an array of dates would be greatly appreciated.
thanks in advance...
The markup of
date-disabled="disabled(date, mode)"
means that in your scope you would need to have a function named disabed that accepts two arguments, date and mode, which you would use to determine if that date should be disabled.
Here is a clearer example for you. Make the markup be
date-disabled="shouldDateBeDisabled(date, mode)"
Then in your Controller you would need to attach a function named shouldDateBeDisabled to the $scope where you would put your logic.
var datesAreEqual = function(date1,date2) {...};
var dateIsInArray = function(date,arrayOfDates) {...};
var someSingleDateToDisable = ...;
var arrayOfDatesToDisable = [...];
$scope.shouldDateBeDisabled = function(date, mode) {
// your own logic to determine if a date should be disabled
if (datesAreEqual(date,someSingleDateToDisable) {
return true;
}
if (dateIsInArray(date,arrayOfDatesToDisable) {
return true;
}
return false;
};
I had a similar requirement in my project to enable days by giving an array of date objects, i have over ridden the default controller in my project.
This is what i did
In "controller('DatepickerController')" under module('ui.bootstrap.datepicker')
i have added config and a method
this.enabledDays = getValue($attrs.enabledDays, dtConfig.enabledDays);
this.toBeDisabled = function (date, mode) {
var currentMode = this.modes[mode || 0];
var flag = false;
for (var i = 0; i < this.enabledDays.length; i++) {
if (!currentMode.compare(date, this.enabledDays[i])) {
flag = true;
break;
}
}
return flag;
}
then i changed the following predefined method
this.isDisabled = function (date, mode) {
var currentMode = this.modes[mode || 0];
return ((this.enabledDays && !this.toBeDisabled(date, mode)) ||
(this.minDate && currentMode.compare(date, this.minDate) < 0) ||
(this.maxDate && currentMode.compare(date, this.maxDate) > 0) ||
($scope.dateDisabled && $scope.dateDisabled({date: date, mode: currentMode.name})));
};
And in the link function under this directive directive('datepicker', ...
I added
var enabledDays = datepickerConfig.enabledDays;
if (attrs.enabledDays) {
scope.$parent.$watch($parse(attrs.enabledDays), function (value) {
enabledDays = value ? value : null;
datepickerCtrl.enabledDays = enabledDays;
refill();
});
}
And in the "scope.move" function inside the link function, i added
if (typeof datepickerCtrl.onChange != "undefined") {
datepickerCtrl.onChange(selected);
}
as you can see below
scope.move = function (direction) {
var step = datepickerCtrl.modes[mode].step;
selected.setMonth(selected.getMonth() + direction * (step.months || 0));
selected.setFullYear(selected.getFullYear() + direction * (step.years || 0));
if (typeof datepickerCtrl.onChange != "undefined") {
datepickerCtrl.onChange(selected);
}
refill();
};
Now the datepicker is modified
In the HTML markup
<datepicker enabled-days="enabledDays" datepickerConfig="datepickerOptions"></datepicker>
where "enabledDays" is an array you can define in the scope
Worked well for me without any problems yet
Hope this helps you :)
//window["Fluent"]["Include"]
function setGlobalVariableByName(name,value)
{
var indexes = name.split(".");
var variable = null;
$.each(indexes, function()
{
if (variable == null){
variable = window[this];
}else{
variable = variable[this];
}
});
variable = value;
}
setGlobalVariableByName("Fluent.Include.JqueryPulse",true);
console.log(Fluent.Include.JqueryPulse) // prints false
this doesn't work, obviously. It would work if I just wanted to get the variable's value, but not for setting it.
window["Fluent"]["Include"]["JqueryPulse"] = true;
console.log(Fluent.Include.JqueryPulse) // prints true
how could I achieve something like this without using eval?
I'd need some way to programmatically add array indices to this, I'd guess
The following works, can you suggest a better way to code it in order to make it more DRY?
function setGlobalVariableByName(name,value)
{
var indices = name.split(".");
var parent;
$.each(indices, function(i)
{
if(i==indices.length-1){
if (!parent){
window[this] = value;
}else{
parent[this] = value;
}
}else if (!parent){
parent = window[this];
}else{
parent = variable[this];
}
});
}
setGlobalVariableByName : function(name, value)
{
var indices = name.split(".");
var last = indices.pop();
var parent;
$.each(indices, function(i)
{
if (!parent){
parent = window[this];
}else{
parent = variable[this];
}
});
if (!parent){
window[last] = value;
}else{
parent[last] = value;
}
}
You need to call
variable[this] = value
somehow. So you need to break the loop of the splited string before reching the last name, and then assign the value.
Ultimatively you need to call:
variable = window['Fluent']['Include']; // build this in a loop
variable['JqueryPulse'] = someValue; // then call this
Ultimately you're just building an object chain and setting the final item in the chain to a value. Also, I would add a check to ensure that items which are already objects do not get overwritten so that their existing properties don't get lost:
//bootstrap the object for demonstration purposes--not necessary to make code work
window.Fluent = {
Include: {
foo: 'bar', //don't want to lose this'
JqueryPulse: false //want to set this to true
}
};
//define function
function setGlobalItemByName( name, value )
{
var names,
finalName,
//no need to figure out if this should be assigned in the loop--assign it now
currentOp = window;
if( typeof name === 'string' && name !== '' )
{
names = name.split( '.' );
//no need to track where we are in the looping--just pull the last off and use it after
finalName = names.pop();
$.each( names, function()
{
//If the current item is not an object, make it so. If it is, just leave it alone and use it
if( typeof currentOp[this] !== 'object' || currentOp[this] === null )
{
currentOp[this] = {};
}
//move the reference for the next iteration
currentOp = currentOp[this];
} );
//object chain build complete, assign final value
currentOp[finalName] = value;
}
}
//use function
setGlobalItemByName( 'Fluent.Include.JqueryPulse', true );
//Check that Fluent.Include.foo did not get lost
console.log( Fluent.Include.foo );
//Check that Fluent.Include.JqueryPulse got set
console.log( Fluent.Include.JqueryPulse );
However, I would do it without using jQuery, even if you have jQuery available on the page. There is no need for the overhead of executing a function for each index.
//bootstrap the object for demonstration purposes--not necessary to make code work
window.Fluent = {
Include: {
foo: 'bar', //don't want to lose this'
JqueryPulse: false //want to set this to true
}
};
//define function
function setGlobalItemByName( name, value )
{
var names,
finalName,
indexCount,
currentIndex,
currentName,
//no need to figure out if this should be assigned in the loop--assign it now
currentOp = window;
if( typeof name === 'string' && name !== '' )
{
names = name.split( '.' );
//no need to track where we are in the looping--just pull the last off and use it after
finalName = names.pop();
indexCount = names.length;
for( currentIndex = 0; currentIndex < indexCount; currentIndex += 1 )
{
currentName = names[currentIndex];
//If the current item is not an object, make it so. If it is, just leave it alone and use it
if( typeof currentOp[currentName] !== 'object' || currentOp[currentName] === null )
{
currentOp[currentName] = {};
}
//move the reference for the next iteration
currentOp = currentOp[currentName];
}
//object chain build complete, assign final value
currentOp[finalName] = value;
}
}
//use function
setGlobalItemByName( 'Fluent.Include.JqueryPulse', true );
//Check that Fluent.Include.foo did not get lost
console.log( Fluent.Include.foo );
//Check that Fluent.Include.JqueryPulse got set
console.log( Fluent.Include.JqueryPulse );