www.webdeveloper.com
Results 1 to 8 of 8

Thread: Array function only works first time?

Hybrid View

  1. #1
    Join Date
    Nov 2009
    Posts
    268

    Question Array function only works first time?

    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
    1. 'art'
    2. 'art' 'art'
    3. 'art' 'art' 'art'
    not
    1. 'art'
    2. 'art' 'silver'
    3. '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.
    Last edited by THEFOOL; 04-21-2012 at 11:56 AM.

  2. #2
    Join Date
    Nov 2009
    Posts
    268

    Thumbs up Array function only works first time?

    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!!!

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364

    Question

    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>

  4. #4
    Join Date
    Nov 2009
    Posts
    268

    Question Array function only works first time?

    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

    1. 'art'
    2. 'art' 'art'
    3. '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

    1. 'art'
    2. 'art' 'art'
    3. 'art' 'art' 'silver' should just be 'silver'
    4. '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.
    Last edited by THEFOOL; 04-23-2012 at 06:30 PM.

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364

    Lightbulb

    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.

  6. #6
    Join Date
    Nov 2009
    Posts
    268

    Question Array function only works first time?

    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.

  7. #7
    Join Date
    Jan 2011
    Posts
    117
    are you still using "doctype xhtml 4.0" on your page?

  8. #8
    Join Date
    Nov 2009
    Posts
    268

    Question Array function only works first time?

    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles