CODEWITHSUNDEEP
javascriptjqueryjquery-ui
ian
ian

Reputation: 12251

JQuery: dialog doesn't fire autocomplete

I'm using the http://docs.jquery.com/UI/Dialog and http://docs.jquery.com/UI/Autocomplete with JQuery 1.7.2 and JQuery-UI 1.8.18.

There is a form with a text box, which will fire the autocomplete fine when loaded in the page as normal. It's nice and simple!

(function() {

  jQuery(function($) {
    return $("#type").autocomplete({
      source: "/auto-suggest/supplies",
      minLength: 2
    });
  });

}).call(this);

However, if the form is rendered via a dialog the autocomplete does not fire (no UI changes, and the server shows no access to the source url). I'm assuming this is because the input field has not been rendered at document load. So, I tried to use dialog's create event to assign the autocomplete, by passing the function to it as a callback. Again, the autocomplete does not fire.

I'm mystified as to how to get this to work. I would be tempted to get the dialog to create and then hide on document load, but in this instance there could be several instances of the dialog as it's related to table data.

Any help with this will be much appreciated.

Upvotes: 1

Views: 847

Answers (3)

Eraden
Eraden

Reputation: 2858

Try delegate

Delegate autocomplete

BEST SOLUTION IS WROTE BY: ManseUK

Upvotes: 1

Manse
Manse

Reputation: 38147

Try using open event - this will ensure that the DOM elements are ready

$( ".selector" ).bind( "dialogopen", function(event, ui) {
  $("#type").autocomplete({
      source: "/auto-suggest/supplies",
      minLength: 2
  });
});

Upvotes: 3

mprabhat
mprabhat

Reputation: 20323

You can even get the values and then in the success call dialog

$.get('/auto-suggest/supplies', function(data) {
  //call dialog here
});

Upvotes: 1

Related Questions