UPDATE: my question became lot simpler I think. how can I do to tell:
var query = $(":input[name=filter]").val(),
To take $("select[name=PR_Type]").val(), as parameter?
I tried something like this:
var query = $(":input[name=filter]").val() || $("select[name=PR_Type]").val(),
but this take only $("select[name=PR_Type]").val(),as filter result...
Im trying to filter a result based on a value selected from a selectbox. The renderResult() function renders a grid that has some labels and the rendered data and it looks something like this:
renderResult: function () {
var query = $(":input[name=filter]").val(),
querySelect = $("select[name=PR_Type]").val(),
queryRegexp = query === "" ? undefined : new RegExp(query, "i"),
console.time("productos.renderResult()");
$("#result").html("");
productos.sort();
$.each(productos.models, function (i, row) {
if (!row.transformed) {...
So I came up with something like this:
$('[name=PR_Type]').on('change', function (event) {
var selection = $(this).val(), //Changed here and now I get the value
products.renderResult(selection);
});
and a selectbox like this:
<select name="PR_Type"></select>
This selectbox get its values from a json file that connects to the servlet. and this is how I set the options to the selectbox:
var types = [];
for (var type in productos.productosTypes) types.push(productos.productosTypes[type] + "|" + type);
$("[name=PR_Type]").setOptions(types);
I also created a function to get the values to do something like this:
this.getValue("PR_Type"),
but Im not sure how to implement this anymore
getValue: function (name) {
var $elemSelect = $("select[name=" + name + "]");
return $elemSelect.val() ? escape($elemSelect.val()) : "";
},
I know Im missing something on the $('[name=PR_Type]').on('change', function (event) { but im not sure what it is. Thanks everyone in advance for any advise!
SOLVED! All the poroblem lays in renderResult() there I tried to look if the selectbox value was empty or null, which it was wrong. I should look if it was null ori undefined, then I had to change a litle bit the regExp if scentence. So at the end I changed this:
querySelect = $("select[name=PR_Type]").val(),
queryRegexp = query === "" ? undefined : new RegExp(query, "i"),
and added this:
querySelectRegexp = querySelect === null ? undefined : new RegExp(querySelect, "i"),
so now it looks like this:
renderResult: function () {
var query = $(":input[name=filter]").val(),
querySelect = $("select[name=PR_Type]").val(),
queryRegexp = query === "" ? undefined : new RegExp(query, "i"),
querySelectRegexp = querySelect === null ? undefined : new RegExp(querySelect, "i"),
And the regExp if scentence was like this:
if (querySelectRegexp !== undefined) {
if (queryRegexp !== undefined) {
if (row.name.match(queryRegexp)) {
row.classes = row.classes.replace(/hide/g, "");
} else {
if (row.classes.indexOf("hide") === -1) {
row.classes += " hide";
}
}
} else if (querySelectRegexp !== undefined) { (row.type.match(querySelectRegexp)) {
row.classes = row.classes.replace(/hide/g, "");
} else {
if (row.classes.indexOf("hide") === -1) {
row.classes += " hide";
}
}
} else {
row.classes = row.classes.replace(/hide/g, "");
}
and now it looks like this:
if (querySelectRegexp !== undefined) {
if (row.type.match(querySelectRegexp)) {
row.classes = row.classes.replace(/hide/g, "");
} else {
if (row.classes.indexOf("hide") === -1) {
row.classes += " hide";
}
}
}
if (queryRegexp !== undefined) {
if (row.name.match(queryRegexp)) {
row.classes = row.classes.replace(/hide/g, "");
} else {
if (row.classes.indexOf("hide") === -1) {
row.classes += " hide";
}
}
} else {
row.classes = row.classes.replace(/hide/g, "");
}
The first time the function fires I get this result:
output1:test
The output2 2 alert is not firing. I know something is probably undefined in alert Does anyone know why the value won't be added in the multidimensional array?
I expect this to display after the false1:
output2:test2
Also if you want to fiddle with the code here it is:
https://jsfiddle.net/ndf0sjgf/1/
var carSelectedArray = [
[null]
];
addRow(carSelectedArray);
addRow(carSelectedArray);
function addRow(carSelectedArray) {
var arrayempty = false;
if (carSelectedArray[0][0] == null || carSelectedArray.length == 0) {
arrayempty = true;
} else {
arrayempty = false;
}
if (arrayempty == true) {
carSelectedArray[0][0] = "test";
alert("output1:" + carSelectedArray[0][0]);
} else {
carSelectedArray[1][0] = "test2";
alert("output2:" + carSelectedArray[1][0]);
}
}
Your loop works well, however your didn't define your array well.
there is only 1 dimension here :
var carSelectedArray = [[null]];
So replace with this :
var carSelectedArray = [[],[]];
PS : null is not required
and at the beginning in your function, you define arrayempty to false, so you can remove this :
else {
arrayempty = false;
}
Solution here : https://plnkr.co/edit/Qikalr0jc54R3MRSea4G?p=preview
var carSelectedArray = [[],[]];
addRow(carSelectedArray);
addRow(carSelectedArray);
function addRow(carSelectedArray) {
var arrayempty = false;
if (carSelectedArray[0][0] == null || carSelectedArray.length == 0) {
arrayempty = true;
}
if (arrayempty == true) {
carSelectedArray[0][0] = "test";
alert("output1:" + carSelectedArray[0][0]);
} else {
carSelectedArray[1][0] = "test2";
alert("output2:" + carSelectedArray[1][0]);
}
}
I have the following javascript function to open and close sub list elements on an onclick event:
function ShowHideDtls(itId) {
var subMen = document.getElementById(itId);
if (subMen != null) {
if (subMen.className == "nav nav-second-level collapse in") {
subMen.className = "nav nav-second-level collapse";
} else {
subMen.className += " in";
}
}
}
The "collapse" is a css class which makes display=none hiding the sub list and "in" is a class which makes display=block showing the sub list, creating a menu with submenus.
I found in this question Change an element's class with JavaScript in the first(accepted) answer use of a regex in order to do this. I tried it like this:
function ShowHideDtls(itId) {
var subMen = document.getElementById(itId);
if (subMen != null) {
if (subMen.className.match(/(?:^|\s)in(?!\S)/)) {
subMen.className.replace(/(?:^|\s)in(?!\S)/g, '');
} else {
subMen.className += " in";
}
}
}
The code without the regex works perfectly but with the regex it doesn't. I checked the regex in regex101.com and it seems to work there. As I understand it's more appropriate to use the regex than a long string of all the class names and also I also have a nav-third-level class that I have to close and open so the regex seems to be the convenient and proper way to do it.
What's wrong?
Thank you.
No need of regex here. You can use classList
Using classList is a convenient alternative to accessing an element's list of classes as a space-delimited string via element.className.
function ShowHideDtls(itId) {
var subMen = document.getElementById(itId);
if (subMen != null) {
subMen.classList.toggle('in');
}
}
toggle() will toggle the class of the element. If the element already has the class, it'll remove it, if not then toggle will add the class to the element.
Check the Browser Compatibility.
You can use following SHIM from MDN for IE9,
/*
* classList.js: Cross-browser full element.classList implementation.
* 2014-07-23
*
* By Eli Grey, http://eligrey.com
* Public Domain.
* NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
*/
/*global self, document, DOMException */
/*! #source http://purl.eligrey.com/github/classList.js/blob/master/classList.js*/
if ("document" in self) {
// Full polyfill for browsers with no classList support
if (!("classList" in document.createElement("_"))) {
(function (view) {
"use strict";
if (!('Element' in view)) return;
var
classListProp = "classList",
protoProp = "prototype",
elemCtrProto = view.Element[protoProp],
objCtr = Object,
strTrim = String[protoProp].trim || function () {
return this.replace(/^\s+|\s+$/g, "");
},
arrIndexOf = Array[protoProp].indexOf || function (item) {
var
i = 0,
len = this.length;
for (; i < len; i++) {
if (i in this && this[i] === item) {
return i;
}
}
return -1;
}
// Vendors: please allow content code to instantiate DOMExceptions
,
DOMEx = function (type, message) {
this.name = type;
this.code = DOMException[type];
this.message = message;
},
checkTokenAndGetIndex = function (classList, token) {
if (token === "") {
throw new DOMEx(
"SYNTAX_ERR", "An invalid or illegal string was specified"
);
}
if (/\s/.test(token)) {
throw new DOMEx(
"INVALID_CHARACTER_ERR", "String contains an invalid character"
);
}
return arrIndexOf.call(classList, token);
},
ClassList = function (elem) {
var
trimmedClasses = strTrim.call(elem.getAttribute("class") || ""),
classes = trimmedClasses ? trimmedClasses.split(/\s+/) : [],
i = 0,
len = classes.length;
for (; i < len; i++) {
this.push(classes[i]);
}
this._updateClassName = function () {
elem.setAttribute("class", this.toString());
};
},
classListProto = ClassList[protoProp] = [],
classListGetter = function () {
return new ClassList(this);
};
// Most DOMException implementations don't allow calling DOMException's toString()
// on non-DOMExceptions. Error's toString() is sufficient here.
DOMEx[protoProp] = Error[protoProp];
classListProto.item = function (i) {
return this[i] || null;
};
classListProto.contains = function (token) {
token += "";
return checkTokenAndGetIndex(this, token) !== -1;
};
classListProto.add = function () {
var
tokens = arguments,
i = 0,
l = tokens.length,
token, updated = false;
do {
token = tokens[i] + "";
if (checkTokenAndGetIndex(this, token) === -1) {
this.push(token);
updated = true;
}
}
while (++i < l);
if (updated) {
this._updateClassName();
}
};
classListProto.remove = function () {
var
tokens = arguments,
i = 0,
l = tokens.length,
token, updated = false,
index;
do {
token = tokens[i] + "";
index = checkTokenAndGetIndex(this, token);
while (index !== -1) {
this.splice(index, 1);
updated = true;
index = checkTokenAndGetIndex(this, token);
}
}
while (++i < l);
if (updated) {
this._updateClassName();
}
};
classListProto.toggle = function (token, force) {
token += "";
var
result = this.contains(token),
method = result ?
force !== true && "remove" :
force !== false && "add";
if (method) {
this[method](token);
}
if (force === true || force === false) {
return force;
} else {
return !result;
}
};
classListProto.toString = function () {
return this.join(" ");
};
if (objCtr.defineProperty) {
var classListPropDesc = {
get: classListGetter,
enumerable: true,
configurable: true
};
try {
objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
} catch (ex) { // IE 8 doesn't support enumerable:true
if (ex.number === -0x7FF5EC54) {
classListPropDesc.enumerable = false;
objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
}
}
} else if (objCtr[protoProp].__defineGetter__) {
elemCtrProto.__defineGetter__(classListProp, classListGetter);
}
}(self));
} else {
// There is full or partial native classList support, so just check if we need
// to normalize the add/remove and toggle APIs.
(function () {
"use strict";
var testElement = document.createElement("_");
testElement.classList.add("c1", "c2");
// Polyfill for IE 10/11 and Firefox <26, where classList.add and
// classList.remove exist but support only one argument at a time.
if (!testElement.classList.contains("c2")) {
var createMethod = function (method) {
var original = DOMTokenList.prototype[method];
DOMTokenList.prototype[method] = function (token) {
var i, len = arguments.length;
for (i = 0; i < len; i++) {
token = arguments[i];
original.call(this, token);
}
};
};
createMethod('add');
createMethod('remove');
}
testElement.classList.toggle("c3", false);
// Polyfill for IE 10 and Firefox <24, where classList.toggle does not
// support the second argument.
if (testElement.classList.contains("c3")) {
var _toggle = DOMTokenList.prototype.toggle;
DOMTokenList.prototype.toggle = function (token, force) {
if (1 in arguments && !this.contains(token) === !force) {
return force;
} else {
return _toggle.call(this, token);
}
};
}
testElement = null;
}());
}
}
If you're using jQuery, you can use toggleClass():
function ShowHideDtls(itId) {
$('#' + itId).toggleClass('in');
}
Edit
If you still want to use regex:
if (/\bin\b/.test(subMen.className))
subMen.className.replace(/\bin\b/, '');
} else {
subMen.className += " in";
}
You can also use split() and indexOf as follow to check if a class is present on element.
var classes = className.split(/\s+/),
classIndex = classes.indexOf('in');
if (classIndex > -1) {
classes.splice(classIndex, 1);
subMen.className = classes.join(' ');
} else {
subMen.className += " in";
}
replace function returns the resultant value, it do not assign value indirectly.
So do following:
function ShowHideDtls(itId) {
var subMen = document.getElementById(itId);
if (subMen != null) {
if (subMen.className.match(/(?:^|\s)in(?!\S)/)) {
subMen.className = subMen.className.replace(/(?:^|\s)in(?!\S)/g, '');
}
else {
subMen.className += " in";
}
}
}
I'm trying to make this javascript code (made by Esailija) to write folders as well
http://jsfiddle.net/JwgqC/
Currently it only shows files, not folders.. Folders appear as dots..
Here's my mod
http://jsfiddle.net/JwgqC/46/
function selectFolder(e) {
var theFiles = e.target.files;
for (var i=0, file; file=theFiles[i]; i++) {
document.body.innerHTML+="<li>" + file.webkitRelativePath;
}
}
document.querySelector("input").onchange = function() {
[].slice.call( this.files ).forEach( function(selectFolder) {
$("body").append("<div>"+v.name+"</div>" );
});
};
But i can't get the folders to show up..
Mind pointing me which part is incorrect?
My background isn't exactly programing so it's kinda difficult for me
Thanks
If you would like to display the folders only:
http://jsfiddle.net/F6yEW/
function isFolder(x) {
if (x.name == "." && x.type == "") {
return true;
} else {
return false;
}
}
document.querySelector("input").onchange = function () {
[].slice.call(this.files).forEach(function (v) {
var folderName = "";
var path = v.webkitRelativePath.replace("/.", "");
if (isFolder(v)) {
folderName = path.match(/([^\/]*)\/*$/)[1];
$("body").append("<div>" + folderName + "</div>");
}
});
};
If you would like to display folders + files: http://jsfiddle.net/K22RT/
function isFolder(x) {
if (x.name == "." && x.type == "") {
return true;
} else {
return false;
}
}
document.querySelector("input").onchange = function () {
[].slice.call(this.files).forEach(function (v) {
var displayName = v.name;
var path = v.webkitRelativePath.replace("/.", "");
if (isFolder(v)) {
displayName = path.match(/([^\/]*)\/*$/)[1];
$("body").append("<div>folder: " + displayName + "</div>");
} else {
$("body").append("<div>file: " + displayName + "</div>");
}
});
};
I hope this solution can help you out :)
Can a viewbag variable be incremented using javascript method on a page? I have the following attempt:
function ConfirmFriend(friendID, addOrDecline) {
alert(addOrDecline);
if (parseInt(#ViewBag.ActualFriendCount) == 0 && addOrDecline == "add")
{
alert("THIS IS A FIRST ADD");
#{
int test = Convert.ToUInt32(#ViewBag.ActualFriendCount);
test++;
#ViewBag.ActualFriendCount == test;
}
}
var userID = '#ViewBag.UserID';
var postData = {
'userID': userID,
'userFriendID': friendID,
'addOrDelete': addOrDecline
};
$.post('/User/Show/', postData, function (data) {
});
document.getElementById("HiddenPendingFriends" + friendID).style.display = 'none';
if (addOrDecline == 'add') {
document.getElementById("HiddenAcceptedFriends" + friendID).style.display = 'block';
}
else {
document.getElementById("HiddenDeclinedFriends" + friendID).style.display = 'block';
}
};