Unterminated string literal error for django template tag

Question

I have the following code snippet that gives me an inexhaustible string literal error

$(function() {
             $('#addDropdown').click(function() {
             var $d = $('{{ form |bootstrap }}').fadeIn().delay(1000);   
             $('#dropdownContainer').append($d);
             });
             });

I looked at the unterminated string literal question and found that this is due to the multi-line problem. My {{form | bootstrap}} has several lines of code, as indicated in the question. So how can I handle the problem

Answer 1

In general, for use with JavaScript, you should use a filter |escapejs:

var $d = $('{{ value|escapejs }}');

However, as a best practice, you better put {{ form|bootstrap }}in HTML and use JavaScript to just fade in:

<div id="djangoForm" style="display:none">{{ form|bootstrap }}</div>
<script>
    $('#addDropdown').click(function() {
         $('#dropdownContainer').append($('#djangoForm'));
    }
</script>