Visualize: Reports destroying

by obobruyko

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<script type='text/javascript' src="http://build-master.jaspersoft.com:6680/jrs-pro-feature-visualizejs/client/visualize.js"></script>
<table class="sample">
    <tr>
        <td id="c1"></td>
        <td id="c2"></td>
    </tr>
    <tr>
        <td id="c3"></td>
    </tr>
</table>

CSS

html, body {
}
table.sample {
    width: 100%;
}
td#c1, td#c2, td#c3, td#c4 {
    width: 50%;
}

JavaScript

visualize({
    auth: {
        name: "superuser",
        password: "superuser"
    }
}, function (v) {

    var reportsToLoad = [           
        "/public/Samples/Reports/02._Sales_Mix_by_Demographic_Report"];

    $.each(reportsToLoad, function (index, uri) {
        var container = "#c" + (index + 1),
            addDeleteBtn = function(report) {
               var $deleteBtn = $("<button>Delete</button>");
            
                $(container).prepend($deleteBtn);
                $deleteBtn.on("click", function() {
                    report.destroy();
                });
            };
        v(container).report({
            resource: uri,
            events: {
                reportCompleted: function (status) {
                    console.log("Report " + this.resource() + " is " + status);
                },
                beforeRender: function (html) {
                    console.log("Report " + this.resource() + " is about to render");
                }
            },
            success: function () {
                addDeleteBtn(this);
                console.log("Report " + this.resource() + " is loaded");
            },
            error: function (err) {
                alert(err.message + " in report from" + this.resource());
            }
        });
    });


});