Jquery inline string - add bold to specific words

I have a jquery inline string that displays a dynamic line of text as shown below:

$( "#submit_buttonA" ).attr('update-confirm', '{% trans "Are you sure you want to change the language of the website from" %} ' + $('#id_language_code option[value=' + '{{ user.get_profile.language_preference }}' + ']').text() + ' {% trans "to" %} ' + $('#id_language_code option[value=' + newLanguageCode + ']').text() + '{% trans "?" %}');

      

This gives me the following:

Are you sure you want to change the language of the website from português (Brasil) to Italiano - italiano?

Now I'm trying to make the names of the languages ​​bold, but every approach I take renders <b> </b> to the screen.

This is what I am trying to achieve:

Are you sure you want to change the language of the website from português (Brasil) to Italiano - italiano ?

So, I tried the following:

$( "#submit_buttonA" ).attr('update-confirm', '{% trans "Are you sure you want to change the language of the website from" %}<b> ' + $('#id_language_code option[value=' + '{{ user.get_profile.language_preference }}' + ']').text() + '</b> {% trans "to" %}<b> ' + $('#id_language_code option[value=' + newLanguageCode + ']').text() + '</b>{% trans "?" %}');

      

This is what I get:

Are you sure you want to change the language of the website from <b> português (Brasil) </b> b> Italiano - italiano </b>?

EDIT: Added code as requested

        $('a[update-confirm]').click(function(ev) {

        var href = $(this).attr('href');

        if (!$('#updateConfirmModal').length) {

            //please wait included in the line of code below.
            $('body').append('<div id="updateConfirmModal" class="modal modal-confirm-max-width" role="dialog" aria-labelledby="updateConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true"><icon class="icon-remove"></icon></button><h4 class="modal-title" id="updateConfirmLabel">{% trans "Confirm Language Change" %}</h4></div><div class="modal-body"></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">{% trans "Cancel" %}</button>&nbsp;&nbsp;<span class="visible-phone"><br /></span><a class="btn-u btn-u-blue" id="updateConfirmOK" onclick="submitForm();showProgressAnimation();">{% trans "Update Language View" %} - {% trans "Language Change" %}</a></div></div>');

        }

        $('#updateConfirmModal').find('.modal-body').text($(this).attr('update-confirm'));

        $('#updateConfirmOK').attr('href', href);

        $('#updateConfirmModal').modal({show:true});

        return false;

    });

      

+3


source to share


2 answers


change this line:

$('#updateConfirmModal').find('.modal-body').text($(this).attr('update-confirm'));

      

into this line:



 $('#updateConfirmModal').find('.modal-body').html($(this).attr('update-confirm'));

      

please write a comment in the original post to follow the whole process

+1


source


Just change .text () to .html ().



.text () renders everything literally, while .html () renders normal HTML.

+1


source







All Articles