Ajax callbacks in the media overlay cause the active tab to switch tab unexpectedly

#3 links is to this same issue

Also related #1551376: YouTube Tab: When apply searching, next or previous button it does not retain tab when loading result

In media_youtube: #1551376-7: YouTube Tab: When apply searching, next or previous button it does not retain tab when loading result @Aaron added a solution for the tab provider.

In #1551376-8: YouTube Tab: When apply searching, next or previous button it does not retain tab when loading result I added comment for the 'refresh' flow copied here as Media should keep the tab state.

Media must manage the Tab state like this:

(http://stackoverflow.com/questions/4299435/remember-which-tab-was-active...)

 # javascript
$(".tabs").tabs({
    select: function(event, ui) {                   
       window.location.hash = ui.tab.hash;
    },
});

I'm not sure we need setter and getter as we have set the #fragment as above. Is that #fragment kept when submitting through one of the tab forms? I haven't found any jQuery UI Tab related javascript.

(http://api.jqueryui.com/tabs/#option-active)

 #javascript
// getter
var collapsible = $( ".selector" ).tabs( "option", "collapsible" );
// setter
$( ".selector" ).tabs( "option", "collapsible", true );

Attached patch solve this for a few tabs which triggers media_form_alter.

It works for media_youtube Search button. Not for #1551376: YouTube Tab: When apply searching, next or previous button it does not retain tab when loading result

It fails for Library or My files as the hook_form_alter is not involved for those page.

It needs more work but I need a review :)

Patch from #6 works nicely.

Tested against:
- Upload (it is the first tab after all)
- YouTube
- Web
- Remote URL
- Library
- My files

Just tested the patch in #6 and everything seems to work correctly. Great job!

Hm... I'm unable to reproduce this issue on latest -dev. Can anyone help me? Do I have to do anything special to see this error?

@slashrsm - You can see the problem when you have the media_youtube module installed. On the youtube tab in the media browser try to search for something. The mediabrowser iframe will reload, but the tab will no longer be on the youtube tab it will be on the upload tab.

This patch solves the problem by keeping the user on the youtube tab after searching.

Hope that helps.

Great job!

As already mentioned in #6 it fixes media_youtube, but it does not fix views pager if not using AJAX (Library, My files, ...). I'm wondering if there exists any other, more general solution....

Here is another tab-related issue #1934226: Hide tabs when plugins are on step > 1.

Tnx for testing.

Regarding non ajax views: @slashrsm you are right this should be more general. Maybe we could intercept at the plugin level? I could use some hints.

@bneil thanks for the XREF.

Tagging UX

This iss the patch for the current "2.0-unstable7" Version. Useful for drush make or so.

we could use a cookie and be done with it..it would work on all occasions

Testing on unstable7 instead.

#15: media-1802026.15.patch queued for re-testing.

Here's a similar but improved solution, that stores the currently active tab in the Drupal.media var.

Added so that when the active tab is selected the resizing works as expected.

While investigating this patch, before I applied it, I tested the original issue and could not reproduce the bug with the library pagers.

Installing the first, media-unexpected-tabs-1802026-6.patch, worked. But it did not resolve the problem. Installing any of the other patches after that seemed to have an issue with the existing code. I went back and downloaded the module (7.x-2.0-unstable7) again and reinstalled so I can try this again. Then I installed just the last patch, media-browser-ajax-active-tab-issue-1802026-23, without an error. But it doesn't appear to return to the same tab when submitted.

Do I need to apply all the patches in this thread for the issue to get resolved?

Tested patch on #23 using the current media_dev distribution and it worked as expected.

Committed #23 to 7.x-2.x: http://drupalcode.org/project/media.git/commit/83d93ab. Thanks everyone!

We should probably look if this needs to be backported to 7.x-1.x as well.

I just tried this with media 2.0-alpha1 and media_youtube-2.0-rc3. For me the patch doesn't work at all. Watching the variable Drupal.media.browser.activeTab revealed that it is always set to 0 when loading the form - regardless of which tab I select.

It's the non-ajax part (see #6 or #15) that's still unsolved.

for the non-ajax part a $.cookie would be needed to be set
this is something i have used for a client project in an attach method:

     $('#media-browser-page form', context).submit(function () {
        $.cookie('mediaBrowserActiveTab', $('li.ui-tabs-selected a').data('tabid'));
      });
      $('#media-browser-page form input[type="submit"]', context).mousedown(function () {
        $.cookie('mediaBrowserActiveTab', $('li.ui-tabs-selected a').data('tabid'));
      });
      // Use jquery cookie to guess the default tab.
      if ($.cookie('mediaBrowserActiveTab')) {
        $('li a[data-tabid="' + $.cookie('mediaBrowserActiveTab') + '"]', context).click();
      }

Here is a patch that keeps the page using the window.location.hash. It works with AJAX as well as without.

+It makes the selectErrorTab function obsolete.

Here is the same patch for 7.x-1.x.

This works for me.

The patch in #31 above fixed the issue with Media 7.x-2.0-alpha2 for me.

Patch no longer applies to 2.x-dev

Here's a re-roll of the patch. Now also works with jQuery-UI >= 1.10.

Let's see how many RTBCs and re-rolls this needs before it gets in.

Yet another re-roll.

The latest patch (#42) doesn't work in the latest 7.x-2.x-dev release. That is, after applying the patch, when I get the popup and select the library, clicking the next button (pager item) sets the upload tab (for me anyway - seems it could be any tab for others) as the active tab.

In short, no difference before or after the patch.

UPDATE: In playing with it, it seems it's not returning the index and resorts to '0'. For my personal use, I've set it to the index I need. I found this near line 49 (after patch #42) here: "Drupal.media.browser.tabFromHash = function () {"

I got a patch working for the settings of jquery update I'm using and the alpah3, which may illustrate why some people are having issues with this patch

window.location.hash doesn't work cross browser; I was completely unable to get it to work in chrome, was always empty.

ui.tab is not set in some jquery ui versions, it's like nextTab, but might as well use a selector if possible.

I changed it to store the tab info in an attr, after trying various things including jquery.data and having none of them persist. I think that is a bad idea but works.

the patch no longer applies to dev media.

Here's a reroll which applies to the latest 7.x-2.x code. Seems to work (based on light testing).

this patch works well. thanks!

Patch in #47 work really well. It also handles jQuery <1.9 and >=1.9 and jQuery UI < 1.8 and >= 1.8

Committed to http://drupalcode.org/project/media.git/commit/b534d3e.