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?

zester
  • 165
  • 3
  • 12
  • You cannot pass django variables to attached source files like JS or CSS. If you want data in template you put variables in template. https://stackoverflow.com/questions/68368147/passing-context-variable-from-template-to-javascript-file/68368515#68368515 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. – Dushyant Deshwal Jul 14 '21 at 05: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. – khadim husen Jul 14 '21 at 05:29

0 Answers0