We are using Highcharts api in our application.
The below url will give the problem scenario.
http://jsfiddle.net/jnjqt/40/
I need a different click event for each image. But I am getting the same result for each image.
Like if I get alert value of corresponding i for each image, my problem will be solved.
Thanks in advance.
That’s a more common problem. We use closures in a loop (for or while) and it always keep the last value of the increment.
You just need to return a function when you make the following loop:
for (var i = 0; i < chart.series[0].data.length; i++) {
......
}
This code should fix your problem:
.on('click', function(i) {
return function () {
alert(" image:"+i);
}
}(i))
Here the solution: http://jsfiddle.net/jnjqt/42/
Related
Trying to make a function to get the index whenever the edit icon is clicked. Even though there's a solutions using closure, still not working with my case and getting wrong results, when there's more than one edit icon.
When I have three icons, my console outputs:
(3) 0
(2) 1
2
Need to know why the console is this.
Here's a js fiddle with the full code :https://jsfiddle.net/c2L4buj6/5/
Sample code JS:
function clickEnable(input, title, url, plus, editIcon, anchorEdit, edit)
{
for(let i = 0; i < editIcon.length; i++){
editIcon[i].addEventListener("click", function(i){
console.log(i);
}.bind(null, i));
}
}
UPDATE
To show the error more clearly, uploaded a photo on whats going on. In the photo, there are three boxes and when clicked on the edit icon it return the right value, but also returns copies of the right value. I want to know what is causing this.
Here is the error image
You're not removing the old event listeners, so you get duplicates for all previously-added elements.
One solution (tested based on your fiddle):
function clickEnable(input, title, url, plus, editIcon, anchorEdit, edit)
{
let i = editIcon.length - 1;
editIcon[i].addEventListener("click", function(){
console.log(i);
});
}
I am trying to come up with some sort of a solution to keep a count of a node with many child nodes... I thought of just keeping a field and increment it as stuff is added to the parent node
My one concern is multiple users adding to the node at the same time, is there a way I could safely incriment without worrying about overrighting if other users icriment the count at the same time
Thanks to #FrankVanPuffelen for pointing me in the right direction.. How exactly would you go about callling it for a simple counter? Heres what I wrote up but dosen't seem to be working the way I expected
var ref = firebase().database().ref('Counter');
export function toggleStar(postRef) {
postRef.transaction(function(post) {
if (post) {
post++;
}else{
post = 0;
}
return post;
});
}
//then to Call it:
toggleStar(ref);
Tried to keep it minimal so it could help someone else trying to implement a counter system. The field Counter in this case would just be my spot where I would like to store it. I tried to add a case where if it was false or NULL to set it to 0.
EDIT 2:
Also did this:
export function toggleStar(postRef) {
postRef.transaction(function(post) {
if (post) {
post.go++;
}else{
post = {};
post.go = 0;
}
return post;
});
}
ANd called ti with the same method above. This does appear to be working... However I am worried that this isn't accomplishing the process in the right way so I just want to be sure... I don't want to overwrite other users data and having inaccurate numbers
I am using DataTables.
What I am trying to do is: by using one of the columns values, get page number, where this value is located.
I have tried this: jumpToData()
BUT this didn't work out. The reason is that
var pos = this.column(column, { order: 'current' }).data().indexOf(data);
in jQuery.fn.dataTable.Api.register('page.jumpToData()' returns value >=0 ONLY if I was placed on page where value was.
For example, I want to detect page where needed value is, but I am staying on another page, so to detect value on... page 3, I need to go to this page and only then I can detect it, which makes no sence at all.
What I need to do, is: by staying on pirst page, using value from another pages, detect those pages numbers and then navigate to them:
$('#Grid_grid').DataTable().page(PageNumber).draw(false);
How can I accomplish that?
EDIT:
Got some idea (several changes in jumpToData()):
jQuery.fn.dataTable.Api.register('page.jumpToData()', function (data, column) {
for (var i = 0; i < this.page.info().pages; i++) {
var test = this.page(i).column(column, { order: 'current' }).data().indexOf(data);
if (test >= 0) {
this.page(i).draw(false);
return this;
}
}
return this;
});
(EDIT 2: idea didn't paid off, no difference)
BUT now I got second issue:
None methods of datatable works in .cshtml page.
For example I need to get overall page count. I doing this:
$('#Grid_grid').DataTable().page.info().pages;
and this return me 0;
Meanwhile, putting it in to console (Chrome F12) works fine (returns 5). Whats the matter?
EDIT 3:
Came up with this:
function LoadPage(value) {
var table = $('#Grid_grid').DataTable();
var pageNumber = table.search(value).page();
table.page(pageNumber).draw(false);
}
Looks promising BUT, I still cant validate it because in console DataTable methods are working, but in .cshtml no. (search() or page() returns nothing).
EDIT 4:
Moved issue to another question
CAUSE
Your new API method page.jumpToData() tries to query all pages data because second argument selector-modifier in column() API method has property page: 'all' by default. As written it will always stay on first page.
SOLUTION
There is original page.jumpToData() plug-in posted by Allan Jardine, creator of DataTables. It works as intended and can be used instead of your modification to avoid unnecessary iterations.
$.fn.dataTable.Api.register('page.jumpToData()', function (data, column) {
var pos = this.column(column, {
order: 'current'
}).data().indexOf(data);
if (pos >= 0) {
var page = Math.floor(pos / this.page.info().length);
this.page(page).draw(false);
}
return this;
});
DEMO
See this jsFiddle for code and demonstration.
NOTES
In the demo above I added console.log("Number of pages", table.page.info().pages); just to demonstrate that API method works. However they may work because I have HTML-sourced data.
If you have Ajax-sourced data, you need to query number of pages only when data has been loaded. Use initComplete option to define a callback function that will be called when your table has fully been initialised, data loaded and drawn.
need to be consulted by JS jedi.
Situation: I got array with USER_IDs and need to call social network function to post on their walls. So I need to launch wallpost function, listen to its answer and then continue iterating my loop.
Code I have written is able to leave post to the last person from array, to the first, to none and many others useful functions :s . Need your help jedis
function showPost() {
for(i in selFriends) { //selFriends - massive with user_id
alert(i+' '+selFriends[i]); //checkplace
VK.api('wall.post',{
owner_id:selFriends[i], //element
message:htmlres, // content
attachment:photoID // id of the mediacontent
},function(receive) {
showPost();
});
return;
}
}
This code need to be fixed, because now it is just iterationg wall.post for 1st element from the massive.
By the way method VK.api is almost similar to Facebook UI method 'feed'.
Thank you very much :)
I'm no jedi, but are you trying to run the first index in your selFriends array through VK.api, and call the next index in the callback? And then repeat for each element in the selFriends array?
function postId(index) {
if (index === selFriends.length)
return;
VK.api('wall.post',{
owner_id:selFriends[i], //element
message:htmlres, // content
attachment:photoID // id of the mediacontent
},function(receive) {
postId(index + 1);
});
}
And then
function showPost() {
postId(0);
}
I have the following little piece of code:
var instance = this;
window.onload = function () {
for (var i = 0; i < array.length; ++i) {
var currentDivId= array[i];
var currentDiv = document.getElementById(currentDivId);
try {
if (!currentDiv) {
throw 'Div id not found: ' + currentDivId;
}
var image = document.createElement('img');
image.src = 'img.jpg';
image.onclick = function() {
instance.doSomething(currentDivId);
};
currentDiv.appendChild(image);
}
catch(e) {
console.warn('oops');
}
}
};
This code is passed an array of id of divs. What it does is that, it renders an image at each of those divs and set their onclick property.
Say I have an array of strings: ['abc', 'xyz']
I want the code to place an image inside <div id="abc"></div> and another image inside <div id="xyz"></div>.
When you click the first image, instance.doSomething function should be called with parameter 'abc' and vice versa.
But the code does not work as expected. It always calls instance.doSomething with the last parameter in the array, in this case, 'xyz'.
I'm new to JS and still don't have a solid grasp of its inner workings. What's wrong here and how can I fix it?
Any help appreciated.
image.onclick = function() {
instance.doSomething(this.parentNode.id);
};
That should do it. Since we know that the image is inside the div we want to get at, just go one dom element up and get its id.
Welcome to the wonderful world of Javascript scoping issues. As it stands now, JS is treating your onclick code as something like "when this object is clicked, fetch the value stored in the currentDivID variable AT THE TIME THE CLICK occurs and pass it to the doSomething function".
What you should do is base the argument on the image object itself. Every DOM object knows where it is in the DOM tree, so at the time it's clicked, the onclick code should use DOM traversal operations to figure out which div it's inside of and dynamically retrieve its ID. That way you don't have to worry about binding variables and scoping issues... just figure out which div contains your image and get the ID at run time.
Try:
image.onclick = (function() {
var currentD = currentDivId;
return function() {
instance.doSomething(currentD);
}
})();
Hope it helps