0

I have defined my javascript file inside static folder of my django project with path js/info.js and content as follows:-

function info()
    
    {
      
      $('#outer_info').append('<div id="get_info"></div>');
      console.log('info_btn clicked')
     
      document.getElementById('get_info').innerHTML = `<div class='modal fade' id='exampleModal1' tabindex='-1' aria-labelledby='exampleModal1Label' aria-hidden='true'>
        <div class='modal-dialog modal-dialog-centered modal-md'>
          <div class='modal-content' style='background-color:#47423e;'>
            <div class='modal-header'>
            <h3 class='modal-title text-white' id='exampleModal1Label'>xbguvolrtktest</h3>
              <button type='button' class='btn-close' data-bs-dismiss='modal' aria-label='Close'></button>
            </div>
            <div class='modal-body'>
            <center><h3 class="text-white">Bucket Details</h3>
            <table class="table table-dark table-sm table-hover border-white">
              <tbody>
                <tr>
                  <td class="text-white">Items in Bucket:</td>
                  <td class="text-white">{{ bucket_item_count }}</td>
                </tr>
                <tr>
                  <td class="text-white">Bucket Size:</td>
                  <td class="text-white">{{ bucket_size }}</td>
                </tr>
                <tr>
                  <td class="text-white">Last Updated On:</td>
                  <td id="last_updated" class="text-white">{{ last_updated_time }}</td>
                </tr>
                <tr>
                  <td class="text-white">Directories:</td>
                  <td class="text-white">{{ directory_count }}</td>
                </tr>
                <tr>
                  <td class="text-white">Files:</td>
                  <td class="text-white">{{ file_count }}</td>
                </tr>
              </tbody>
            </table>
          <br></center>
            </div>
            <div class='modal-footer'>
              <button type='button' class='btn btn-secondary' data-bs-dismiss='modal' style='background:#e2513c'>Close</button>
              
              </div>
              </div>
              </div>
              </div>
              
      <input type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal1" data-bs-whatever="@mdo" id="infoButton" hidden>`
      
      document.getElementById("infoButton").click();
    }

Here is how it is being called in index.html file:-

<script src="{% static '/js/info.js' %}" type="text/javascript"></script>

This is basically a Bootstrap Modal. The problem is that the value of the django variables is not getting rendered on html although it works fine when I include the entire script inside index.html directly.

Here is how it looks:-

enter image description here

What might be going wrong here?

Improve this question
2
  • You cannot pass django variables to attached source files like JS or CSS. If you want data in template you put variables in template. stackoverflow.com/questions/68368147/… For printing variables like the way you are trying to do you need to use django only and render the template and pass variable as context. return render(request,"index.html",{'bucket':bucket_obj}) then you can do {{bucket.Bucketsize}} in template. Commented Jul 14, 2021 at 5:16
  • Django template render separately and dispatched to client. So it will not render your static file variable. You have to add this HTML part in you HTML template. if you share you HTML template here so we may suggest better way to you. Commented Jul 14, 2021 at 5:29
Related questions
1
Django - Template Vars in static JS files
21
Passing STATIC_URL to file javascript with django
0
Django: How to keep JavaScript code separate in static folder when it uses a python variable
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.