Find index in array different from the array that loaded - javascript

Line 35, just before the alert, returns -1. I also tried $(this).index() with the same result. Here is what it should do: Clicking EN.gif should return 4, then grand_array_pics[4] should give me en_array_pics and load the .gifs in that array.
$(document).ready(function () {
var main_pics = ["AN.gif", "BN.gif", "CN.gif", "DN.gif", "EN.gif", "GN.gif"];
var starting_pics = ["AN.gif", "CN.gif", "EN.gif"];
var an_array_pics = ["BN.gif", "EN.gif", "GN.gif", "AN.gif","DN.gif"];
var bn_array_pics = ["CN.gif", "DN.gif", "GN.gif"];
var cn_array_pics = ["DN.gif", "GN.gif", "AN.gif", "CN.gif"];
var dn_array_pics = ["EN.gif", "AN.gif", "CN.gif"];
var en_array_pics = ["GN.gif", "AN.gif", "CN.gif", "EN.gif"];
var gn_array_pics = ["AN.gif", "CN.gif", "EN.gif", "GN.gif"];
var grand_array_pics = [
an_array_pics,
bn_array_pics,
cn_array_pics,
dn_array_pics,
en_array_pics,
gn_array_pics
];
var i = 0;
for (i = 0; i < starting_pics.length; i++) {
$("<img/>").attr("src", "images/" + starting_pics[i]).load(function () {
$(this).appendTo("#main");
$(this).addClass("pics");
});
}
$("#main").on("click", ".pics", function () {
var j = $.inArray(this, main_pics);
alert(j);
$("#sidebar .pics").remove();
$(this).clone().appendTo("#train");
$(this).clone().appendTo("#sidebar");
$("#main .pics").remove();
var chosen_pics_array = grand_array_pics[j];
var count = chosen_pics_array.length;
var k = 0;
for (k = 0; k < count; k++) {
$("<img/>").attr("src", "images/" + chosen_pics_array[k]).load(function () {
$(this).appendTo("#main");
$(this).addClass("pics");
});
}
});
}); //end ready

this is the DOM <img> element, while main_pics is an array of strings. It will never be found inside there. Use
var j = $.inArray(this.src.split("/").pop(), main_pics);

Give this a try. You need to get the name of the file and you're passing the element itself into $.inArray
var j = $.inArray(this.src.substring(this.src.lastIndexOf('/')+1), main_pics);

Related

How to use the result of an IF statement as a variable

I have a code as follows:
function DetailFacture2() {
var ss = SpreadsheetApp.getActive();
var DetailDEVIS = SpreadsheetApp.setActiveSheet(ss.getSheetByName('DetailDEVIS'));
var FACTUREDevis = SpreadsheetApp.setActiveSheet(ss.getSheetByName('FACTUREDevis'));
var DetailFactureDevis = SpreadsheetApp.setActiveSheet(ss.getSheetByName('DetailFactureDevis'));
var lastrowpaste = FACTUREDevis.getLastRow();
var numrow = FACTUREDevis.getRange(lastrowpaste,13).getValue()
var lastrowpaste2 = DetailFactureDevis.getLastRow() - numrow +2;
var data = DetailDEVIS.getDataRange().getValues();
var DetailD = FACTUREDevis.getRange(lastrowpaste,2).getValue();
for(var i = 0; i<data.length;i++){
if(data[i][1] == DetailD){ //[1] because column B
var firstrowcopy = i+1;
Logger.log(firstrowcopy)
return (firstrowcopy)
}
}
};
It does return the correct value, but how do you use "firstrowcopy" as a fixed var?
I would like to use as follows:
function DetailFacture2() {
var ss = SpreadsheetApp.getActive();
var DetailDEVIS = SpreadsheetApp.setActiveSheet(ss.getSheetByName('DetailDEVIS'));
var FACTUREDevis = SpreadsheetApp.setActiveSheet(ss.getSheetByName('FACTUREDevis'));
var DetailFactureDevis = SpreadsheetApp.setActiveSheet(ss.getSheetByName('DetailFactureDevis'));
var lastrowpaste = FACTUREDevis.getLastRow();
var numrow = FACTUREDevis.getRange(lastrowpaste,13).getValue()
var lastrowpaste2 = DetailFactureDevis.getLastRow() - numrow +2;
var data = DetailDEVIS.getDataRange().getValues();
var DetailD = FACTUREDevis.getRange(lastrowpaste,2).getValue();
for(var i = 0; i<data.length;i++){
if(data[i][1] == DetailD){ //[1] because column B
var firstrowcopy = i+1;
var source = DetailDEVIS.getRange(firstrowcopy,1,numrow-1);
var destination = DetailFactureDevis.getRange(lastrowpaste2,3);
source.copyTo(destination);
}
}
};
But, as one would expect, it cannot work as it loops...
Not sure if I understand your question too. The code doesn't look well. Here is just my guess. Try to change the last lines this way:
// ...
var firstrowcopy = 0;
for (var i = 0; i < data.length; i++){
if(data[i][1] == DetailD){ //[1] because column B
firstrowcopy = i+1;
break;
}
}
var source = DetailDEVIS.getRange(firstrowcopy,1,numrow-1);
var destination = DetailFactureDevis.getRange(lastrowpaste2,3);
source.copyTo(destination);
}

