CODEWITHSUNDEEP
javascriptdjangodjango-templates
sreekanthkura7
sreekanthkura7

Reputation: 115

Django: Writing JavaScript inside template vs loading it

I am using JavaScript to add comment without refreshing the page. When I am using JavaScript inside the template it is working perfectly fine but if I am writing the JavaScript to a file and loading the file inside the template then it is not displaying the name of the person who wrote the comment (It is displaying the comment fine). Below is the JavaScript I used inside the template:

function create_comment(event,div_id,form_id,commentinsert_id) {
    event.preventDefault();
    var text_id = '#'.concat(div_id,' ','#comment-text')
    var slug_id = '#'.concat(div_id,' ','#post_slug')
    var appenddiv_id = '#'.concat(div_id)
    comment_count ++;
    var divcommentinsert_id = 'inserted_comment-'.concat(comment_count.toString())
    $.ajax({
        url : "create_comment/", // the endpoint
        type : "POST", // http method
        data : { text : $(text_id).val(), post_slug: $(slug_id).val(),},
        // handle a successful response
        success : function(json) {
            div.innerHTML = `
                <div id = `+divcommentinsert_id+` class="card-footer">
                <div class="row">
                <div>
                <img src="{{user.profile.profile_picture.url}}" alt="" width="40" height="40">
                </div>
                <div class="col-md-8">
                <b style="color:rgb(240, 0, 0);"> {{user.first_name}} {{user.last_name}}</b>
                <br>
                `+json.text+`
                <a onClick="edit_comment('`+json.slug+`','`+divcommentinsert_id+`','`+json.text+`')"><i class="fa fa-edit"></i></a>
                <a onClick="delete_comment('`+json.slug+`','`+divcommentinsert_id+`')"><i class="fa fa-trash-o"></i></a>
                </div>
                </div>
                </div>`;
            document.getElementById(commentinsert_id).appendChild(div);
            document.getElementById(form_id).reset();
        },
        // handle a non-successful response
        error : function(xhr,errmsg,err) {
            $('#results').html("<div class='alert-box alert radius' data-alert>Oops! We have encountered an error: "+errmsg+
                " <a href='#' class='close'>&times;</a></div>"); // add the error to the dom
            console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
        }
    });
};

In the above code <b style="color:rgb(240, 0, 0);"> {{user.first_name}} {{user.last_name}}</b> is used to display the name. It is displaying name of the person who added the comment but when I copy the same function to comments.js file and load the file like <script src="{% static 'scripts/comments.js' %}"></script> then its not displaying the name instead it is displaying {{user.first_name}} {{user.last_name}}. I am using this javascript in several pages, I thought it is best to write to file and load the file instead of writing the same script in every page. Can someone help me with this?

Upvotes: 0

Views: 52

Answers (1)

SpiceMan
SpiceMan

Reputation: 74

{{ dictionary.key }}, etc in a template is how you use variables with the django template engine.

A static javascript file is not a template. It isn't processed by the django template engine.

Put the values you need in your html (through the template engine), access them from JS.

Basic ideas:

  • Create a JS variable (eg: <script>var user_full_name = "{{ user.user_name }} {{ user.last_name }}"</script>), use user_full_name inside the ajax sucess callback.

  • Put the values inside some html element (eg: <input type="hidden" id="user_name" value="{{ user.user_name }}">) and get it with JS/jQuery $("#user_name").val().

edit: added missing closing double quote to the user_full_name declaration.

Upvotes: 2

Related Questions