How to position an element using jQuery UI .position method?

Question

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

Answer 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.