Question

I have the following code working nicely:

    $field2.on("change", "#selector", function(){
        $field2.load("./index.php?show-options=true", { value: $(this).val() }, function() {
        $("#options").buttonset();
        });
    });     

It loads the #options div and applies button to anchor tags within it.

Is there a way to declare

$("#options").buttonset();

BEFORE the #options div is loaded?

I looked through jQuery docs with no success, and also found this answer:

Apply jQuery UI widgets to ajax loaded elements

which I think might be on track, but haven’t understood it fully nor managed to implement.

Help appreciated, thanks.

Answer 1

Doing the following:

$field2.on("change", "#selector", function(){
    $field2.load("./index.php?show-options=true", { value: $(this).val() }, function() {
      $field2.find("#options").buttonset();
    });
});

Will make all option elements within $field2 into a button set (once the content has been updated).

Or alternatively you could make the button set on dom ready:

$(function() { $("#options").buttonset(); });

Update

jQuery selectors work on elements in the DOM (unless given a context), if the element is not in the DOM then unfortunately jQuery will not be able to affect it directly. If the load then call to buttonset is causing a FOUC (flash of unstyled content), you could try the following:

$field2.on("change", "#selector", function() {
    $field2.empty();
    $.get("./index.php?show-options=true", { value: $(this).val() }, function(data) {
      var newContent = $(data);
      $("#options", newContent).buttonset();
      $field2.empty().append(newContent);
    });
});