Array Issue 2nd Part.

Thanks to all who answer my preview post.

Now I'll try to describe what I'm doing and what doesn't work.

I'm doing a code to move objects (images) in a specified user order,
through arrow up and down symbols. When the user clicks on this symbol,
the clicked object (in the array) change the position for the clicked
element +1 / -1 (up, down), and the old element take the position of the
clicked.

I need the image name, the present position, and the image ID. I have
this array.

var Thumbnails = new Array();
Thumbnails[0] = new Array('1','sexy2.jpg','Sexy','3');
Thumbnails[1] = new Array('2','blue-sun-m.jpg','New Test','4');
Thumbnails[2] = new Array('3','listing_34.jpg','Home View','1');
Thumbnails[3] = new Array('4','firefox_eats_ie.jpg','Firefox','2');

The first element is the order position.
The second is the image name.
The third is a Title for the image.
And the last one, is the image ID.

I have a function to move this elements, when the user clicks one,
everything works fine, excepts the following code.

// cnt : is the ID of the image the user clicked.
var Order1 = Thumbnails[cnt][0];
var Order2 = Thumbnails[new_cnt][0];
..
..
..
/*
this work, but when I try to move the element again, it shows the
original order number (first element on the array), but should say the
old element (cnt) +1 / -1. But it doesn't work...
*/

Thumbnails[cnt][0] = Order2;
Thumbnails[new_cnt][0] = Order1;

I think... I need to reload the browser, to put the new values in the
array, but I don't want to refresh the Window. It's like the changes I
make are stored in memory but, when I try to query them I receive the
original values.

I would greatly apprciate any help understanding what is happening.

-- eft0.

I can't see anything wrong! If you can't put your real page in public,
then try to use this test case to explain what the problem is:

<html><head><title>test page</title>
<script>
function go()
{
var cnt = 0, new_cnt = 1;
var Thumbnails = new Array();
Thumbnails[0] = new Array('1','sexy2.jpg','Sexy','3');
Thumbnails[1] = new Array('2','blue-sun-m.jpg','New Test','4');
Thumbnails[2] = new Array('3','listing_34.jpg','Home View','1');
Thumbnails[3] = new Array('4','firefox_eats_ie.jpg','Firefox','2');

// original order:
var Order1 = Thumbnails[cnt][0];
var Order2 = Thumbnails[new_cnt][0];

for(var i = 0; i < 4; i++)
document.getElementById("div1").innerHTML += "<p>" +
Thumbnails[i].toString() + "</p>";

// swapped order:
Thumbnails[cnt][0] = Order2;
Thumbnails[new_cnt][0] = Order1;

for(i = 0; i < 4; i++)
document.getElementById("div2").innerHTML += "<p>" +
Thumbnails[i].toString() + "</p>";

}
</script>
<style>body { font-family: monospace; }</style>
</head>
<body onload="go()">
<div id="div1"></div>
<hr/>
<div id="div2"></div>
</body></html>

Are you trying to do something like this:
<script>
link1=0
link2=1
link3=2

myarray= new Array();
myarray[0]=new Array(1,"first");
myarray[1]=new Array(2,"second");
myarray[2]=new Array(3,"third");

tempswap1=new Array();
tempswap2=new Array();
tempswap3=new Array();

function swap(direction) {

tempswap1=myarray[0];
tempswap2=myarray[1];
tempswap3=myarray[2];
if (direction=="down"){

myarray[0]=tempswap3;
myarray[1]=tempswap1;
myarray[2]=tempswap2;
}
else if (direction=="up")
{

myarray[0]=tempswap2;
myarray[1]=tempswap3;
myarray[2]=tempswap1;
}

newHtml="<a href=\"javascript:alert('" + myarray[0][0] + "')\">" +
myarray[0][1] + "</a><br>"
newHtml+="<a href=\"javascript:alert('" + myarray[1][0] + "')\">" +
myarray[1][1] + "</a><br>"
newHtml+="<a href=\"javascript:alert('" + myarray[2][0] + "')\">" +
myarray[2][1] + "</a>"
document.getElementById("myhtml").innerHTML=newHtm l
}
myarray= new Array();
myarray[0]=new Array(1,"first");
myarray[1]=new Array(2,"second");
myarray[2]=new Array(3,"third");
</script>

