By aruntvla on

Hello Friends,

i have added a new media field to user profile , when i access this field in user profile form its not working . this field is working in admin side and displaying media browser pop-up. i dont know whether its due to my custom theme .

following are the Jquery errors showing when page load and media button click ,

TypeError: j is undefined
[Break On This Error] 	

...moveChild(v)}},nodeName:function(j,s){return j.nodeName&&j.nodeName.toUpperCase(...
TypeError: this.hoverable is undefined
[Break On This Error] 	

this.hoverable.removeClass( "ui-state-hover" );

code to display the field is :

<div class="checkboxfirst"><?php print render($form['field_upload_youtube_video']); ?></div>

the loaded javascript files are :

⋅ Categories: Drupal 7.x

Comments

imranweb’s picture

imranweb commented

Are you using higher jQuery version to custom theme?
There might be JS conflict issue.

-Imran

aruntvla’s picture

aruntvla commented

these are the javascript files loaded in header section , this jquery version included with drupal 7 , its not the latest jquery library , plz have a look on it.

  <script type="text/javascript" src="http://192.168.0.156:8022/LifeEcho/misc/jquery.js?v=1.4.4"></script>
<script type="text/javascript" src="http://192.168.0.156:8022/LifeEcho/misc/jquery.once.js?v=1.2"></script>
<script type="text/javascript" src="http://192.168.0.156:8022/LifeEcho/misc/drupal.js?mh4pzy"></script>
<script type="text/javascript" src="http://192.168.0.156:8022/LifeEcho/misc/ui/jquery.ui.core.min.js?v=1.8.7"></script>
<script type="text/javascript" src="http://192.168.0.156:8022/LifeEcho/misc/ui/jquery.ui.widget.min.js?v=1.8.7"></script>
<script type="text/javascript" src="http://192.168.0.156:8022/LifeEcho/sites/all/modules/media/js/media.core.js?v=7.x-1.2"></script>
<script type="text/javascript" src="http://192.168.0.156:8022/LifeEcho/sites/all/modules/media/js/util/json2.js?v=7.x-1.2"></script>
<script type="text/javascript" src="http://192.168.0.156:8022/LifeEcho/sites/all/modules/media/js/util/ba-debug.min.js?v=7.x-1.2"></script>
<script type="text/javascript" src="http://192.168.0.156:8022/LifeEcho/misc/ui/jquery.ui.mouse.min.js?v=1.8.7"></script>
<script type="text/javascript" src="http://192.168.0.156:8022/LifeEcho/misc/ui/jquery.ui.resizable.min.js?v=1.8.7"></script>
<script type="text/javascript" src="http://192.168.0.156:8022/LifeEcho/misc/ui/jquery.ui.draggable.min.js?v=1.8.7"></script>
<script type="text/javascript" src="http://192.168.0.156:8022/LifeEcho/misc/ui/jquery.ui.button.min.js?v=1.8.7"></script>
<script type="text/javascript" src="http://192.168.0.156:8022/LifeEcho/misc/ui/jquery.ui.position.min.js?v=1.8.7"></script>
<script type="text/javascript" src="http://192.168.0.156:8022/LifeEcho/misc/ui/jquery.ui.dialog.min.js?v=1.8.7"></script>
<script type="text/javascript" src="http://192.168.0.156:8022/LifeEcho/misc/form.js?v=7.19"></script>
<script type="text/javascript" src="http://192.168.0.156:8022/LifeEcho/sites/all/modules/custom_alter/custom_alter.js?mh4pzy"></script>
<script type="text/javascript" src="http://192.168.0.156:8022/LifeEcho/sites/all/modules/fbconnect/fbconnect.js?mh4pzy"></script>
<script type="text/javascript" src="http://192.168.0.156:8022/LifeEcho/sites/all/modules/video/js/video.js?mh4pzy"></script>
<script type="text/javascript" src="http://192.168.0.156:8022/LifeEcho/sites/all/themes/lifeecho/js/jquery-ui.js?mh4pzy"></script>
<script type="text/javascript" src="http://192.168.0.156:8022/LifeEcho/misc/textarea.js?v=7.19"></script>
<script type="text/javascript" src="http://192.168.0.156:8022/LifeEcho/sites/all/modules/date/date.js?mh4pzy"></script>
<script type="text/javascript" src="http://192.168.0.156:8022/LifeEcho/sites/all/modules/media/js/media.popups.js?v=7.x-1.2"></script>
<script type="text/javascript" src="http://192.168.0.156:8022/LifeEcho/sites/all/modules/media/js/media.js?mh4pzy"></script>
<script type="text/javascript" src="http://192.168.0.156:8022/LifeEcho/modules/user/user.js?mh4pzy"></script>
aruntvla’s picture

aruntvla commented

I have enabled core bartik theme its working fine , the issue is related with my custom theme 'lifeecho'.

This is the diffchecker link http://www.diffchecker.com/37Cyvhyw

aruntvla’s picture

aruntvla commented

The following function done the trick

/**
* Implementation of hook_js_alter().
*
* Swap out jQuery-ui to fix the media library issue from user profile page.
*/

function custom_alter_js_alter(&$javascript) {
if(arg(0) == 'user' && arg(2) == 'edit') { // check page is user edit profile page
unset($javascript['sites/all/themes/lifeecho/js/jquery-ui.js']);
}
}

knalstaaf’s picture

knalstaaf commented

I had the same error with the Media module and the default Seven admin theme in Drupal (TypeError: this.hoverable is undefined). Switching the jQuery version of the administration pages to 1.7 solved the issue.

hyperlinked’s picture

hyperlinked
he/him
Location San Jose, CA
commented

I ran into the same issue, but curiously enough, I'm only able to fix the problem by switching to a version below 1.7. Unfortunately, I need to stay above 1.7.

What I found was that jquery.ui.widgets and jquery.ui.tabs were not loading for some reason. By adding those in and switching the jquery.ui.tabs.css file back to the default version, I was able to get my media browser working again. It worked in jQuery 1.10.1, but I found smoother results by also reverting jQuery back to 1.4.4.

Be aware that this would leave you with versions of jQuery and jQuery UI widgets that aren't compatible so you would want to target this workaround as narrowly as possible. I did it by using the following code in a custom module. 

function hook_css_alter(&$css) {
  $path = current_path();

  if ($path == 'media/browser') {
    foreach ($css as $key => $arr) {
      if (preg_match('/jquery\.ui\.tabs\.css/', $key)) {
        $css[$key]['data'] = 'misc/ui/jquery.ui.tabs.css';
      }
    }
  }
}

function hook_js_alter(&$js) {	
  $path = current_path();
  
  if ($path == 'media/browser') {
    foreach ($js as $key => $arr) {
      if (preg_match('/jquery\.min\.js/', $key)) {
        $js[$key]['data'] = '/misc/jquery.js';
        $js[$key]['version'] = '1.4.4';
      }
    }
    drupal_add_js('/misc/ui/jquery.ui.widget.min.js');
    drupal_add_js('/misc/ui/jquery.ui.tabs.min.js');
  }
}
aanjaneyam’s picture

aanjaneyam commented

I have this problem too. In my case the situation is strange. When I create a content of a type with few image fields in it configured to use media file selector, the modal pops up only for first image browse and upload and then not. Meaning when I click browse button (media file selector) for the first time after visiting node/add/content-type-name the modal pops up and I can do things normally. However when I go on to add more images (by clicking browse button second time) in other image fields of the same content the page refreshes and take me to the top of the page- it does not open modal pop up and throws a js error described above in this issue. If I save the page then and there and then re edit the page I can add the second image (that is one image at a time before saving and re-editing the content). It works as expected with jquery version 1.7 for admin pages with jquery update. But jquery 1.7 breakes many things on admin pages like expanding collapsed fieldsets in several places like rules so need 1.5 for admin pages but this breaks media browser... I intend to use (and using currently) 1.10 for front end theme zurb-foundation 5.x which requires 1.10 and want to use 1.5 for admin pages,

I tried hyperlinked solution but it does dothing.