2

I am trying to implement a combobox on a form that have his select fields loaded in ajax.

I want to call :

$('.combobox').combobox();

When a new combobox is ready.

Currently, I put this in my ajax response :

<script type="text/javascript">
  $(document).ready(function() {
    $('.combobox').combobox();
  });
</script>

This works but looks bad in term of resources. So I was looking for a better way to handle ready events.

I tried :

 $('.combobox').live('ready', function() {
     $(this).combobox();
 });

But read later that live() does not support ready event.

Then, I tried :

    $('body').delegate('.combobox', 'ready', function() {
        $(this).combobox();
    });

But it doesn't work too.

So here is the question: what is the best way to handle current and future ready events on a selector in jquery?

Alain Tiemblo
  • 36,099
  • 17
  • 121
  • 153
  • 2
    Have you considered calling the combobox function on success of the ajax call? Or you want this to be a universal solution for multiple combo boxes I presume. – jholloman Oct 17 '12 at 14:20
  • 2
    There is only one ready event, and it is fired on the `document` node only. No other element will ever receive one. – lonesomeday Oct 17 '12 at 14:21
  • This appears to be covered thoroughly here: http://stackoverflow.com/questions/3196404/jquery-live-with-the-ready-or-load-event – Patrick Moore Oct 17 '12 at 14:21
  • Yes, this solution works, but there's a lot of ajax calls and it looks bad to call the combobox all times. An unique handler should be better. – Alain Tiemblo Oct 17 '12 at 14:22
  • @SetSailMedia I already seen this answer but I would prefer not to use a jquery plugin. A native way would be surer (I'm afraid some plugins are not cross browsers). This combobox plugin is given by jquery.ui so I'm about sure it is. – Alain Tiemblo Oct 17 '12 at 14:24
  • @Ninsuo What jquery plugin are you referring to? `.ready` is not a jQuery plugin, it is built into the core and works cross-browser. – Kevin B Oct 17 '12 at 14:27
  • @Ninsuo I did not get that as what you were going after with your question, though my answer is still relevant. I explained why in the comments. Including the script in the ajax call uses FAR less resources than it would if you were using any of the alternatives. – Kevin B Oct 17 '12 at 14:35
  • Yes I understand, we wrote our comments simultaneously, so didn't seen your explaination. Thank you. – Alain Tiemblo Oct 17 '12 at 14:41

1 Answers1

3

There is no reason to bind the ready event to anything other than the document.

In fact, jQuery takes any other selector that you place before .ready and ignores it.

There is a built-in promise object for .ready that you can use with .done() as an alternative.

$.ready.promise().done(function(){
    $('.combobox').combobox();
});

or you could simply use

$(function(){
    $('.combobox').combobox();
});

or

$(document).ready(function(){
    $('.combobox').combobox();
});

The benefit of the promise version is you can use it like this:

$.when( $.ready, $.post("foobar.php") ).done(function() {
    $(".combobox").combobox();
})
Kevin B
  • 94,570
  • 16
  • 163
  • 180
  • Yes, I already do your last example, but I'm looking for a way to automatically call `$('.combobox').combobox();` when new `.combobox` are created, without giving `` on my ajax outputs. Is it possible? – Alain Tiemblo Oct 17 '12 at 14:30
  • @Ninsuo Yes, anything is possible, the question is how many hoops do you want to jump through to make it work. You could use a setInterval that periodically checks for new comboboxes and initializes them. You could use the ajaxComplete global ajax event to initialize new comboboxes. You could even use DOMMutationEvents. However, all of those examples are inefficient and not recommended. – Kevin B Oct 17 '12 at 14:32
  • Okey, thanks for explainations. I thought it would be possible to do such stuffs like I already do using `delegate` with `click`, `keyup`, `change` and so on events. – Alain Tiemblo Oct 17 '12 at 14:35