Save dynamically created table data to multidimensional array

I have a dynamically created table and I need to retrieve the values from that to be stored in a multidimensional array as shown below
But I am getting an exception/error saying "Cannot set property of 0 to undefined"
My JS Function:
var DefAttrArray = new Array(100);
function storeDefinedStreamInfo(newAgent,i,e,ui)
{
var StrName= document.getElementById("StreamNameInput").value;
var StreamElementID = i;
var table = document.getElementById('attrtable');
var tblerows = (table.rows.length)-1;
// DefAttrArray[i] = new Array(3);
// for (var w=3; w<3; w++)
// {
// DefAttrArray[q][w] = new Array(tblerows);
// }
for (r = 1; r < table.rows.length; r++) {
for(var c=0; c<1;c++) {
var attrNm = table.rows[r].cells[c].innerHTML;
var attrTp = table.rows[r].cells[1].innerHTML;
createdDefinedStreamArray[i-1][2][r-1]= new Array(2);
createdDefinedStreamArray[i-1][2][r-1][0]=attrNm;
createdDefinedStreamArray[i-1][2][r-1][1]=attrTp;
alert(createdDefinedStreamArray[i-1][2][r-1][0] + "\n" + createdDefinedStreamArray[i-1][2][r-1][1]);
}
}
createdDefinedStreamArray[i-1][0]=StreamElementID;
createdDefinedStreamArray[i-1][1]=StrName;
createdDefinedStreamArray[i-1][2]=new Array(tblerows);
createdDefinedStreamArray[i-1][3]="Defined Stream";
alert("createdDefinedStreamArray[i-1][2][w][0] : "+ createdDefinedStreamArray[i-1][2][w][0]);
var prop = $('<a class="streamproperty" onclick="doclickExp(this)"><b><img src="../Images/settings.png"></b></a> ').attr('id', (i));
var showIcon = $('<img src="../Images/Defined.png"></b></a> ').attr('id', (i));
newAgent.text(StrName).append('<a class="boxclose" id="boxclose"><b><img src="../Images/Cancel.png"></b></a> ').append(showIcon).append(prop);
dropCompleteElement(newAgent,e,ui);
}
Finally, got it to work.
var DefAttrArray = new Array(100);
function storeDefinedStreamInfo(newAgent,i,e,ui)
{
var StrName= document.getElementById("StreamNameInput").value;
var StreamElementID = i;
var table = document.getElementById('attrtable');
var tblerows = (table.rows.length)-1;
createdDefinedStreamArray[i][2]=new Array(tblerows);
for (r = 1; r < table.rows.length; r++) {
for(var c=0; c<1;c++) {
var attrNm = table.rows[r].cells[c].innerHTML;
var attrTp = table.rows[r].cells[1].innerHTML;
createdDefinedStreamArray[i][2][r-1]= new Array(2);
createdDefinedStreamArray[i][2][r-1][0]=attrNm;
createdDefinedStreamArray[i][2][r-1][1]=attrTp;
}
}
createdDefinedStreamArray[i][0]=StreamElementID;
createdDefinedStreamArray[i][1]=StrName;
createdDefinedStreamArray[i][3]="Defined Stream";
createdDefinedStreamArray[i][4]= tblerows;
var prop = $('<a class="streamproperty" onclick="doclickDefine(this)"><b><img src="../Images/settings.png"></b></a> ').attr('id', (i));
var showIcon = $('<img src="../Images/Defined.png"></b></a> ').attr('id', (i));
newAgent.text(StrName).append('<a class="boxclose" id="boxclose"><b><img src="../Images/Cancel.png"></b></a> ').append(showIcon).append(prop);
dropCompleteElement(newAgent,e,ui);
}

