CODEWITHSUNDEEP
jqueryhtmllaravelfont-awesome
T B Duzijn
T B Duzijn

Reputation: 21

HTML tag inside jQuery

Every time I loop through this foreach, a dropdown gets set with database values. When a table has a value for name it keeps it's value when it is empty; it doesn't show anything. That's good. But every time a name is displayed, I want a FontAwesome icon in front of this.name. Example <i class="fas fa-car">. How do I get this HTML tag in-between text: and (this.name ? ?

processResults: function (data, params) {
    var results = [];
    jQuery.each(data, function () {
        results.push({
            id: this.id,
            text: (this.name ? this.name + ' ' : '')
                + (this.firstname ? this.firstname + ' ' : '')
                + (this.middlename ? this.middlename + ' ' : '')
                + (this.lastname ? this.lastname + ' ' : '')
                + ' (' + this.email + ')',
        });
    });
    return {
        results: results,
        pagination: {
            more: false
        }
    };
}

I got the question to put a bit of HTML in my question so here you go :)

<div class="form-group row">
    <label class="col-md-2 col-form-label" for="users">{{ trans('messages.receiver') }}</label>
    <div class="col-md-10">
        <select id="users" title="Search users" multiple class="form-control" name="user_ids[]"></select>
    </div>
</div>

Upvotes: 0

Views: 89

Answers (2)

T B Duzijn
T B Duzijn

Reputation: 21

The standard value of .select2 is that it can't display HTML tags.

You can overwrite this by adding:

escapeMarkup: function(markup) { return markup; },

at the top. This will overwrite it's value of not recognizing HTML tags.

Now you can add the wanted HTML code.

Upvotes: 1

Spoochy
Spoochy

Reputation: 321

You could also fix this problem with css You can add a fontawesome icon in front of the name with some css styling by using a before.

The link here is an old bookmark of mine, where you can find an example in the approved answer.

Use font awesome icon as CSS content

Upvotes: 0

Related Questions