JavaScript array too long?

Question

UncleJoe 0 Newbie Poster

15 Years Ago

I have an array of div elements that apparently is too long, but I need all the divs for my dragNdrop application. Could someone suggest a work around?

The dragNdrop initialization is...

var elements=['div1','div2','div3',.....,'div400'];             //Doesn't work properly

var elements=['div1','div2','div3',.....,'div200'];             //Works properly

window.onload = function() {
	elements.each(
	  function(item) {
	    new Draggable(item,{revert:true,ghosting:true});
	  }
	);
	Droppables.add(DropDiv,{
	  hoverclass: 'DropHover',
	  onDrop: doSomething
	}
	);

A little more info...

var elements=

is an expansion returned from php. It can be broken up if necessary, but I'd sure like to keep the array in one piece. If not I'll need a little help putting it all together.

Thanks for the help-
UncleJoe

javascript

3 Contributors
21 Replies
1K Views
2 Weeks Discussion Span
Latest Post 15 Years Ago Latest Post by Airshow

essential 84 Posting Shark

15 Years Ago

Hi UncleJoe,

You can skip the long declaration of your arrays collection by using a single stance of:

var elements = []; // Starting with an empty array.

for ( var i = 0; i < 400; i++ ) { // Looping procedure that counts up to 400xdivs ids.
   elements[ i ] = "div" + i;
} // Array collection is completed w/o spending to much time on its declaration.

// more stuff...

Airshow 416 WiFi Lounge Lizard

15 Years Ago

UJ,

You can save heaps of string length by making a single, comma-separated string rather than an array of strings, then splitting in javascript to form an array, then prepending 'div' to each element when you loop through:

$div_elements='A1,A2,...,B1,B2,B3,...,C1,C2,C3';
...
<script>
var elements = <?php print $div_elements; ?>;
</script>
...

elements = elements.split(',');
...
for(i=0; i<elements.length; i++){
  ...
  var d = document.createElement('div');
  d.id = 'div'+elements[i]);
  ...
}

I can't guarantee it will work, but it will certainly be a step in the right direction.

Airshow

essential 84 Posting Shark

15 Years Ago

Hi Airshow & UncleJoe,

@UncleJoe - Here's a little demo, showing how to grouped items passed by another array, in lesser form using javascript.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css_level21" media="screen"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>http://www.daniweb.com :: DHTML  JavaScript / AJAX</title>
<style id="css21" type="text/css">
/* <![CDATA[ */

