I have changed the html text of an element, in this case #main_cluster_id_reach_12
$("#main_cluster_id_reach_12").html( '400' ).effect("highlight", {color: '#2a6500'}, 60000 * 5);
That works fine but when I try to clone the container that is holding it(#applications), it doesn't contain the updated html of #main_cluster_id_reach_12 but rather the original text that loaded with the page. Here is how I am cloning it:
var $applications = $('#applications');
var $data = $applications.clone();
What am I doing wrong?
edit: Here is the js and html. I am using jquery 1.7.2
What i am trying to do is update the reach of a group of clusters on a 10 second interval via ajax and then resorting the li items with quicksand ordered by their reach. The updating occurs without problem but quicksand clones the original list, not the updated list. This morning i've been playing with some logging and it appears the cloning is happening before the ajax update completes.
// quicksand sorting plugin
(function($) {
$.fn.sorted = function(customOptions) {
var options = {
reversed: true,
by: function(a) { return a.text(); }
};
$.extend(options, customOptions);
$data = $(this);
arr = $data.get();
arr.sort(function(a, b) {
var valA = options.by($(a));
var valB = options.by($(b));
if (options.reversed) {
return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;
} else {
return (valA < valB) ? -1 : (valA > valB) ? 1 : 0;
}
});
return $(arr);
};
})(jQuery);
$(document).ready(function(){
//loop through all reaches to update
setInterval(function() {
//reach
$("[id^='main_cluster_id_reach_']").each(function(){
//Check for reach updates
//get cluster id first
var cluster_id = parseInt(this.id.replace("main_cluster_id_reach_", ""));
//get cluster reach
$.post("./lib/ajax/meme_cluster_update.php", { cluster_id: cluster_id },
function(data) {
//get reach - new
var new_reach = 0;
new_reach = parseInt(data.ItemReach, 10);
//get reach - old
var reach = $("#main_cluster_id_reach_" + cluster_id).html();
// Format as American input
reach = parseInt(reach.replace(/[^\d\.\-\ ]/g, ''));
//compare new vs old and change cell view
compareReach(cluster_id, reach, new_reach);
}, "json");
});
// get the first collection
var $applications = $('#applications');
// clone applications to get a second collection
var $data = $applications.clone();
var $filteredData = $data.find('li[data-type=app]');
var $sortedData = $filteredData.sorted({
by: function (v) {
return parseFloat($(v).find('span[data-type=size]').text());
}
});
// finally, call quicksand
$applications.quicksand($sortedData, {
duration: 800,
easing: 'easeInOutQuad'
});
}, 10000);
//compare the reaches to update accordingly
function compareReach(cluster_id, reach, new_reach) {
//determine what color to change cells
if(new_reach > reach) {
$(".main_cluster_id_reach_" + cluster_id).html( new_reach ).effect("highlight", {color: '#2a6500'}, 60000 * 5);
}
else if(new_reach < reach) {
$(".main_cluster_id_reach_" + cluster_id).html( new_reach ).effect("highlight", {color: '#990004'}, 60000 * 5);
}
}
html
<div class="span-24" id='demo'>
<ul id="applications" class="image-grid">
<li data-id="id-210639" data-type="app" class='cluster'>
<div class='cluster_byline'>@awkwardisco</div>
<div class="cluster_padding">
<span class='cluster_headline'>Avengers on Thursday!!!</span>
<br>
<div class="cluster_stats">
<div class="span-2 reach">
<strong>REACH</strong>
<span class="main_cluster_id_reach_210639" data-type="size">26777</span>
</div>
<div class="span-2 retweets">
<strong>RETWEETS</strong>
</div>
<div class="span-2 velocity">
<strong>VELOCITY</strong>
</div>
<div class="span-8 LAST">
<strong>LINKS</strong>
</div>
</div>
</div>
</li>
</ul>
</div>
