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