Access a jquery widget from JavaScript

Question

I'm using a jquery widget similar to the example provided by jQuery UI for comboboxes:

http://jqueryui.com/demos/autocomplete/#combobox

This combobox decorates a select like this:

$('select[name=myselect]').combobox();

Now in some other piece of logic, I'd like to change the select, including all of its contents:

$('select[name=myselect]').empty();
$('select[name=myselect]').append(
  $('select[name=otherselect]').children().clone());
$('select[name=myselect]').val('new-value');

Now how can I get the combobox to re-render?

Ali Habibzadeh · Accepted Answer · 2011-07-20 15:01:50Z

1

Sorry I just checked and the widget seem to have its own change event:

click view source here to see the complete example

change: function( event, ui ) {
                            if ( !ui.item ) {
                                var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ),
                                    valid = false;
                                select.children( "option" ).each(function() {
                                    if ( $( this ).text().match( matcher ) ) {
                                        this.selected = valid = true;
                                        return false;
                                    }
                                });
                                if ( !valid ) {
                                    // remove invalid value, as it didn't match anything
                                    $( this ).val( "" );
                                    select.val( "" );
                                    input.data( "autocomplete" ).term = "";
                                    return false;
                                }
                            }
                        }

edited Jul 20, 2011 at 15:01

answered Jul 20, 2011 at 14:51

Ali Habibzadeh

11.6k4 gold badges56 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ali Habibzadeh Over a year ago

Can't you put all that stuff you call under the change function in a separate function and call that function in the change event?

Lukas Eder Over a year ago

I'm sorry about the confusion. Maybe this question is not clear enough. The combobox is rerendered, but the selected option (in the input variable) stays the same...

Lukas Eder Over a year ago

I found a solution to my problem. It's not very beautiful, but it works for now, see my own answer

Lukas Eder · Accepted Answer · 2011-07-20 15:29:27Z

I found a solution to my problem by extending the aforementioned combobox control. XGreen's first suggestion using

$('.selector').live("change", ...)

didn't work because the change event is not triggered when modifying a select using .val() (at least not in jquery 1.4.4. Upgrading is not possible right now)

Hence, I added this code to the combobox's construction:

select.observe_field(1, function() {
  var selected = select.children(":selected");
  var value = selected.val() ? selected.text() : "";

  input.val(value);
});

Where observe_field is some not soo efficient function found on the web:

jQuery.fn.observe_field = function(frequency, callback) {
  return this.each(function(){
    var element = $(this);
    var prev = element.val();
    var chk = function() {
      var val = element.val();
      if(prev != val){
        prev = val;
        element.map(callback); // invokes the callback on the element
      }
    };
    chk();
    frequency = frequency * 1000; // translate to milliseconds
    var ti = setInterval(chk, frequency);
    // reset counter after user interaction
    element.bind('keyup', function() {
      ti && clearInterval(ti);
      ti = setInterval(chk, frequency);
    });
  });
};

Better solutions are still very welcome!

Collectives™ on Stack Overflow

Access a jquery widget from JavaScript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related