/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[

/*
 @ array - 
 an array can 
 hold up all the items 
 that you will provide them, 
 as long you don't specify their length.
 
 - e.g.
  var arr = new Array( 40000000 );
  this arr can hold up 40000000 * items in its collection.
  But if we will use number any higher than 40000000 counts, it will throw up an error in your browser.
  But it's not a good idea to use array in this length. 
   */

var $div_elements = new Array( 400 ); // PHP Dummy 
var

onload = ( function( xItem ) {
var count = xItem.length;
var counter = 1; 
var seq = 0;
var element = [];
var group = {
1 : "divA",
2 : "divB",
3 : "divC" }

   for ( x = 0; x < count; x++ ) {
   (( counter > 100 ) ? counter = 1 : counter )
   seq = Math.floor( x / 100 );
      if ( group[ seq ] )
        element[ x ] = group[ seq ] + counter;
      else
      element[ x ] = "div" + counter; 
   document.writeln( element[ x ] + "<br />" ); // I'll just write some output so that you can see all of its re-assigned values. 
   counter++;
   } // Here goes your JQuery syntax >>>

/* ITEM Reference
 @ 0-99 : div0 - div100 -
 @ 100-199 : divA0 - divA100 -
 @ 199-299 : divB0 - divB100 - 
 @ 299-399 : divC0 - divC100 - */

} )( $div_elements  

/* Your PHP array goes here <<< 
 - PASSING ARGUMENTS: This makes your code get executed a bit faster campared to a normal onload event initiation. */ );

// ]]>
</script>
</head>
<body id="xhtml11">
<div id="main"></div>
</body>
</html>

hope it does helped...
-essential

Airshow 416 WiFi Lounge Lizard

15 Years Ago

By the way UJ, I played around with this in IE6 on my clunky old gen' purpose computer and it handled a text array of 400 elements easily and created 400 divs, with fancy styles to make them visible, without drawing breath.

Just a thought, have you tried "view source" to see if your long string is being composed, served and received OK by the browser? That should tell you which side to look; server-side or client-side.

Airshow

Airshow 416 WiFi Lounge Lizard

15 Years Ago

UJ,

No experience of scriptaculous here, but must say it's a candidate for the source of the problem.

Do you (a) submit the whole array of 400 to a scriptaculous method or (b) loop through outside scriptaculous and submit the array values individually? If (a) then can you modify code to (b)? Might cure it. If you do (b) already, then I suggest that the problem is probably not in scriptaculous.

Airshow

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

UncleJoe 0 Newbie Poster · Answer 1 · 2009-08-05T08:15:50+00:00

Hi essential...sorry it took so long to reply, I've been out of town. The declaration is written in php via a loop, which winds up looking like:

$div_elements=['div1','div2',...,'divN'];

then on the page I have:

<script type="text/javascript">
     <?php print $div_elements; ?> 
     window.onload = function() {
        elements.each(function(item) {
           new Draggable(item,{revert:true,ghosting:true});});
           Droppables.add(DropDiv,{hoverclass: 'DropHover',
              onDrop: doSomething});
</script>

To further complicate matters, the divs are put in different tabs in a window.

The TABS are A, B, C, D. The divs are labeled according to their respective tab, so:

var elements=['divA1',divA2',...,'divB1','divB2,divB3 ',...]

the number of divs is variable depending on which TAB is considered.

Since the php writes syntactically correct javascript, could I simply add a '+' every 50th divID in the string with a line break? Or does that just make the line longer? Is there a line limit?

Thanks-
UncleJoe

UncleJoe 0 Newbie Poster · Answer 2 · 2009-08-06T00:18:03+00:00

Thanks Airshow and essential...I'll work through the suggestions tonight, and see what I come up with. I'll let you know-

UncleJoe

UncleJoe 0 Newbie Poster · Answer 3 · 2009-08-06T06:49:25+00:00

The array is there. The actual cut-off point appears to be 255 divs. I'm thinking there may be a limit in scriptaculous, which I'm trying to find in the source.

I did look at "view source" and there aren't any problems. As a matter of fact when I use the 400 div array the first 255 divs dragNdrop as expected, the remaining are not draggable. That's why I'm thinking there is a "# of elements" limit somewhere.

Any thoughts?

Thanks-
UncleJoe

UncleJoe 0 Newbie Poster · Answer 4 · 2009-08-06T07:30:48+00:00

Here's the actual source:

<script type="text/javascript" src="ajax/src/scriptaculous.js?load=effects,dragdrop"></script>
<script type="text/javascript">

<?php print $div_elements; ?>

window.onload = function() {
	elements.each(
		function(item) {
			new Draggable(item,{revert:true,ghosting:true});
		}
	);
	document.getElementById('group').innerHTML="Selecting TAB";
	document.getElementById('otherGroup').innerHTML="Current TAB";
	Droppables.add(DropDiv,{
		hoverclass: 'DropHover',
		onDrop: doSomething
		}
	);
// Set drop area by default  non cleared.
	$('droparea').cleared = false;
}

the $div_elements expansion is a string which is:

var elements=['divA1','divA2',...'divZn'];

Incidentally, in order to shorten the array length, I removed the single quotes from the string before I wrote it. The dragNdrop functionality won't work without them.

Oy!

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 5 · 2009-08-06T07:30:50+00:00

Another thought ....

You could try slicing off the first 100 elements from your 400 array and submitting the remainder. See where it breaks down now. Is it at (a) the old 255 point (now 155) or (b) the new 255 point (was 355)?

(a) would suggest a data error in the delivered array, and (b) would suggest a memory/range limitation.

Airshow

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 6 · 2009-08-06T07:55:10+00:00

Hmmm, that's tricky. I guess that .each is well capable of handling a 400 element array - you could test it with something simple of the same length but I'm pretty sure it would work. You could also test it with your divIds array but get it to do something much simpler and see how far it gets.

Meanwhile, try my suggestion above - slice off the first 100 elements and see what happens.

Airshow

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 7 · 2009-08-06T08:02:24+00:00

To slice off first 100 elements ... elements = elements.slice(100);

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 8 · 2009-08-06T08:45:25+00:00

UJ,

This page says "Add limit option to effect queues to limit the maximum number of effects in a queue, new unit tests for scoped effect queues, fixes #3498".

Could this be what's limiting you to 255 draggables? I can't see why it should but who knows?

Maybe Essential will have some ideas when he wakes up.

Airshow

UncleJoe 0 Newbie Poster · Answer 9 · 2009-08-06T10:10:52+00:00

We have a clue...I tried the slice (thanks Airshow). Even though the first 100 were sliced off, the list broke at the same point. In other words, the draggables apparently didn't end according to the number, but apparently the position in the array. I'm looking over the "view source" for a clue right now...

UncleJoe 0 Newbie Poster · Answer 10 · 2009-08-06T10:51:31+00:00

Airshow-
I'm starting to think there may be a problem with the draggable div size. When I sliced the first 100 divs off the array the first 100 divs are still displayed, they are just not draggable since they were not defined as a "new Draggable".

So, each tab still had the same number of div elements within it, but the cutoff was the same.

Does that make any sense?

UncleJoe

essential 84 Posting Shark Featured Poster · Answer 11 · 2009-08-06T12:27:16+00:00

Hi UncleJoe,

The problem is that my browser ( OPERA v8.65/s60v2 series OPERA's exclusive browser for handheld devices ), is limited to handle this type of event, involving draggable items'.
So i wont be able to provide efficient help on my solutions for this issue.
But i'm working things out and preempting that all things is happening in the usual way.

Here's another workaround, but i am not sure if this is a valid syntax in scriptalicious, where i have performed a line, by bypassing their class ( each ):

<script type="text/javascript">
// <![CDATA[
 
window.onload = ( function( element ) {
var element = element || null;
   return function() {
      for ( items in element ) {
         new Draggable( element[ items ], { revert : true, ghosting : true } );
      } delete items; document.getElementById("group").innerHTML = "Selecting TAB";
   document.getElementById("otherGroup").innerHTML = "Current TAB";
   Droppables.add( DropDiv, {
      hoverclass : "DropHover",
      onDrop : doSomething 
      } );
   $("droparea").cleared = false;
   }
} )( <?php print $div_elements; ?> ); 

// ]]>
</script>

- im sure Airshow would be able to solved this things out w/o any help from me.

But im still finding ways in penetrating your issue...
-essential

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 12 · 2009-08-06T17:17:16+00:00

UJ,

So, each tab still had the same number of div elements within it, but the cutoff was the same.

Was the cutoff the at the same number of divs (255) or at the same div (the original elements[255] before slicing off 100)?

Give Essential's code a go - it may be a solution, or will eliminate the Prototype's .each method as a source of the problem by looping through the array with standard Javascript.

- im sure Airshow would be able to solved this things out w/o any help from me.

Thank you for your confidence Ess. Right now, I'm not sure it's justified!! :confused:

Airshow

essential 84 Posting Shark Featured Poster · Answer 13 · 2009-08-06T21:35:04+00:00

-Airshow

i'm always confident in your applications' as wel with your unique techniques...

UncleJoe 0 Newbie Poster · Answer 14 · 2009-08-14T07:42:39+00:00

Essential and Airshow...

Thanks for all your help. I tried to plug Essential's code snippet into my routine, but still no luck. I ended up putting an alert statement in the routine for every add.Draggable call to see where the break was occuring. It took several days of experimentation, but I discovered I particular div was breaking the loop no matter the array size. Apparently, the suspect div content wasn't there in the abbreviated set that worked well.

Ultimately, there was an apostrophe ' in the text of the div content that the parser was interpreting as a special character. I removed the apostrophe and it works perfectly.

Thanks a million for all your help. I plan to load this website (my first) on a server this weekend. If your interested I'll send you the URL. I'd love to know what a couple of knowledgable (<-sp?) folks think of my first effort.

Have a great evening, and thanks again for all your help. This wouldn't have gotten done without your guidance.

UncleJoe

essential 84 Posting Shark Featured Poster · Answer 15 · 2009-08-14T07:54:56+00:00

That's for sure, and i've learned new things from you, Uncle Joe.

Best regards
essential

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 16 · 2009-08-14T17:17:32+00:00

Well discovered UJ. It had to be something a biy odd.

And yes please, send me that url.

Airshow