Array function only works first time?

**THEFOOL** · 04-21-2012 11:54 AM

Not sure why this function works the first time but doesn't the second or third time. Any advice greatly appreciated. This is called with ul li tag onclick which sends an ajax get call to the database so the array can only contain upto 3 matching indexes. I should be able to urencode the array.join(' ') and send it to the server for pagination technique with ajax Get request, unfortunatley after the first round the array.join will produce 'art' 'art' 'silver'. Which I could break down on the server side with the php file but I would preffer that the array arrived as per the function. ie.
eather of the following

'art'
'art' 'art'
'art' 'art' 'art'

not

'art'
'art' 'silver'
'silver' 'art' 'silvergold'

Function Counter()

Code:

function counter()
{
if(count.length==1)
{
return;
}
else if(count.length==2 && count[0]!==count[1])
{
count.shift();
alert(count.join(' '));//Demonstrates flaw
}
else if(count.length==3 && count[0]!==count[1])
{
count.shift();
alert(count.join(' '));
}
else if(count.length==3 && count[1]!==count[2])
{
count.shift();
count.shift();
alert(count.join(' '));
}
else if(count.length>3)
{
count.shift();
alert(count.join(' '));
}
}

Not sure why it doesn't work beyond first time arround

. Thanks again for any advice.

**THEFOOL** · 04-21-2012 01:31 PM

OK. I have it working better. I had to call the function 'counter()' twice, once at the begining of the onclick then at the end. It seems to work like a dream now.

Hope I can pass the array.join in the Get httprequest!!!

**JMRKER** · 04-22-2012 08:55 PM

I see from your last post that you have solved your problem to your satisfaction.

But, I'm not sure I understood the problem to begin with, so I wrote a small test program
that does not rely on ajax to confound the problem with external files, servers, etc.

Could you give an example entry into this program that "Demonstrates the flaw" as you state?

Code:

<html>
<head>
<title> Untitled </title>
<script type="text/javascript">
var count = [];
function counter() {
  if(count.length==1) { return; }
  else if(count.length==2 && count[0]!==count[1]) {
       count.shift();
       alert(count.join(' '));  // Demonstrates flaw
     }
  else if(count.length==3 && count[0]!==count[1]) {
       count.shift();
       alert(count.join(' '));
     }
  else if(count.length==3 && count[1]!==count[2]) {
       count.shift();
       count.shift();
       alert(count.join(' '));
     }
  else if(count.length>3) {
       count.shift();
       alert(count.join(' '));
     }
}
function testEntry() {
  count = document.getElementById('TBox').value.split(' ');
  counter();
}
function currEntry() {
  document.getElementById('Tdiv').innerHTML = count.join();
}
</script>

<style type="text/css">

</style>
</head>
<body>
Pseudo-ajax information 
<input type="text" id="TBox" value="" size="40">
<br><button onclick="testEntry()">Test Entry</button>
<p>
<button onclick="currEntry()">Current COUNT Contents</button>
<button onclick="document.getElementById('Tdiv').innerHTML=''">Clear Display</button>
<div id='Tdiv' style="border:1px solid blue; height:100px; width:300px;"></div>
</body>
</html>

**THEFOOL** · 04-23-2012 06:14 PM

JMRKER, wow great mockup. I'm not sure that the sql created the problem? The array when alerted should have read like this for each li tag with the same id and excepted the change of li tag id clicked that would / should make the array length equal 1.
PER CLICKS 1,2,3

'art'
'art' 'art'
'art' 'art' 'art'

Before I put the counter() function in the onclick() function twice, one at the begining, the other near the end. I would get results like this.
PER CLICK 1,2,3,4

'art'
'art' 'art'
'art' 'art' 'silver' should just be 'silver'
'art' 'art' 'silver' 'silvergold' should just be 'silvergold' on first 4 clicks it was. Second 4 clicks created this output?

Not sure if this will demonstrate/clarify but this is the onclick

Code:

 
var count=new Array();
function counter()
{
if(count.length==1)
{
return;
}
else if(count.length==2 && count[0]!==count[1])
{
count.shift();
}
else if(count.length==3 && count[0]!==count[1])
{
count.shift();
}
else if(count.length==3 && count[1]!==count[2])
{
count.shift();
count.shift();
}
else if(count.length>3)
{
count.shift();
}
}
 
//my test of counter
function countlength()
{
if(count.length==1)
{
alert(count[0]);
}
if(count.length==2)
{
alert('Counter 0: '+count[0]+'\nCounter 1: '+count[1]);
}
if(count.length==3)
{
alert('Counter 0: '+count[0]+'\nCounter 1: '+count[1]+'\nCounter 2: '+count[2]);
}
if(count.length==3 && count[0]==count[1] && count[1]==count[2])
{
alert('Hurray!');
}
}
 
