Dynamically load list-items and sort them, 2 scripts both work apart, but they don't work together. (JSFiddle included)

Question

I have made a script to load list-items dynamically via JSON and I found a script to sort them by date.

However, they don't work together, if I put them together the list-items get loaded but not sorted,

Script 1 (to load the list-items): JSFiddle1

Script 2 (to sort the list-items): JSFiddle2

As you can see, they both work. But when I put them together I just get:

<ul class="datacursusul">
  <li class="21/05/2014">Wo 21 mei 2014</li>
  <li class="05/01/2014">Do 05 januari 2014</li>
</ul>

What I want:

<ul class="datacursusul">
  <li class="05/01/2014">Do 05 januari 2014</li>
  <li class="21/05/2014">Wo 21 mei 2014</li>
</ul>

Answer 1

Could it be that the list hasn't loaded when the sort is being fired? Have you tried the sort call by adding a .done() call?

https://api.jquery.com/jQuery.get/

See the second to last example.

Answer 2

I have updated your JSFiddle to combine the two scripts. I think the problem might have been that you were trying to sort the list before the content was loaded. The following line must be called after the list is populated with the loaded content:

$('.datacursusul').sortChildren(ddmmyyyClassSort);

Updated JSFiddle