I have a requirement which sounds like kind of simple but hard to implement at least for me, so here what it is
I have a dropdown with a search field in it similar to auto complete, when a key word is typed in the search field all the class names becomes empty except the keyword items.
Now i need to get the id's of "li's" only with class names,
I am new to jquery any help is greatly appreciated here is my code
function selectSearchItems() {
alert("hai");
var origul = document.getElementById("orig_ul");
var origlis = origul.getElementsByTagName('li');
for (var i = 0; i < origlis.length; i++) {
alert($('ul#orig_ul li').children('li.active-result'));
}
}
Try this:
function selectSearchItems() {
alert("hai");
var origul = $("#orig_ul");
var origlis = origul.find('li[class]');
for (var i = 0; i < origlis.length; i++) {
alert(origlis[i].id);
}
}
Related
I have a container and i have cloned it to create 3 more containers. The main reason i used the Clone property was because i didnt want to rewrite the code again and again to make the same containers. Now i want to update different data for the cloned containers. I have managed to pass the heading name for the original container as you can see in the code. Now how do I access my cloned containers and change the data in them. I have put the code which i tried below (failed). When i put data[1],data[0] etc, nothing gets updated.
Current JavaScript
$(document).ready(function() {
var e = $('.column'); //column is the class which contains the container
for (var i = 0; i < 3; i++) {
e.clone().insertAfter(e);
}
document.getElementById("heading").innerHTML = ("TRAILER 22");
Failed Javascript , this does not update anything on the webpage.
$(document).ready(function() {
var e = $('.column');
for (var i = 0; i < 3; i++) {
e.clone().insertAfter(e);
}
var data = document.querySelectorAll(".column");
data[1].document.getElementById("heading").innerHTML = ("TRUCK 22");
});
You try to do a document call on a element, that is not possible. If you want to change the first column (i switched the code to jQuery, what makes it a lot easier):
$(document).ready(function() {
var e = $('.column');
for (var i = 0; i < 3; i++) {
e.clone().insertAfter(e);
}
var data = $(document).find(".column:first-of-type");
data.html("TRUCK 22");
});
Does anyone know what I'm doing wrong with the append?
function filterPosts(){
let filterValue = document.getElementById('search-filter').value.toUpperCase();
let posts = document.getElementById('posts');
let post = posts.querySelectorAll('div.post');
for (let i = 0; i < post.length; i++) {
let filterItem = post[i].getElementsByTagName('h5')[0];
if (filterItem.innerHTML.toUpperCase().indexOf(filterValue) > -1) {
post[i].append();
} else {
post[i].remove();
}
}
}
I've tried a few different things to no avail. I'm trying to remove elements based on type and then readd them if they exist based on heading.
for (let i = 0; i < post.length; i++) {
let filterItem = post[i].getElementsByTagName('h5')[0];
if (filterItem.innerHTML.toUpperCase().indexOf(filterValue) > -1) {
posts.appendChild(post[i]);
} else {
post[i].remove();
}
}
This ended up working for the filtering, but it doesnt bring back posts if textbox is backspaced or empty.
you could use https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild (has better browser support than append) and https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild - in your case this would looks like posts.appendChild(post[i]) and posts.removeChild(post[i])
you could also just change the visibility of the elements - this should be faster and simpler for your case.
another way would be to have an array with the all the posts data and work with it primarily. this way you can also "bring back the data".
each time the filter changes: create a new array by filtering the posts data, remove all post elements, then append only those that match the filtered data e.g.
let postsData = ["content1", "content2"];
for (let i = 0; i < post.length; i++) {
post[i].remove();
}
postsData.filter(function (post) {
return post.toUpperCase().indexOf(filterValue) > -1;
}).forEach(function () {
var postElem = document.createElement("div");
posts.appendChild(postElem);
});
Here i selected 3 filters 1 from each chart and pasted that encoded url in url param. but when i press decode url button it is redrawing only middle chart filters but not the remaining once.. what should i do?
thanks
function encodeFunction()
{
var filters = [];
for (var i = 0; i < dc.chartRegistry.list().length; i++)
{
var chart = dc.chartRegistry.list()[i];
for (var j = 0; j < chart.filters().length; j++)
{
filters.push({ChartID: chart.chartID(), Filter: chart.filters()[j]});
}
}
var urlParam = encodeURIComponent(JSON.stringify(filters));
alert(urlParam);
}
function decodeFunction()
{
//encoded url here
var urlParam="%5B%7B%22ChartID%22%3A1%2C%22Filter%22%3A2012%7D%2C%7B%22ChartID%22%3A2%2C%22Filter%22%3A%5B1.0454545454545454%2C4.045454545454545%5D%7D%2C%7B%22ChartID%22%3A3%2C%22Filter%22%3A%22Mr%20B%22%7D%5D ";
var filterObjects = JSON.parse(decodeURIComponent(urlParam));
for (var i = 0; i< filterObjects.length; i++)
{
dc.chartRegistry.list()[filterObjects[i].ChartID-1].filter(filterObjects[i].Filter);
}
// dc.renderAll();
dc.redrawAll();
}
here is the fiddle: js fiddle link
It looks like your code is correct for the general case, but due to some quirks in the way that dc.js handles filters, you can't just restore a range filter from its serialized form.
I was able to get it working by adding a special case for arrays:
for (var i = 0; i< filterObjects.length; i++)
{
var filter = filterObjects[i].Filter;
if(filter instanceof Array) filter = dc.filters.RangedFilter(filter[0], filter[1]);
dc.chartRegistry.list()[filterObjects[i].ChartID-1].filter(filter);
}
Here is my fork of your fiddle: http://jsfiddle.net/gordonwoodhull/4dv93aht/10/
I don't think such special cases should be needed, so I opened an issue here: https://github.com/dc-js/dc.js/issues/819
Have a look at this question & working example
dc.js permalink or href to share the visualisation filter state?
https://github.com/Edouard-Legoupil/3W-Dashboard/blob/gh-pages/index.html
I have a listview div on screen and I have added itemDataSource to it successfully
var lettersList = new WinJS.Binding.List(jsonArrayForClearance);
var list_ = document.getElementById("prodListView").winControl;
list_.itemDataSource = lettersList.dataSource;
list_.itemTemplate = document.getElementById("tileTemplate");
list_.forceLayout();
Now in each item I have added a custom input type for user to specify(using template). I want to iterate through all the items of list and obtain the value of that input type in an array.
how can I do it?
EDIT: My question is to access custom input type declared in list items. As such we use following code to access any input type named "inpT"
document.getElementById('inpT');
but how to access the same from list item? can I use Following code(as suggested by user2608614)
var listView = document.getElementById("prodListView").winControl;
var list = listView.itemDataSource.list;
for (var i = 0; i < list.length; i++) {
var item = list.getAt(i);
item.getElementById('inpT');
}
You can iterate through the list elements like this:
var listView = document.getElementById("prodListView").winControl;
listView.itemDataSource.getCount()
.done(function(count) {
for (var i = 0; i < count ; i++) {
listView.itemDataSource.itemFromIndex(i)
.done(function (item) {
//***item will contain your property
});
}
});
Is not the best solution as it make it difficult to chain the promises, I'm also looking for a better one. But it works.
Since you're using a Binding.List you can just iterate through that much like an array.
var listView = document.getElementById("prodListView").winControl;
var list = listView.itemDataSource.list;
for (var i = 0; i < list.length; i++) {
var item = list.getAt(i);
// do something with this item
}
The only thing to remember is that it doesn't support [] and instead you have to use .getAt() and .setAt().
I'm have a set of checkboxes and an array that contains the index of which checkboxes should be selected. I'm trying to loop through the array and for each index in it. I made a sample jsFiddle to give you guys an idea of what I'm trying to do. I have the JQuery library also if that makes things easier. http://jsfiddle.net/7EetA/1/
Try this:
var arrx=new Array();
arrx[0]=4;
arrx[1]=5;
arrx[2]=3;
arrx[3]=1;
for (var i = 0; i < arrx.length; i++) {
document.getElementsByName('cal')[arrx[i]].checked = true;
}
No jQuery needed! jsFiddle example
var arrx=new Array();
arrx[0]=4;
arrx[1]=5;
arrx[2]=3;
arrx[3]=1;
var calArray = document.getElementsByName("cal");
for (var i = 0; i < arrx.length; i++) {
calArray[arrx[i]].checked = true;
}
If you insist on using jQuery:
var arrx=new Array();
arrx[0]=4;
arrx[1]=5;
arrx[2]=3;
arrx[3]=1;
var i = 0;
$('[name=cal]').each(function() {
if ($.inArray(i, arrx) != -1) {
$(this).prop('checked',true);
}
i++;
});
Working example
If you are willing to use jQuery, it can do it quite easily based on the name of the input:
jQuery('[name="cal"]').each(function(i){jQuery(this).attr('checked', 'checked');});
If your goal is to not necessarily select all of them, however, you could use something like this:
jQuery('[name$="_c"]').each(function(i){jQuery(this).attr('checked', 'checked');});
which only checks inputs with _c at the end of the name.
http://jsfiddle.net/7EetA/9/