I need help with this please. I need one JQuery function to finish before the next one executes. It is only client side so no requirement to contact the server, i.e. no POST or PUT or GET required. It seems the actions performed on some DOM elements are only available and visible after the Click event function has finished. I need to be able to access those changes on some elements before the event function has terminated. I have tried a few suggested solutions to similar questions but no luck getting this to work.
The second function (SetParentsTriStateCheckBoxes) is dependant on the first to set the checkboxes, but it only seems to set the checkboxes after it has exited the ".subtree-checkbox".click function), so the 2nd function has no accurate sheckbox states with which to work.
$(function ()
{$(".subtree-checkbox").click(function (e)
{
var id = $(this).find("input[type=checkbox]").attr("id");
e.stopPropagation();
var SpanParent = $(this).parents(".accordion-heading").attr("data-target");
//Also tried the commented out way / line as well.
//setCheckboxes($(this), SpanParent, callback).then(SetParentsTriStateCheckBoxes($(this), SpanParent, id));
setCheckboxes($(this), SpanParent, function () { return }).then(SetParentsTriStateCheckBoxes($(this), SpanParent, id));
});
var setCheckboxes = function ($this, SpanParent, callback)
{
var defer = $.Deferred();
if ($this.hasClass('checked'))
{
//set the checkboxes classes
}
setTimeout(function ()
{
defer.resolve();
}, 5000);
return defer;
callback();
}
var SetParentsTriStateCheckBoxes = function ($this, SpanParent,id)
{
var defer = $.Deferred();
//Handles the ancestors (parents) tri-state
setTimeout(function ()
{
defer.resolve();
}, 5000);
return defer;
}