Why is tableTools making multiple calls to the same SWF file?

Question

I happened to notice in my application that the copy_csv_xls_pdf.swf is getting called three times when datatables/tabletools are invoked. I put together a jsfiddle which (sometimes) illustrates the issue:

The same behavior can be observed from the TableTools documentation:

This behaviour is particularly problematic because the intial load of the file doesn't seem to be cached by the browser for the subsequent loads during that same request.

There seems to be a request to this file for each button that is "powered" by the SWF.

Still, why is this file getting loaded multiple times? Is it necessary? How can it be prevented (while still providing the same functionality)?

Ignore the following unnecessary code....

---

...which is only provided so that SO will allow me to include the link to the jsfiddle:

$('#browser_data').dataTable({
    "bPaginate": false,
    "bAutoWidth": false,
    "bLengthChange": false,
    "sDom": "<'row-fluid'<'span6'f><'span6'<'pull-right'T>>r>t",
    "oTableTools": {
        "aButtons": [ "copy", "xls", "pdf" ],
        "sSwfPath": "http://datatables.net/release-datatables/extras/TableTools/media/swf/copy_csv_xls_pdf.swf"
    }
});

Answer 1

Google Chrome

Here is a snippet of the request headers -- the headers are the same whether I hard-refresh or just refresh:

:host:datatables.net
:method:GET
:path:/release-datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf
:scheme:https
:version:HTTP/1.1
accept:*/*
accept-encoding:gzip, deflate, sdch
accept-language:en-US,en;q=0.8,sw;q=0.6
cache-control:no-cache
cookie:

Do you see cache-control:no-cache? This seems to suggest that caching is explicitly turned off when making these requests. Every refresh shows status 200 for each request ... never do I see 304.

And as far as the 304 statuses in your screenshot are concerned it's important that they are 304, 304, 304 and not 200, 304, 304. This would suggest that each request is unique in some way other than URL-wise and therefore each has to be explicitly cached. Let's see if that's a correct hypothesis ....

Mozilla Firefox

Here is the procedure I followed to run some tests:

• set caching very on by setting cache limit to .34GB
• loaded the pages: and refreshed and noted results
• reproduced results by hard-refreshing followed by a refresh

Here are the results -- one status for each button:

• Initial Loading Statuses: 200, 200, 200, 200
• Refresh: 304, 304, 304, 304
• Hard Refresh: 200, 200, 200, 200
• Refresh after Hard Refresh: 304, 304, 304, 304

Considering the buttons are not exactly the same, even though the .swf URL is the same, wouldn't this make perfect sense? The same URL giving rise to a different button each time! Could there be some sort of signature to differentiate the requests for each button? This is the behavior of dynamic content -- same URL different content.

One final test:

I turned off caching -- set cache limit to 0 and the results are:

• Hard Refresh: 200, 200, 200, 200
• Refresh: 200, 304, 200, 200

Conclusions

1. Each button content is cached. That's why even when there's enough disc space allotted to caching initial page load and hard refreshes show 200, 200, 200, 200 and not 200, 304, 304, 304.
2. Whether these buttons would be cached is a function of your browser settings: if caching is on and how much space is allotted to caching.
3. Quite likely 200, 304, 200, 200 may suggest that there was not enough disc space to cache Copy button, but was just what CSV button needed, and there was nothing left to cache Excel and PDF buttons.

Answer 2

In your case (your jsfiddle), you have used 3 buttons : copy, save as excel and save as pdf. The script (TableTools) is duplicating the swf used (copy_csv_xls_pdf.swf) 3 times, one for each button, because it's used to copy content every time. The swf is a ZeroClipboard instance which known as good idea to copy data because flash can access to system clipboard which is not the case for browsers. Of course, with TableTools documentation the demo is using 4 buttons : copy, save as csv, save as excel and save as pdf, that's why it loaded 4 instances of the swf, take a look in the html code :

<a class="DTTT_button DTTT_button_copy" id="ToolTables_example_0" tabindex="0" aria-controls="example">
    <span>Copy</span>
    <div style="position: absolute; left: 0px; top: 0px; width: 47px; height: 32px; z-index: 99;">
        <embed id="ZeroClipboard_TableToolsMovie_1" src="/release-datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="47" height="32" name="ZeroClipboard_TableToolsMovie_1" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&amp;width=47&amp;height=32" wmode="transparent">
    </div>
</a>
<a class="DTTT_button DTTT_button_csv" id="ToolTables_example_1" tabindex="0" aria-controls="example">
    <span>CSV</span>
    <div style="position: absolute; left: 0px; top: 0px; width: 43px; height: 32px; z-index: 99;">
        <embed id="ZeroClipboard_TableToolsMovie_2" src="/release-datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="43" height="32" name="ZeroClipboard_TableToolsMovie_2" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=2&amp;width=43&amp;height=32" wmode="transparent">
    </div>
</a>

<a class="DTTT_button DTTT_button_xls" id="ToolTables_example_2" tabindex="0" aria-controls="example">
    <span>Excel</span>
    <div style="position: absolute; left: 0px; top: 0px; width: 48px; height: 32px; z-index: 99;">
        <embed id="ZeroClipboard_TableToolsMovie_3" src="/release-datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="48" height="32" name="ZeroClipboard_TableToolsMovie_3" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=3&amp;width=48&amp;height=32" wmode="transparent">
    </div>
</a>

<a class="DTTT_button DTTT_button_pdf" id="ToolTables_example_3" tabindex="0" aria-controls="example">
    <span>PDF</span>
    <div style="position: absolute; left: 0px; top: 0px; width: 43px; height: 32px; z-index: 99;">
        <embed id="ZeroClipboard_TableToolsMovie_4" src="/release-datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="43" height="32" name="ZeroClipboard_TableToolsMovie_4" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=4&amp;width=43&amp;height=32" wmode="transparent">
    </div>
</a>

EDIT :

After re-reading your question and your comments, I didn't know if you wanted to know why the page is loading n instances of the swf or how to avoid that ? If It's the first case, I put what I saw as an explanation for that, else I think that TableTools developers may optimize their code, and I don't know if it's really possible or not, by minimizing the embedded swf objects.