var products=new Array();
var sidebarli=document.getElementById('sidebar').getElementsByTagName('li');   
for(var i=0;i<sidebarli.length;i++)
{   
if(sidebarli[i].className=='items' && sidebarli[i].parentNode.className=='prod')//check ul tags className prod
{ 
sidebarli[i].onclick=function()
{   
EvalSound1();
var p=this.id;
count.push(p);
counter();//first application failed on second alert of count array
var str=p.slice(0,1).toUpperCase() + p.slice(1);
var pp=this.parentNode.id;
var str2=pp.slice(0,1).toUpperCase() + pp.slice(1);
logo.style.backgroundImage='url("sources/'+p+'.jpg")';
alert(str2+', '+str+': Is sending your request.');
products.push(p);
counter();//second application worked a charm
getproduct(p);//the Ajax call for getproduct.php using GET
logo.className=p;
logo.title='www. Our .Com \"'+str2+', '+str+'\" page.';
document.title='www. Our .Com '+str2+' '+str;
//alert('The document title is now: '+document.title);
f1.className='product';
document.getElementById('scrit2').src='scripts/product.js';
hidewelcome();
f1.scrollTop;//display div f1 innerTML = responseText 
//probably counter() function here only?
//alert(count.length);
//countlength(); my test
//alert(count.join(' ')); another simpler test
};
}
//goes on to ul tags not holding getproduct() ajax call

Hope that clarifies a very convoluted scenario. Screen shot wouldn't as the side bar li tags are hidden untill the ul mousover.
Let me know if you think it was the sql or the rest of the crud in the onclick. Thanks.

**JMRKER** · 04-23-2012 07:11 PM

I don't know anything about SQL, so I'll be of no help there.
The mock-up in may last post was only to try to simulate an SQL retrieval and then process the information.
Does my mock-up do that for you?
If it does not, then we can address the JS logic further. Once solved, you can move the logic into your program.

However, you stated in your last post that your program did the following:

The array when alerted should have read like this for each li tag with the same id ...

That would lead to some errors in JS. Every id value MUST be unique, they cannot be the same.
You don't show the HTML portion of your code so I don't know if that is where the problem is located.

**THEFOOL** · 04-24-2012 12:39 PM

Putting the counter() function at the end of the onclick got it working properly so far. Here is the HTML for the #sidebar div. All li tags and Uls have DIFFERENT ids. I still have to examin you're mockup but the key point is that the counter() function is identical to mine and doe's not produce wrong output after the 6th click? ie. after the sith click, if count array length = 3, all three indexes are equal and the 7th click produces an index unequal to the three existing then count array length = 1. If the 8th click produces an unequal index then count array length = 1 with the index of the id of the 8th click. If the 8th click produces an equal index then count array length = 2 equal indexes etc. but never is count array length to be greater than 3?
#SIDEBAR DIV

HTML Code:

<div id="sidebar">
<!--===============================#bags ul================================-->
<ul id="bags" class="prod">
<li class="top" title="Beautiful Bags Made in Mexico!">Bags &amp; Purses</li>
<li class="items disabled" id="leatherbags" title="Coming soon.">Leather</li>
<li class="items" id="syntheticbags" title="Synthetic Bags, Made in Mexico.">Synthetic</li>
<li class="items" id="wovenbags" title="Woven Bags Made in Mexico.">Woven</li>
</ul>
<!--================================#boys ul===============================-->
<ul id="boys" class="prod">
<li class="top" title="Handsom Boys Ware Made in Mexico!">Boys</li>
<li class="items disabled" id="boyaccessories" title="Coming soon.">Accessories</li>
<li class="items disabled" id="boyjackets" title="Coming soon.">Jackets</li>
<li class="items" id="boyshirts" title="Style, Tailoring &amp; Price.">Shirts</li>
<li class="items disabled" id="boyshoes" title="Coming soon.">Shoes</li>
<li class="items disabled" id="boyshorts" title="Coming soon.">Shorts</li>
<li class="items disabled" id="boyslacks" title="Coming soon.">Slacks</li>
<li class="items disabled" id="boysuits" title="Coming soon.">Suits</li>
</ul>
<!--=============================#decor ul===========================-->
<ul id="decor" class="prod">
<li class="top" title="Household furnishing &amp; decoration.">D&eacute;cor</li>
<li class="items" id="art" title="Gloria&rsquo;s Choice.">Art</li>
<li class="items" id="baskets" title="Hand Made by Mexican Artisans.">Baskets</li>
<li class="items" id="books" title="About Mexican Artisans and their crafts.">Books</li>
<li class="items" id="carpetrug" title="Fabulous style and craftsmanship.">Carpets &amp; Rugs</li>
<li class="items" id="dinning" title="Beautiful collection of dinning regalia.">Dinning</li>
<li class="items" id="figurines" title="Beautiful collection of figurines.">Figurines</li>
<li class="items" id="lamps" title="Standup &amp; sconce candle lamps.">Lamps</li>
<li class="items" id="planters" title="Exquisite Pot and Vase collection.">Planters</li>
<li class="items" id="wallmasks" title="Exquisite Wall Masks collection.">Wall Masks</li>
</ul>
<!--==============================#girls ul================================-->
<ul id="girls" class="prod">
<li class="top" title="Fine girls ware, Made in Mexico.">Girls</li>
<li class="items disabled" id="girlaccessories" title="Coming soon.">Accessories</li>
<li class="items" id="girlblouses" title="Fashion, Tailoring &amp; Price.">Blouses</li>
<li class="items" id="girldresses" title="Beautiful, casual comfort.">Dresses</li>
<li class="items disabled" id="girlensembles" title="Coming soon.">Ensembles</li>
<li class="items disabled" id="girljackets" title="Coming soon.">Jackets</li>
<li class="items disabled" id="girlshoes" title="Coming soon.">Shoes</li>
<li class="items disabled" id="girlshorts" title="Coming soon.">Shorts</li>
<li class="items disabled" id="girlskirts" title="Coming soon.">Skirts</li>
<li class="items disabled" id="girlslacks" title="Coming soon.">Slacks</li>
<li class="items disabled" id="girltunics" title="Coming soon.">Tunics</li>
</ul>
<!--=============================#jewelry ul===========================-->
<ul id="jewelry" class="prod">
<li class="top" title="Beautiful Jewelry Made in Mexico!">Jewelry</li>
<li class="items" id="silver" title="95.5% Silver Jewelry Made in Mexico!">Silver</li>
<li class="items" id="silvergold" title="Silver &amp; Gold Jewelry, Made in Mexico!">Silver &amp; Gold</li>
<li class="items" id="silverstones" title="Coming soon.">Silver &amp; Stones</li>
</ul>
<!--==============================#mens ul=============================-->
<ul id="mens" class="prod">
<li class="top" title="Handsom Mens Ware Made in Mexico.">Men</li>
<li class="items disabled" id="menaccessories" title="Coming soon.">Accessories</li>
<li class="items disabled" id="menjackets" title="Coming soon.">Jackets</li>
<li class="items" id="menshirts" title="Style, Tailoring &amp; Price.">Shirts</li>
<li class="items disabled" id="menshoes" title="Coming soon.">Shoes</li>
<li class="items disabled" id="menshorts" title="Coming soon.">Shorts</li>
<li class="items disabled" id="menslacks" title="Coming soon.">Slacks</li>
<li class="items disabled" id="mensuits" title="Coming soon.">Suits</li>
</ul>
<!--==============================#womens ul=============================-->
<ul id="womens" class="prod">
<li class="top" title="Fine Women&rsquo;s ware, Made in Mexico.">Women</li>
<li class="items" id="womenaccessories" title="Extraordinary Robes collection.">Accessories</li>
<li class="items" id="womenblouses" title="Extrordinary Tailoring &amp; Price.">Blouses</li>
<li class="items" id="womendresses" title="Beautiful, casual comfort.">Dresses</li>
<li class="items disabled" id="womenensembles" title="Coming soon.">Ensembles</li>
<li class="items disabled" id="womenshoes" title="Coming soon.">Shoes</li>
<li class="items disabled" id="womenshorts" title="Coming soon.">Shorts</li>
<li class="items disabled" id="womenslacks" title="Coming soon.">Slacks</li>
<li class="items" id="womentunics" title="Coming soon.">Tunics</li>
</ul>
<!--===========================#sitelinks ul===========================-->
<ul id="sitelinks" class="site">
<li id="site" class="top" title="www.BoutiqueWholeSaleItems.com Site Links.">Site Links</li>
<li class="items" id="home2" title="Click and Start All Over Again Easily!">Home</li>
<li class="items disabled" id="products2" title="Boutique Wholesale Items Products Page.">Products</li>
<li class="items" id="testimonials2" title="Testimonials from Our Fans!">Testimonials</li>
<li class="items" id="aboutus2" title="About Boutique Wholesale Items.Com &amp; Mexicali Rose!">About Us</li>
<li class="items" id="faq2" title="Mexicali Rose Order Faqs!">Order FAQ</li>
<li class="items" id="contactus2" title="Please Feel Free to Contact Us.">Contact Us</li>
<li class="items" id="mexicali2" title="You must complete an order to become a Mexicali Rose Member.">MyMexicali</li>
</ul>
<!--=========================#searchbycode ul===========================-->
<ul id="searchbycode" class="bwi">
<li id="code" class='top' title="Search By Item Code!">Item Code?</li>
<li id="searchlist" class="items" title="Please enter the Item Code from Your Mexicali Rose recipt">
<button id="getcode">Find it</button>
<input type="text" size="5" name="searchcode" id="searchcode" value="Code..."/>
</li>
</ul>
</div>
<!--=========================END #SIDEBAR DIV============================-->

The html comments should be removed as IE8 sees them as childNodes. None of the li tags has matching ids.

**Troy III** · 04-25-2012 03:30 AM

are you still using "doctype xhtml 4.0" on your page?

**THEFOOL** · 04-25-2012 11:07 AM

TroyIII Hey bud, sorry I haven't changed the doctype because I'm still using embeded tags to play sounds. Do you think it would affect array methods?

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Thread: Array function only works first time?

Thread Tools

Display

Hybrid View