1 (edited by Armorfist 2010-03-23 20:07:56)

Topic: Plupload with jquery ui tabs (v1.7)

Hello guys,

First of all, thanks for the excellent product. It works great!

Came here to ask if anyone has this problem:
When using jquery ui tabs, if I click the tab where the plupload widget is, add files, then click another tab, if i return to the plupload tab the queue list clears, like it loaded the widget all over again. Plus, if i then try to add more files, it doesn't list any on the browse dialog, just directories. If anyone has any clue, please help.

Thanks in advance.


2 (edited by marian 2010-03-23 21:13:34)

Re: Plupload with jquery ui tabs (v1.7)

Hi Frederico,

I had the same problem with jqueryUI dialogs,

I added in jquery.pupload.queue.js at the end
        if (settings==='destroy') {

            var currentUploaderID=$(this[0]).attr('id');
            var currentUploader=uploaders[currentUploaderID];
            renderUI(currentUploaderID, $(this[0]))

and in pupload.js
            removeAllFiles : function(file) {
                var i;

                for (i = files.length - 1; i >= 0; i--) {

and after the dialog becomes invisible I call


with that I "reset the queue",,,there are a few details missing but that's my solution.

PS: I think after the tab with the uploader is selected, you should do uploader.refresh();

PPS: if that doesn't work read here http://jqueryui.com/demos/tabs/#...my_s … .29_tab.3F

because you tabs become invisible by "display:none;" that creates some problems with flash

Re: Plupload with jquery ui tabs (v1.7)

Hey marian, thanks for the response.

That will reset the queue right? My problem is the opposite, i DON'T want to reset the queue.  I also read that display:none resets flash variables, hence the file filter malfunction, however, after using the "PPS" solution you suggested, it still doesn't work in firefox but solved the problem for Chrome and IE. I also tried uploader.refresh with no luck.

Getting really pissed off right now sad

Going to continue searching and testing, will post solution if i find one.


4 (edited by Armorfist 2010-03-24 13:25:13)

Re: Plupload with jquery ui tabs (v1.7)

Solved it! Its not pretty, but works. The problem here was display:none, and how Firefox handles it. So i used "visibility" combined with "height" instead.

Heres how I've done it:

The "Image" div tab, where the widget is supposed to be located, left it empty. I inserted the widget below that div with visibility: hidden:

<div id="flash_uploader" style="visibility:hidden;">Necessita de Flash para visualizar esta secção.</div>

Next, I show / hide this div and set its height and width when you click the "image" tab:
        //Show flash uploader widget and set width and height
    $('#tabs_tabs').bind('tabsshow', function(event, ui) {
        if (ui.panel.id == "tab_image") {
    //For everyother tab, hide it and set height 0
    $('#tabs_tabs').bind('tabsshow', function(event, ui) {
        if (ui.panel.id != "tab_image") {

Now it works in every browser. Hope this helps someone.


Re: Plupload with jquery ui tabs (v1.7)

I have similar trouble with UI dialog ..
in dialog div plupload is loaded twice..

Re: Plupload with jquery ui tabs (v1.7)

Oggy wrote:

I have similar trouble with UI dialog ..
in dialog div plupload is loaded twice..

It is cause by function appendTo in UI dialog .. beacuse it run js script of plupload twice.

Re: Plupload with jquery ui tabs (v1.7)

Thank you Armorfist