How to use django template tags in .js file ??

[Ayush Bisht]

while doing great stuff with django I have found some clumsy behaviour of django in handling .js file. Is there a way to effectively integrate all the stuff of <script> </script> in a separate file and effectively used it with rest of the html code. 

for example : 

// file.html ..........................................................................

    <div class = "like">

              <div class="like-inner-flex-1">

                <form action = "{% url 'blog_likes' object.slug %}" method="POST" id="likes-form">

                {% csrf_token %}

                <button type="submit" role = "checkbox" class="like-btn" id="like-{{object.pk}}"></button>

                </form>

              </div>

              <div class="like-inner-flex-2">

                <p id = "likes">{{ object.total_likes }}</p>

              </div>

            </div>

//  file.js file  ..................................................................................

$("#likes-form").submit(function (e)

{  e.preventDefault();

  var serializedData = $(this).serializeArray();

  $.ajax({

      type: 'POST',

      url: '{% url 'blog_likes' object.slug  %}',

      data: serializedData,

      success: function (response) {

        var like_count = JSON.parse(response["like"]);

        like_flag = JSON.parse(response["flag"]);

        

        console.log(like_flag);

      

        if(like_flag == 0){      

        $(".like-inner-flex-1").toggleClass('like-animate');       

      }else

      $(".like-inner-flex-1").toggleClass('like-animate'); 

      

      if(like_flag){

          $('.like-btn').css({"background-color": "#d629801a" , "outline": "none"});

        $('.like-inner-flex-1').css({"background-position": "right",  "filter": "grayscale(0%)"});

        } else {

        $('.like-btn').css({"background-color": "transparent", "outline": "none"});

        $('.like-inner-flex-1').css({"background-position": "right",  "filter": "grayscale(100%)"});

        }

        $("#likes").text(`${like_count}`);

        }})

    })

..........................................................

if I use above script inside the same html file then it works, but in above case its not working ?? If there is any work around to do this thing , then please suggest me .

Thank you.......

 

[Kuassi Israel]

I also had the problem once. But what I understood is that the interpretation of the DJANGO syntax in statics files only works when the file has an HTML extension. So if you really want to do something separate with the script you can just create another HTML file but in another folder where you will put the script content surrounded by the SCRIPT tags and then you will just include with the directive {% INCLUDE <path-file>%} in your main HTML file.

[Nikeet NA]

Do like this use 

var obj_slug = object.slug inside script tag below it include your js file with the above js script. in js file you can acces it with obj_slug variable.

[Nikeet NA]

Or you can store the url in the variable then use it.

[Ayush Bisht]

thanks, It works for me ....