Get column value onclick HTML table

I have this html table:
tabela
|A|B|C|D|
_________
001|M|N|O|P|
002|R|S|T|U|
And with this script I can get the row 1st value, e. onclick N get the value 001
var table = document.getElementById("tabela");
var rows = table.rows;
for (var i = 1; i < rows.length; i++) {
rows[i].onclick = (function() {
var rowid = (this.cells[0].innerHTML);
window.location.href = "next.php?rowidphp="+ rowid;
});
}
The thing is that I need to get the column 1st value, e. onclick N shuld get the value B
I'm trying everything but I can reach the point.....
Here's the fiddle: http://jsfiddle.net/t7G6K/
var table = document.getElementById("tabela");
var rows = table.rows;
for (var i = 1; i < rows.length; i++) {
rows[i].onclick = (function (e) {
var rowid = (this.cells[0].innerHTML);
var j = 0;
var td = e.target;
while( (td = td.previousElementSibling) != null )
j++;
alert(rows[0].cells[j].innerHTML);
});
}
Try this:
table = document.getElementById("tablea");
var rows = table.rows;
for (var i = 1; i < rows.length; i++) {
rows[i].cells[2].onclick = function (e) {
rowid = e.target.previousElementSibling.previousElementSibling.textContent;
alert(rowid);
};
}
Here is the Demo
jsFiddle http://jsfiddle.net/2dAkj/9/#
Ok with jQuery i would do it like this.
$(function () {
$('table').on('click', function (e) {
var x = $(e.target);
var index = x.parents('tr').find('td,th').index(x);
alert($(x.parents('table').find('tr').first().find('td,th')[index]).text());
});
});

Shuffle an array of images jquery

