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);
});
}
Related
I'm trying to collect ratings for all products that have ratings on this page: https://www.theluxelens.com/pages/photoshop-overlays. While I can get the code below to work in my own browser (Chrome), it does not work on the page itself.
It is, however, able to get the elements that have the ratings, because the first console.log statement returns those elements.
var ratingsElements = document.getElementsByClassName("spr-badge");
console.log(ratingsElements);
var nonZeroRatings = [];
for(var i = 0; i < ratingsElements.length ; i++){
var rating = ratingsElements[i].getAttribute("data-rating");
console.log(rating);
if(rating != "0.0") {
nonZeroRatings.push(rating)
}
}
console.log("logging the ratings...");
console.log(nonZeroRatings);
There looks like a slight difference in what is returned when the code below is run in my own console vs from the page itself. When run from my browser console, the first console.log statement in my code returns an HTMLCollection that is slightly different - I believe this difference is why the code isn't working when run from the page itself, but I don't know why it is different. This code works, as you can see it delivers the ratings of products that have them (non-zero ratings) in an array:
VS. when the same code, run from the page, notice the HTMLCollection returned is slightly different:
This is the full script tag from the page:
<script type="text/javascript">
window.onload = function () {
var ratingsElements = document.getElementsByClassName("spr-badge");
console.log(ratingsElements);
var nonZeroRatings = [];
for(var i = 0; i < ratingsElements.length ; i++){
var rating = ratingsElements[i].getAttribute("data-rating");
console.log(rating);
if(rating != "0.0") {
nonZeroRatings.push(rating)
}
}
console.log("logging the ratings...");
console.log(nonZeroRatings);
};
</script>
Thanks for any insight here. This is a Shopify website, if that makes a difference.
When you log something from the page, it basically logs a reference which values are not filled in until the developer goes to look at the console entry. You may notice that little information icon beside it in the log entry, if you hover/click on that it should indicate this to you. Where, as when you're running this from the console it instead decides in this case to pull the collection data right away and log it.
That's the difference between runtime execution and developer intent in the console in some situations. This same concept applies at other times as well, I don't know all of them right off. That information icon showing up is a good indicator of the entry being a reference initially instead of a full data copy.
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.
This is my first post so please be kind with me. :D
What i want is to select a person from a DropDownList (which is on table 1) and when i press a button, I want to move the selected person to another table (on table 2).
I will post some screens from my PC because i cant add code (i receive some error where say is too much code or something like that...)
Here is the link with Photos. I dont have 10 reputation so i cant post different URL with description...:D
http://postimg.org/gallery/13lmzz4kq/
I write description in every photo :D
Ty in advance !
In your plunker you have a method moveAudit. This method receives an item:
$scope.moveAudit = function (item) //Function for moving the unassigned audits
{
//var assignedAudit = $scope.assignedAudit; //--> you dont need this here
//var audit = $scope.unassignedAudit; //--> unused variable
//var auditId = $scope.unassignedAudit.IdUnassignedAudit; //--> unused variable
//TODO: here you need to add the selected 'expert' to item
// inspect/debug how your form POST passes this information to the controller
// ideally put it in a scoped var or pass it in the method: $scope.moveAudit = function (item, selectedExpert)
item.AssignedExpert = $scope.selectedExpert
//add to AssignedAudit
$scope.assignedAudit.push(item);
console.log("Row added: ", $scope.assignedAudit);
//TODO: probably you want to remove the item from $scope.assignmentExperts
};
I cannot debug the plunker since it is incomplete, but this should do the trick.
Upon further inspection of your code it looks like $scope.ddSelection is the selected expert.
I have an autocomplete widget which needs to return options from a database of objects.
On doing so, once the user selects an item the widget will populate other hidden textfields with values from the particular object they chose. - All of this works and has been used on previous projects
However this particular database is far too big (44k+ objects, filesize is several mb and has taken far too long to load in practice) so we've tried various ways of splitting it up. So far the best has been by first letter of the object label.
As a result I'm trying to create a function which tracks the users input into a textfield and returns the first letter. This is then used to AJAX a file of that name (e.g. a.js).
That said I've never had much luck trying to track user input at this level and normally find that it takes a couple keystrokes for everything to get working when I'm trying to get it done on the first keystroke. Does anyone have any advice on a better way of going about this objective? Or why the process doesn't work straight away?
Here is my current non-working code to track the user input - it's used on page load:
function startupp(){
console.log("starting");
$("#_Q0_Q0_Q0").on("keyup", function(){
console.log("further starting!");
if($("#_Q0_Q0_Q0").val().length == 1){
console.log("more starting");
countryChange(($("#_Q0_Q0_Q0").val()[0]).toUpperCase());
}
else{
console.log("over or under");
}
});
}
And an example of the data (dummy values):
tags=[
{
label:"label",
code:"1",
refnum:"555555",
la:"888",
DCSF:"4444",
type:"Not applicable",
status:"Open",
UR:"1",
gRegion:"North West"
},
....
];
edit: fixes applied:
Changed startupp from .change(function) to .on("keyup", function) - keydown could also be used, this is personal preference for me.
Changed the autocomplete settings to have minLength: 4, - as the data starts loading from the first letter this gives it the few extra split ms to load the data before offering options and also cuts down how much data needs to be shown (helps for a couple of specific instances).
Changed how the source is gathered by changing the autocomplete setting to the following:
source: function(request, response) {
var results = $.ui.autocomplete.filter(tags, request.term);
response(results.slice(0, 20));
},
where tags is the array with the data.
all seems to be working now.
You should bind to keydown event:
function startupp(){
console.log("starting");
$("#_Q0_Q0_Q0").keydown(function(){
console.log("further starting!");
if($(this).length() == 1){
console.log("more starting");
countryChange(($(this).val()[0]).toUpperCase());
}
else{
console.log("over or under");
}
});
}
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/