0

I have followed tutorials such as this one and this one. At first glance they are quite simple as in how to add JQuery UI to Drupal 7. Nonetheless, when I apply them, all I get is that the function dialog is undefined. Here is what I have done:

template.php

function mytheme_preprocess_image(&$variables) {
  drupal_add_library('system','ui.dialog');  
}

chat_overlay.js

jQuery(document).ready(function(){
    console.log("*********************Setting up click");
    jQuery('#small_chat_wrapper #chat_message').click(function(){
       console.log("*********************CLICKED CLICKED");
     if (typeof jQuery.ui !== 'undefined')
        console.log("loaded");
     else
        console.log("undefined");
     jQuery('#chat_overlay').dialog('open'); 
 });
})

The console logs print out wonderfully, and the if check prints out loaded. Nonetheless, when it gets to the line of .dialog(..) the Undefined error occurs. I don't know what else to try. Such a simple thing and it's becoming painful.

Help is very much appreciated.

Edit:

The site's Status Report has the following:

jQuery Update jQuery 1.7.1 and jQuery UI 1.8.7

My MISTAKE:

Change function mytheme_preprocess_image(&$variables) to function mytheme_preprocess_page(&$variables) . Goodness.

Now the UNDEFINED ERROR NO LONGER happens, BUT, even though the ui classes and divs are getting added, the UI CSS is not coming through (the dialog does not pop up).

Really would appreciate some help.

4
  • Just checking... do you have an element with the ID "chat_overlay"?
    – scunliffe
    May 12, 2014 at 11:34
  • Ofcourse. As so: <div id="chat_overlay">...</div> and it has a style of "display:none;"
    – Chayemor
    May 12, 2014 at 11:36
  • Are you including the full jQuery UI library?... when downloaded it lets you pick which widgets you want... is there a chance you don't have dialog?
    – scunliffe
    May 12, 2014 at 11:38
  • Drupal 7 ships with Jquery UI by default, I never downloaded anything. "Since Drupal 7 ships with jQuery UI, the jQuery UI module has been deprecated and moved to the jQuery Update module."
    – Chayemor
    May 12, 2014 at 11:42

1 Answer 1

0

You should load the jquery library that you need either in the preprocess_html function of your template.php or in yourmodule_init hook like that:

<?php
  function yourmodule_init(){
    drupal_add_library('system', 'ui.dialog');
    drupal_add_library('system', 'ui.draggable');
    drupal_add_library('system', 'ui.sortable');
  }

?>

The source: https://www.drupal.org/node/1172846

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.