Ordering List

Discussion in 'Scripts' started by Phreaddee, Jul 17, 2012.

to remove all ads.
  1. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    This seems to be such a simple problem.
    *sigh* nothing is "simple" when using business catalyst...

    see this jsfiddle.
    http://jsfiddle.net/phreaddee/X22fJ/2/

    in theory this ordering works, but alas in situ it does not.

    can anyone explain to me why it would not reorder the list items as it does in this example. (someone with good DOM understanding...) sorry the site is locked down so cant give you the "in situ" scenario, but that jsfiddle is a copy of it.

    or if anyone knows of a better solution then well...please let me know.
     
  2. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,675
    And what is it supposed to do? or not as the case may be.
     
  3. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    in a nutshell

    original
    HTML:
    <li>aaa bbb</li>
    <li>ccc aaa</li>
    <li>bbb ccc</li>
    
    expected result
    HTML:
    <li>ccc aaa</li>
    <li>aaa bbb</li>
    <li>bbb ccc</li>
    
    it works on the fiddle but not on the site. :(
     
  4. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    Being a complete non-expert in JS, is there another script on the page that's getting in the way? Are other scripts (specifically jQuery scripts) working?
     
  5. DHDdirect

    DHDdirect New Member

    Messages:
    383
    I would assume it's something to do with the script not picking up the space, (' '), properly. Have you tried ('&nbsp;') instead? or possibly some other code to represent the blank space.
     
  6. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,675
    Okay???? Why is that the "expected" result?

    It just appears that li[0] and li[1] have been transposed. and that could be done using .shift() and .push() methods on the getElementsByTagName('li') collection.

    What is the sort criteria?


    I know a few people like that. :)
     
  7. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    sorted.
    the issue here was an extra <a> which the sort was picking up the URL (which obviously hadnt been changed) so I needed to strip it of its anchor leaving just the text.
    then the ordering worked!

    see the thing is, there is very limited options re: dynamic content for a catalogue listing with bc, you can list the name of the catalogue, but to not make it a link, well thats not so easy.

    in the fiddle I was using placeholder (#) urls, which thus it was not ordering, as they were all the same, and it was effectively reading the text, but once the real urls were put in place it all failed.
    so...the catalogue listings were as follows.
    HTML:
    <span class="surname">{tag_name}</span>
    <div class="image">{tag_image}</div>
    <h4>{tag_name}</h4>
    
    all wrapped up in a predetermined cataloguelist generated by the system.
    my theory being to "hide" the span, but use it for the ordering
    I couldnt work out how to swap the words around so I just made it order based on the last name, it actually duplicated the last name in the span, but I figure considering it it already ordered by firstname that adam smith would still come before joe smith.
    before I ordered the list though the <a> surrounding the text in the span I was trying to order by needed to be removed. once that was done the ordering worked sweet as pie.
    the js.
    HTML:
    <script type="text/javascript">
    //<![CDATA[ 
    $(window).load(function(){
    $('ul.catalogueList li span.surname a').html(function(i, oldText) {
        var out = oldText.split(' ');
        out[0] = out[1];
        return out.join(' ');
    });
    $('span.surname a').contents().unwrap();
    
    function SortList(a, b) {
    
        return (a.innerHTML > b.innerHTML) ? 1 : -1;
    }
    
    $('ul.catalogueList li').sort(SortList).appendTo('ul.catalogueList');
    });//]]> 
    </script>
    
    then I just hid the span with css
     
  8. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,675
    Ok, so the 'aaa bbb' were actually NAMES (firstname surname) that you are working with, not that it would have proven useful as a chunk of the puzzle was missing, but it would have made the sorting criteria obvious.
     

Share This Page