JQuery Autocomplete popup does not appear after upgrading to jQuery 1.10.3 user interface

Question

In my Ruby on Rails application, I used jQuery UI 1.9.2 (via jquery-ui-rails ). I had an Autocomplete field in the Modal Dialog form that populated this dropdown with Ajax and Json. It worked correctly, showing me the right sentences.

Subsequently, I upgraded to jQuery UI 1.10.3 (using bundle update ), and now the Autocomplete popup list box no longer works. It does not show errors in the JavaScript console. In fact, this shows that the returned Json is correct.

I tried to rewrite the autocomplete function in JS to make a call manually (by calling Autocomplete source: $.ajax {} and nothing else.

I was suggested that the problem might be that jQuery changed something that caused the jquery-ui-rails stone to stop working, but after sending an error to them, it turns out that this is not a problem.

Any help would be appreciated.

NOTE to the answers:
mhu answer is correct and you should avoid faking z-Indexes where possible (so I marked it as correct). However, in my case (when the Autocomplete text box is in a modal dialog box), the drop-down list will be displayed only within the width of the dialog box (if the text is wider, it is hidden and you cannot use the scroll bar). Since I did not want this, I did what I described in my answer below, and it works. I made various comments and notes for myself to make sure that it still works after any jQueryUI update.

Answer 1

When using jQuery UI 1.10, you should not bother with z-indexes ( http://jqueryui.com/upgrade-guide/1.10/#removed-stack-option ). Just make sure the autocomplete element is in the correct DOM order with: autocomplete.insertAfter (dialog.parent ())

Example

  var autoComplete, dlg = $("#dialog"), input = $("#input"); // initialize autocomplete input.autocomplete({ ... }); // get reference to autocomplete element autoComplete = input.autocomplete("widget"); // init the dialog containing the input field dlg.dialog({ ... }); // move the autocomplete element after the dialog in the DOM autoComplete.insertAfter(dlg.parent()); 

Answer 2

After searching all over for this problem, I found that I did not have a solution to my problem, since I could not create any error messages, and the code that I showed was right. After someone suggested, I read the lists of jQuery changes (which admittedly I didn’t have), I found an error in jQuery, and also a workaround:

In jQuery UI 1.10.1 changelog in the Autocomplete section, it reads:

 Added: Use .ui-front instead of .zIndex() for the suggestions menu. (7d5fe02) 

After the link provided and looking at the jQuery code patch, I gave me an idea: I did my Autocomplete search and then moved the Modal Dialog to the side! This is when I noticed that the Autocoplete drop-down menu was behind the modal dialog.

I fixed this by adding the following CSS rule:

 ul.ui-autocomplete.ui-menu { z-index: 1000; } 

I sent the Bug ticket to jQuery, so I hope this will be covered in 1.10.4, so a workaround is no longer required.

I hope this helps others too.