1

I'm going on about 20 hours trying to get jQuery UI to work, and fortunately, I'm still not frustrated. I just really want it to work. I would like to use the .position method to position an element in the top right corner relative to #page, (http://api.jqueryui.com/position/).

I'm not sure which version of jQuery this method requires, so I'm using the newest version, 1.10.2. It wasn't so hard to implement. I'm using the jQuery Multi module, and my script uses the alias as per instructions. (I tried using the jQuery Update module, but that just seemed to break everything, so I found jQuery Multi).

This part seems to be working. The file, jquery-1.10.2.min.js, shows up in the head of my HTML parallel to Drupal 7's 1.4.4 version. I'm getting an alert message when I write a test alert so it seems to be finding the function. If I delete the jquery-1.10.2.min.js file, the alert quits working and when I add it back it works again, (after clearing caches).

I've added the jquery.ui.core and jquery.ui.position libraries from Drupal core (both versions are 1.8.7) using drupal_add_library() in a preprocess page function. Like this...

function marigold_zen_preprocess_page(&$variables, $hook) {
  /* Add jQuery UI libraries - http://jqueryui.com/ */
  drupal_add_library('system', 'ui');
  drupal_add_library('system', 'ui.position');
}

Both of these files show up in the head of my HTML also.

Now I add the code to test out positioning the submit button in the top right corner of the page...

(function ($, Drupal, window, document, undefined) {
  $(document).ready(function() {
  //  alert("This is working");
    $( "#edit-submit" ).position({
      my: "right top",
      at: "right top",
      of: "#page"
    });
   });

})(jq1102, Drupal, this, this.document);

Nothing happens, and I get no errors in the console. Nothing is positioned differently. Again, if I uncomment the alert, it shows when I refresh the page, so I think that means that it's reading the function, yes?

If anyone can help me out here, I'd be so incredibly grateful. I was up till past 4am yesterday, woke up about 8am, and I've been at it all day again today. It's nearly dinner time, and I'm still stuck.

P.S. - Drupal 7.24

  • 1
    Have you tried putting other simple jQuery functions with your object instead of position like $('#edit-submit').hide(); to see if it recognizes your submit button? Drupal often adds a lot of ids to different objects on the page which might confuse jQuery... check in firebug if your submit button has any other ids? – longboardnode Dec 13 '13 at 2:45
  • Okay, we're getting somewhere. Thank you. Yes, I can hide a div (#edit-body) using the fade effect. So I would think it's in my targeting. However, I tried using #edit-body, replacing the #edit-submit from the example above, and I get no positioning effect. – mlanning Dec 13 '13 at 3:17
  • I can get #edit-submit to hide using $('#edit-submit').hide(); ... So I'm very curious what it could be now. I've tried using versions 1.10.2, 1.9.1, and 1.8.3 of jQuery just to see if it was a version issue. No luck. I've double and triple checked the code. It seems to be what the documentation says it should be. What is missing here? – mlanning Dec 13 '13 at 6:20
1

I think the problem is that you need to also load the UI libraries using the newer jQuery version. jQuery UI is a jQuery plugin, so it attaches to jQuery itself. Within your function $ refers to jQuery 10, while the UI plugin is loaded for Drupal's jQuery.

To fix this you have to use jQuery Multi to also load the libraries with the newer jQuery. You can use hook_jqmulti_files():

function mymodule_jqmulti_files() {
  return array(
   'path/to/file.js',
   'another/full/file/path.js',
  );
}

You'll need to specify the file paths, which you can put together using drupal_get_path() or get using drupal_get_library(). Once you do that jQuery Multi will automatically load those files in the newer jQuery context and then .position should be available to you in your function.

  • This is something I certainly hadn't thought of or tried. Using the above code doesn't seem to add the ui files though. Here's what I have, maybe you can see something I'm doing wrong? I put this in my theme's preprocess page function... function marigold_zen_jqmulti_files() { return array( libraries_get_path('jquery-ui') . '/ui/minified/jquery-ui.min.js', array('group' => JS_THEME, 'every_page' => TRUE), libraries_get_path('jquery-ui') . '/ui/minified/jquery.ui.position.min.js', array('group' => JS_THEME, 'every_page' => TRUE), ); } – mlanning Dec 17 '13 at 17:39
  • Sorry, I'm not sure how to get that comment in a code block. The instructions here say to indent four spaces, but that didn't seem to work. – mlanning Dec 17 '13 at 17:41
  • That hook doesn't add the files, it just says, if those files are added, target them to the newer jQuery. You still need to add the files yourself like you were doing in your preprocess_page. And it doesn't take the 'group' argument. This is explained in the README and API doc. – goron Dec 17 '13 at 17:50
  • The files I'd like to add are... sites/all/libraries/jquery-ui/ui/minified/jquery-ui.min.js and sites/all/libraries/jquery-ui/ui/minified/jquery-ui.position.min.js . Using libraries_get_path worked when I added it through drupal_add_js, but when I tried using hook_jqmulti_files() it didn't. – mlanning Dec 17 '13 at 17:56
  • 1
    No, hook_jqmulti_files() is a php function, so should not be in the javascript at all. It needs to be in a module. You need to create a custom module and implement the theme in there. If you don't want to write a custom module you could also use the jqmulti UI, but for this the files (for now) have to be in sites/all/libraries. You can download the ui files you need and place them there, and then select them to be targeted using the jQuery Multi UI. – goron Dec 18 '13 at 1:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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