Ordering List

[Phreaddee]

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.

 

[chrishirst]

And what is it supposed to do? or not as the case may be.

 

[Phreaddee]

in a nutshell

original

<li>aaa bbb</li>
<li>ccc aaa</li>
<li>bbb ccc</li>

expected result

<li>ccc aaa</li>
<li>aaa bbb</li>
<li>bbb ccc</li>

it works on the fiddle but not on the site.

 

[ronaldroe]

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?

 

[DHDdirect]

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

 

[chrishirst]

in a nutshell

original

<li>aaa bbb</li>
<li>ccc aaa</li>
<li>bbb ccc</li>

expected result

<li>ccc aaa</li>
<li>aaa bbb</li>
<li>bbb ccc</li>

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?

it works on the fiddle

I know a few people like that.

 

[Phreaddee]

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.

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

<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

 

[chrishirst]

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.