Solved

JavaScript Array() Getting Prev/Next

Posted on 2009-06-29
8
1,558 Views
Last Modified: 2012-06-27
So I have a large array that looks like this:
PhotoList[89725] = new Array();
PhotoList[89725]['ImageID'] = '89725';
PhotoList[89725]['ImageSize'] = '123';
PhotoList[89726] = new Array();
PhotoList[89726]['ImageID'] = '89726';
PhotoList[89726]['ImageSize'] = '234';
PhotoList[89727] = new Array();
PhotoList[89727]['ImageID'] = '89727';
PhotoList[89727]['ImageSize'] = '345';
Etc....

And what I want to do, is to be able to call a function, that when I pass it an id, it gives me the data before it, and after it.

So I would have something that looks like this:

<div id="current">Showing You ID: 89726</div>
<a href="#" onclick="GetPrev(89726);">Get Prev</a>
<a href="#" onclick="GetNext(89726);">Get Next</a>

And then when I click on the Next/Prev it updates the current div. I guess it would also have to update the prev/next links with the new IDs as well. If there is no prev/next it would just say 'no more data to display' or  something...
PhotoList[89725] = new Array(); 

PhotoList[89725]['ImageID'] = '89725'; 

PhotoList[89725]['ImageSize'] = '123';

PhotoList[89726] = new Array(); 

PhotoList[89726]['ImageID'] = '89726'; 

PhotoList[89726]['ImageSize'] = '234';

PhotoList[89727] = new Array(); 

PhotoList[89727]['ImageID'] = '89727'; 

PhotoList[89727]['ImageSize'] = '345';

Open in new window

0
Comment
Question by:interclubs
  • 4
  • 2
  • 2
8 Comments
 
LVL 29

Expert Comment

by:Badotz
ID: 24735651
Something like:


<script type="text/javascript">
 

function go(mode) {

	var cur = document.getElementById('current'),

	    cid = cur.innerHTML,

	    pid = 'Get Prev';

	    nid = 'Get Next';

	

	cid = cid.substr(cid.indexOf(':') + 16);

	

	if (mode === 'p') {

		if (cid > 1) {

			cid -= 1;

		}

		if (cid === 1) {

			pid = 'No previous data';

		}

	}

	else {

		if (id < 1000) {

			cid += 1;

		}

		if (cid === 1000) {

			nid = 'No more data';

		}

	}

	cur.innerHTML = 'Showing you ID: ' + cid;

	document.getElementById('a_prev').innerHTML = pid;

	document.getElementById('a_next').innerHTML = nid;

}

</script>
 

<body>

<div id="current">Showing You ID: 89726</div>

<a id="a_prev" href="#" onclick="go('p');">Get Prev</a>

<a id="a_next" href="#" onclick="go('n');">Get Next</a>

</body>

Open in new window

0
 
LVL 6

Accepted Solution

by:
mudbuggle earned 500 total points
ID: 24735662
check this out.
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style>

.click {

	border:1px solid;

	float : left;

	width : 70px;

	cursor : pointer;

}
 

.display {

	float : left;

	width:200px;

}

</style>

<script type="text/javascript">

var PhotoList = new Array();

PhotoList[89725] = new Array(); 

PhotoList[89725]['ImageID'] = '89725'; 

PhotoList[89725]['ImageSize'] = '123';

PhotoList[89726] = new Array(); 

PhotoList[89726]['ImageID'] = '89726'; 

PhotoList[89726]['ImageSize'] = '234';

PhotoList[89727] = new Array(); 

PhotoList[89727]['ImageID'] = '89727'; 

PhotoList[89727]['ImageSize'] = '345';
 

var present = 89725;

var show1 = 'Showing you id: ';

var show2 = 'File size: ';

function load()

{

	var cur = document.getElementById('current');

	var fs = document.getElementById('size');

	cur.innerHTML = show1 + present;

	fs.innerHTML = show2 + PhotoList[present]['ImageSize'];

}
 

function next()

{

	var cur = document.getElementById('current');

	var fs = document.getElementById('size');

	present = present + 1;

	cur.innerHTML = show1 + present;

	fs.innerHTML = show2 + PhotoList[present]['ImageSize'];

}
 

function prev()

{

	var cur = document.getElementById('current');

	var fs = document.getElementById('size');

	present = present - 1;

	cur.innerHTML = show1 + present;

	fs.innerHTML = show2 + PhotoList[present]['ImageSize'];

}

</script>

</head>

<body onload="load()">

<div id="current" class="display">&nbsp</div>

<div id="size" class="display">&nbsp</div>

<div onclick="prev()" class="click">Get Prev</div>

<div onclick="next()" class="click">Get Next</div>

</body>

</html>

Open in new window

0
 
LVL 29

Expert Comment

by:Badotz
ID: 24735704
mudbuggle:
The Asker said, "I guess it would also have to update the prev/next links with the new IDs as well. If there is no prev/next it would just say 'no more data to display' or  something..."

What happens in your code when the previous number is less than 1? Greater than 1000 (or the number of records, or the count of the stars in our galaxy)?
0
 

Author Comment

by:interclubs
ID: 24735741
I guess I should have said that the IDs are sequential, so we actually need to look them up in the array....
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 6

Expert Comment

by:mudbuggle
ID: 24736576
my apologies... I must have been out of it this morning... this is the second question where I've completely missed the point... not my day i guess...
0
 

Author Comment

by:interclubs
ID: 24736791
I meant to say, the IDs are NOT sequential.... Guess I was out of it as well.
0
 
LVL 29

Expert Comment

by:Badotz
ID: 24736986
As long as the items themselves are in numerical order, returning the sequence of the image ID is not an issue.

The snippet below shows such a scenario:


PhotoList[89725] = new Array();

PhotoList[89725]['ImageID'] = '89725';

PhotoList[89725]['ImageSize'] = '123';

PhotoList[89726] = new Array();

PhotoList[89726]['ImageID'] = '97268';

PhotoList[89726]['ImageSize'] = '234';

PhotoList[89727] = new Array();

PhotoList[89727]['ImageID'] = '72789';

PhotoList[89727]['ImageSize'] = '345';

Open in new window

0
 
LVL 29

Expert Comment

by:Badotz
ID: 24737066
But really, you should clean up your JavaScript.

Do you really want  a separate array for EACH IMAGE? I don't think so. I would use an object for the details, as well (see the following snippet). Then you can easily get the properties for each image like this:

alert('image id# = ' + PhotoList[89726].ImageID + ', size = ' + PhotoList[89726].ImageSize);

Something like this:


var PhotoList = [];
 

PhotoList[89725] = {'ImageID':'89725', 'ImageSize':'123'};

PhotoList[89726] = {'ImageID':'97258', 'ImageSize':'234'};

PhotoList[89727] = {'ImageID':'72589', 'ImageSize':'345'};

Open in new window

0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now