Store content of .load html file in variable

Question

On button click, i am appending a tfoot to a table . The contents of the tfoot is the result of a .load to a local .html file. Although my solution works, i am performing a get to the .html file on every click. Can the result on first click be stored in a variable, and reused?

$scope.btnClick = function() {

    var tfoot = $('#datepicker table').find('tfoot');
    if(!tfoot.length) {
        tfoot = $('<tfoot>').appendTo('#datepicker table');
    }

    tfoot.load('myDir/calendar/customFooter.html');

}

Answer 1

You can achieve this by using a callback on the load() method to store the result. I use your $scope variable for this, but you can amend this as needed. Try this:

$scope.btnClick = function() {    
    var tfoot = $('#datepicker table').find('tfoot');
    if (!tfoot.length) {
        tfoot = $('<tfoot>').appendTo('#datepicker table');
    }

    if ($scope.tfootContent) {
        tfoot.html($scope.tfootContent);
    } else {
        tfoot.load('myDir/calendar/customFooter.html', function(response) {
            $scope.tfootContent = response;
        }); 
    }
}

Answer 2

You can use the templateCache for this, (see reference here -> https://docs.angularjs.org/api/ng/service/ $templateCache) I believe that would be a better approach. That way you don't need to do additional work and it will get cached. You'd show the tfoot on button click so it would be something like this:

$scope.btnClick = function() { tfootVisible = true;}

and in the html

<table id="datepicker">
   <tfoot ng-include="'templateId.html'" ng-if="tfootVisible"></tfoot>
</table>