<div id="myhtml">
<a href="javascript:alert('first')" >first</a><br>
<a href="javascript:alert('second')">second</a><br>
<a href="javascript:alert('third')">third</a>
</div>
<br>
<a href="javascript:swap('up')" >up</a> 0r <a
href="javascript:swap('down')" >down</a>

Here you can view what I'm trying to say.

I put some JS alerts to see the order don't change. Please take a look.

http://www.streetball.cl/JS/ChangeOrder.php?id=1

Thanks a lot.

-- eft0.

Paul R wrote:[color=blue]
> I can't see anything wrong! If you can't put your real page in public,
> then try to use this test case to explain what the problem is:
>
> <html><head><title>test page</title>
> <script>
> function go()
> {
> var cnt = 0, new_cnt = 1;
> var Thumbnails = new Array();
> Thumbnails[0] = new Array('1','sexy2.jpg','Sexy','3');
> Thumbnails[1] = new Array('2','blue-sun-m.jpg','New Test','4');
> Thumbnails[2] = new Array('3','listing_34.jpg','Home View','1');
> Thumbnails[3] = new Array('4','firefox_eats_ie.jpg','Firefox','2');
>
> // original order:
> var Order1 = Thumbnails[cnt][0];
> var Order2 = Thumbnails[new_cnt][0];
>
> for(var i = 0; i < 4; i++)
> document.getElementById("div1").innerHTML += "<p>" +
> Thumbnails[i].toString() + "</p>";
>
> // swapped order:
> Thumbnails[cnt][0] = Order2;
> Thumbnails[new_cnt][0] = Order1;
>
> for(i = 0; i < 4; i++)
> document.getElementById("div2").innerHTML += "<p>" +
> Thumbnails[i].toString() + "</p>";
>
> }
> </script>
> <style>body { font-family: monospace; }</style>
> </head>
> <body onload="go()">
> <div id="div1"></div>
> <hr/>
> <div id="div2"></div>
> </body></html>[/color]

Hi,

I think your problem may be in the form with which you are submitting
data to your server. You have only one value being sent and it is a
number. It seems to me you may need a value for each item --that is
you have three items so you need three values. The items on the page
move correctly.

Hi,

I think your problem may be in the form with which you are submitting
data to your server. You have only one value being sent and it is a
number. It seems to me you may need a value for each item --that is
you have three items so you need three values. The items on the page
move correctly.

I could look at that for a long time without ever fully understanding
what's happening - arrays were never supposed to be THAT complicated!
You've also got a bunch of images that have names as well as ids, which
can't help!

You need to simplify, along the lines suggested by an earlier reply,
using an array of objects.

The following version of move() takes two parameters:
- which: the "slot" that has to move (0, 1 or 2), and
- where: whether it must go up (-1) or down (1)
It just updates the index property of two objects, without swapping any
array elements.

Clear up the image name/id problem and insert the following code,
calling it using, for example:
<img src="images/UPPos.gif" onclick="move(2, -1);" ...>

var Thumbnails = new Array();

function imageAndText(position, imgURL, titleText)
{
this.index = position;
this.img = imgURL;
this.title = titleText;
}

Thumbnails[0] = new imageAndText(0, 'Thumbnail/BackYard.jpg', 'one');
Thumbnails[1] = new imageAndText(1,
'Thumbnail/viva_firefox_eats_ie.jpg', 'FF');
Thumbnails[2] = new imageAndText(2, 'Thumbnail/sexy2.jpg', 'Sexy');

function move(which, where)
{
var goingto = which + where;
var sourceObj, destObj;

if(goingto < 0 || goingto > Thumbnails.length)
return;

for(i = 0; i < Thumbnails.length; i++)
{
if(Thumbnails[i].index == which)
sourceObj = Thumbnails[i];
else if(Thumbnails[i].index == goingto)
destObj = Thumbnails[i];
}

sourceObj.index += where;
destObj.index -= where;

document.getElementById("img_" + which).setAttribute("src", destObj.img);
document.getElementById("title_" + which).innerHTML = destObj.title;

document.getElementById("img_" + goingto).setAttribute("src",
sourceObj.img);
document.getElementById("title_" + goingto).innerHTML = sourceObj.title;
}

Array Issue 2nd Part.

re: Array Issue 2nd Part.

re: Array Issue 2nd Part.

re: Array Issue 2nd Part.

re: Array Issue 2nd Part.

re: Array Issue 2nd Part.

re: Array Issue 2nd Part.

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about