i would like to shuffle an array of images with jquery.The problem is that 'till now i did something which doesnt show images ...it shows only path for them.Where i was wrong?
Code here:
HTML:
<div id="array" class="thirdcanvas"></div>
<button class="array">Shuffle</button>
JS:
jQuery(function($){
$(document).ready( function()
{
$('#array').shuffle();
});
var arr = new Array("images/alfabet/a.png", "images/alfabet/b.png", "images/alfabet/c.png", "images/alfabet/e.png", "images/alfabet/f.png");
$('#array').text(arr.join(", "));
$('button.array').click(function(){
arr = $.shuffle(arr);
$('#array').text(arr.join(", "));
});
});
var image6 = new Image();
image6.src = "images/alfabet/a.png";
var image7 = new Image();
image7.src = "images/alfabet/b.png";
var image8 = new Image();
image8.src = "images/alfabet/c.png";
var image9 = new Image();
image9.src = "images/alfabet/e.png";
var image10 = new Image();
image10.src = "images/alfabet/f.png";
(function($){
$.fn.shuffle = function() {
return this.each(function(){
var items = $(this).children().clone(true);
return (items.length) ? $(this).html($.shuffle(items)) : this;
});
};
$.shuffle = function(arr) {
for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
return arr;
};
})(jQuery);
Try
jQuery(function ($) {
var arr = new Array("//placehold.it/32/ff0000.png", "//placehold.it/32/00ff00.png", "//placehold.it/32/0000ff.png", "//placehold.it/32/ff00ff.png", "//placehold.it/32/00ffff.png");
$.each($.shuffle(arr), function (_, src) {
$('<img />', {
src: src
}).appendTo('#array')
})
$('button.array').click(function () {
$('#array').shuffle()
});
});
(function ($) {
$.fn.shuffle = function () {
var _self = this,
children = $.shuffle(this.children().get());
$.each(children, function () {
_self.append(this)
})
return this;
};
$.shuffle = function (arr) {
for (var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
return arr;
};
})(jQuery);
Demo: Fiddle
This code goes in your click listener and creates images with the srcs from the array. You can then remove your new Image()s. This is not an efficient implementation, but it's fine for a small page. It involves the minimum changes to your original code.
$('button.array').click(function () {
arr = $.shuffle(arr);
$('#array').text(arr.join(", "));
// Added:
$(".thirdcanvas").html(""); // empties container
for (var i=0; i<arr.length ;i++){
// Add an image
$(".thirdcanvas").append($("<img src='" + arr[i] + "'>"));
}
});
It looks like you have all the parts you need there. We just need to take the image links and create <img> elements from them, then append them to the <div>. The shuffle function can then be called directly on the <div>, to shuffle the images in place, without having to use the original array again.
Something like:
$(document).ready( function() {
var arr = new Array("http://placehold.it/50x50&text=a", "ihttp://placehold.it/50x50&text=b", "http://placehold.it/50x50&text=c", "http://placehold.it/50x50&text=d", "http://placehold.it/50x50&text=e");
for(var i=0; i<arr.length; i++) {
var img = new Image();
img.src = arr[i];
$('#array').append(img);
}
$('button.array').click(function(){
$('#array').shuffle();
});
});
(function($){
$.fn.shuffle = function() {
return this.each(function(){
var items = $(this).children().clone(true);
return (items.length) ? $(this).html($.shuffle(items)) : this;
});
};
$.shuffle = function(arr) {
for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
return arr;
};
})(jQuery);
jsfiddle: http://jsfiddle.net/ygaw2/
This uses a for loop to iterate across the array of links, so the array can contain as many links as required.
You never create <img> elements, that's why you only see the URL.
Here's the code you should use:
// your bunch of pictures
var arr = new Array(
"http://placehold.it/100x100",
"http://placehold.it/120x100",
"http://placehold.it/140x100",
"http://placehold.it/160x100",
"http://placehold.it/180x100"
);
// Refresh pictures
function refreshPictures() {
// Create new DOM element
var pictures = $('<ul id="pictures"></ul>');
for(var i=0, n=arr.length; i<n; i++) {
pictures.append('<li><img src="'+arr[i]+'"/></li>');
}
// Replace current element by new one
$('#pictures').replaceWith(pictures);
}
// Add click listener on #randomize button
$('#randomize').on('click', function(){
arr = arr.shuffle();
refreshPictures();
});
// Initialize pictures
refreshPictures();
// Add shuffle() function to Array prototype
Array.prototype.shuffle = function() {
for(var j, x, i = this.length; i; j = parseInt(Math.random() * i), x = this[--i], this[i] = this[j], this[j] = x);
return this;
};
ul {
list-style: none;
padding: 0;
}
li {
float: left;
margin: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<ul id="pictures"></ul>
<button id="randomize">Shuffle</button>

Problems with multidimensional array and loops

This script crashes randomly with the message "unable to get property .length of undefined or null reference" referring to "matched_array_pics.length". It crashes for sure if I clone, append the same image twice to the #train div.
$(document).ready(function () {
var starting_pics = ["AN.gif", "CN.gif", "EN.gif", "GN.gif"];
var an_array_pics = ["CN.gif", "EN.gif", "GN.gif", "AN.gif"];
var cn_array_pics = ["EN.gif", "GN.gif", "AN.gif", "CN.gif"];
var en_array_pics = ["GN.gif", "AN.gif", "CN.gif", "EN.gif"];
var gn_array_pics = ["AN.gif", "CN.gif", "EN.gif", "GN.gif"];
var grand_array_pics = [an_array_pics, cn_array_pics, en_array_pics, gn_array_pics];
var i = 0;
for (i = 0; i < starting_pics.length; i++) {
$("<img/>").attr("src", "images/" + starting_pics[i]).load(function () {
$(this).appendTo("#main");
$(this).addClass("pics");
});
}
$("#main").on("click", ".pics", function () {
var j = $(".pics").index(this); // gets the index for the matched_array_pics...
console.log(j);
$("#sidebar .pics").remove();
$(this).clone().appendTo("#train");
$(this).clone().appendTo("#sidebar");
$("#main .pics").remove();
var matched_array_pics = grand_array_pics[j]; // ... in grand_array_pics.
var k = 0;
for (k = 0; k < matched_array_pics.length; k++) {
$("<img/>").attr("src", "images/" + matched_array_pics[k]).load(function () {
$(this).appendTo("#main");
$(this).addClass("pics");
});
}
});
}); //end ready
I think the problem is in this line: var j = $(".pics").index(this); and I think it should be rewritten like this: var j = $(this).index(); It'd be helpful if you could add console.log(j); just after the line in question to see what j ends up being. When this line executes var matched_array_pics = grand_array_pics[j]; I think you're getting undefined because j is not a number when your code runs.

Categories

Resources