Jaspersoft visualise.js report export failing to produce file

Question

I hope there is few among you who have experience with Jaspersoft Reports and their new visualise.js api

I have a problem with visualise.js not producing report export file. What happens is:

1. I am able to succsefully load the report through the visualise.js API, it loads and displays on my web page
2. Export controls load up successfully too, so I have dropdown with export file formats and a button to export the file.
3. When I click the export button though, the whole page reloads as if the export button was really a submit button and nothing happens.
4. Occasionally, the export will work and it will produce file. Though there is no pattern to when it will produce the file and when it will fail.

Below is the code I am using for this (I am using plain text auth for testing purposes):

    visualize({
    auth: {
        name: "mylogin",
        password: "mypass",
        organization: "organization_1"
        }

}, function (v) {

        var $select = buildControl("Export to: ", v.report.exportFormats),
            $button = $("#button"),
            report = v.report({
                resource: "/FPSReports/journal",
                container: "#export",
                params: {
                    "journal_ref": [ "<?php echo $reference; ?>" ],
                },

                success: function () {
                    button.removeAttribute("disabled");
                },

                error : function (error) {
                    console.log(error);
                }
            });

        $button.click(function () {

            console.log($select.val());

            report.export({
                // export options here
                outputFormat: $select.val(),
                // exports all pages if not specified
                // pages: "1-2"

            }, function (link) {
                var url = link.href ? link.href : link;
                window.location.href = url;
            }, function (error) {
                console.log(error);
            });
        });

        function buildControl(name, options){

            function buildOptions(options) {
                var template = "<option>{value}</option>";
                return options.reduce(function (memo, option) {
                    return memo + template.replace("{value}", option);
                }, "")
            }

            var template = "<label>{label}</label><select>{options}</select><br />",
                content = template.replace("{label}", name)
                    .replace("{options}", buildOptions(options));

            var $control = $(content);
            $control.insertBefore($("#button"));
            //return select
            return $($control[1]);      
        }       

});

HTML:

    <div class="grid">
      <div class="grid-8"></div>
      <div class="grid-8 center"><a href="" id="button" class="large link_button margin2">Export</a></div>
      <div class="grid-8"></div>

    </div>

<div class="grid">
    <div class="grid-24" id="export"></div>
</div>

The only parameter comes from URI segment (I am using codeigniter framework):

$reference = $this->uri->segment(3, 0);

Answer 1

I have found an answer that seems to work, and has resolved the issue. Posting it here in case anyone else has this specific problem like I did.

In brief: After spending hours looking at console debug output I have realised that each time I tried to send a request for export a new session would be opened. Without logging out of the previous one. And apparently that is a no-no. I do not know JS very well but from what I understood there was session id mismatch in request. Please feel free to correct me here :)

The solution to this problem (or for example if you are having authentication issues with visualize.js) is very simple. Set the authentication in global config:

visualize.config({
auth: {
    name: "superuser",
    password: "superuser"
}
});

No matter if you are using tokens or plain text or whatever else auth is available through the api.

Then do your stuff wherever else on your website:

visualize(function (v) {
v("#container1").report({
    resource: "/public/Samples/Reports/06g.ProfitDetailReport",
    error: function (err) {
        alert(err.message);
    }
});
 });

 visualize(function (v) {
   v("#container2").report({
    resource: "/public/Samples/Reports/State_Performance",
    error: function (err) {
        alert(err.message);
         }
    });
    });

Everything should work for you as it did for me. This works in version 5.6 and 6.1 of visualize.js.

Further reading and links from my research:

Token based authentication to Jasper reports failing when used with visualize.js

Visualize.js authentication error after second login

http://community.jaspersoft.com/questions/842695/visualizejs-authentication-error

http://community.jaspersoft.com/questions/845886/authentication-error-refresh-credentials-visualizejs

Code example (5.6): http://jsfiddle.net/TIBCO_JS_Community/sozzq0sL/embedded/

Api samples (6.1): http://community.jaspersoft.com/wiki/visualizejs-api-samples-v61

Api samples (5.6): http://community.jaspersoft.com/wiki/visualizejs-api-notes-and-samples-v56

Really hope this will help someone new to Jaspersoft & visualize.js like me.