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>
<p id="main_cluster_id_reach_210639">26777</p>
<span class="main_cluster_id_reach_210639" data-type="size">26777</span>
</div>
</div>
</div>
</li>
</ul>
</div>
Thanks for all the help everyone. I came across a solution on another thread that works. It's not pretty or probably even ideal from a js perspective but it's working. What i'm doing is counting the number of items that are going through the each loop and then when that number is reached in the ajax .post, ie signaling that the last ajax call is complete, I run the clone and quicksand operations.
setInterval(function() {
var flag = 0; //to determine when each is complete
var count = $("[id^='main_cluster_id_reach_']").length;
//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);
flag++;
//if ajax is done then sort
if(flag == count) {
console.log("Flags Equal, Each Complete, Now Sort");
quicksandSort();
}
}, "json");
});
}, 10000);
//sort with quicksand
function quicksandSort() {
// get the first collection
var $applications = $('#applications');
// clone applications to get a second collection
var $data = $applications.clone(true);
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: 2000,
easing: 'easeInOutQuad'
});
}