samedi 28 janvier 2017

Alphabetical order not working when loading external checkboxes

I'm pulling in some checkboxes from an external HTML file to a tab container, and after they load I want them sorted alphabetically. The sorting works fine when the checkboxes load internally, but when loaded externally the sorting fails. Don't know if this is a delay issue or other error. I've tried delay(), setTimeout(), and hints from related posts but nothing works. Any ideas anyone? Fiddle: http://ift.tt/2kdTw2s

http://ift.tt/20g0BuL
http://ift.tt/2dsPzTA


<ul class="tabs-nav">
 <li class="tab-active"><a href="#Container" rel="nofollow">Countries</a></li>
 <li class=""><a href="#blank2" rel="nofollow">Year</a></li>
 <li class=""><a href="#blank3" rel="nofollow">Products</a></li>
</ul>

<div class="TabContainerClass">

<div id="Container">
<div id="CountryID" class="CountryClass">

<!--
<label class="myEuropeCountries"><input type="checkbox"  id="UN400" value="Poland" />Poland</label>
<label class="myEuropeCountries"><input type="checkbox"  id="UN500" value="Macedonia" />Macedonia</label>
<label class="myEuropeCountries"><input type="checkbox"  id="UN196" value="Cyprus" />Cyprus</label>
<label class="myEuropeCountries"><input type="checkbox"  id="UN100" value="Bulgaria" />Bulgaria</label>
<label class="myEuropeCountries"><input type="checkbox"  id="UN40" value="Austria" />Austria</label>
-->
</div>
</div>

</div>




// Loading from external file & sorting alphabetically

$(function() {
  $.get('http://ift.tt/2ke08xG', function(data) {
var $data = $(data);
$("#CountryID").html($data.find('#CountryStore_ws'));
  });

  function sortByText(a, b) {
    return $.trim($(a).text()) > $.trim($(b).text()) ? 1 : -1;
  }

  var li = $(".CountryClass").children("label").detach().sort(sortByText);
  $(".CountryClass").append(li)
});



// ================
$(function() {
  $('.tabs-nav a').on('click', function(event) {
    event.preventDefault();

    $('.tab-active').removeClass('tab-active');
    $(this).parent().addClass('tab-active');
    $('.TabContainerClass > div').hide();
    $($(this).attr('href')).fadeIn(300)
  });
  $('.tabs-nav a:first').trigger('click');
});





.tabs-nav {
list-style: none;
margin: 0;
padding: 0;
}

.tabs-nav .tab-active a {
cursor: default;
}

.tabs-nav a {
border-width: 0px 1px 1px 0px;
border-style: solid;
display: block;
height: 32px;
text-align: center;
width: 160px;
}

.tabs-nav li {
float: left;
}

.TabContainerClass {
width: 480px;
height: 110px;
border: 1px solid orange;
clear: both;
position: relative;
background: white;
}

.CountryClass {
position: absolute;
width: 468px;
height: 80px;
}




Aucun commentaire:

Enregistrer un commentaire