Jacques
Jacques

Reputation: 1709

How to apply a class to the result of a jQuery ajax call?

I have tried finding an answer to this, but no success.

I have the following code:

jQuery("#categories_parent_id").change(function() {
            id = jQuery("#categories_parent_id").val();
            jQuery.ajax({
                type: "GET",
                url: 'index.php?option=com_jomdirectory&task=getselect&format=raw',
                dataType: "html",
                data: "id=" + id,
                success: function(data) {
                    jQuery('#selectlist').html(data);
                }
            });
        });

The ajax result select should have classes "form-control" and "chosen-select", and I tried adding them in the ajax view itself, but it does not style.

How would I go about adding the classes in question to the specific select after the ajax result?

Thanks

J

Upvotes: 1

Views: 646

Answers (2)

Alex Andrei
Alex Andrei

Reputation: 7283

Later edit, as @A.Wolff mentions you need to call the plugin on the newly added select element.

success: function(data) {
    jQuery('#selectlist').html(data).find('select').chosen();
}

Using .addClass()

success: function(data) {
    jQuery('#selectlist').html(data).addClass("form-control chosen-select");
}

Upvotes: 1

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

try to use .find() to find an element inside html data and then addClass() to it

jQuery('#selectlist').html(data).find('select').addClass('form-control chosen-select');

Upvotes: 1

Related Questions