CODEWITHSUNDEEP
javascriptdjangodjango-templates
djangog
djangog

Reputation: 47

Django template language and javascript

The html code below produces two links that when hovered will output the corresponding audio file. My question is if I have a table of links stored in a Django database how do I output it in the javascript so that using the Django template language I can loop over the table of links to populate the window.onload function? Or is there a more efficient way?

<head>
<script type="text/javascript">
    window.onload = function() {
        // collecting elements
        var welcomeSound = document.getElementById('welcomeSound');
        var welcomeTxt = document.getElementById('welcomeTxt');

        var sdSound = document.getElementById('shutdownSound');
        var sdTxt = document.getElementById('shutdownTxt');
        //playing welcome sound on mouse over
        welcomeTxt.onmouseover = function() {
            welcomeSound.play();
            return false;
        };

        sdTxt.onmouseover = function() {
            sdSound.play();
            return false;
        };

    };
</script>
</head>
<html>
<section>
    <audio id="welcomeSound" controls="controls" preload="auto">
        <source src="welcome.ogg"></source>
        Your Browser does not support please use (Firefox 3.5+, Chrome 3+, Opera 10.5+, Safari 4+, IE 9+) browsers.
    </audio>
    <audio id="shutdownSound" controls="controls" preload="auto">
        <source src="shutdown.ogg"></source>
        Your Browser does not support please use (Firefox 3.5+, Chrome 3+, Opera 10.5+, Safari 4+, IE 9+) browsers.
    </audio>
    <p class="info">
        Use latest Browser Chrome or FireFox.
        <br /> If you usig Internet download manager please close it.
    </p>

    <a id="welcomeTxt" href="#">
    Welcome(Mouse hover here)
 </a>
    <br />
    <br />
    <br />
    <a id="shutdownTxt" href="#">
  Shutdown(Mouse hover here)
 </a>
</section>

</html>

Upvotes: 1

Views: 992

Answers (1)

elethan
elethan

Reputation: 16993

This is just a toy example of something that might work for you based on what you have. I have dynamically created JavaScript in this way before and have never had any issues with it, but I cannot speak to performance or whether or not there is a better way. I assume there is a better way, but this way has, and continues to work for me, so I thought I would share it. For this example, soundlinks would have to be a list of paths to your audio files. 

<head>
    <script type="text/javascript">
     window.onload = function() {
         // collecting elements
         {% for link in soundlinks %}
         var sound{{ forloop.counter }} = document.getElementById('sound{{ forloop.counter }}');
         var text{{ forloop.counter }} document.getElementById('text{{ forloop.counter }}');
         ...

          text{{ forloop.counter }}.onmouseover = function() {
              sound{{ forloop.counter}}.play();
              return false;
          };
         {% endfor %}
     };
    </script>
</head>
<html>
    <section>
        {% for link in soundlinks %}
        <audio id="sound{{ forloop.counter }}" controls="controls" preload="auto">
            <source src="{{ link }}"></source>
        </audio>
        <a id="text{{ forloop.counter }}" href="#">
            Hover to play audiofile #{{ forloop.counter }}
        </a>
        {% endfor %}
    </section>
</html>

It would be nice if you could use template tags in a .js file too, but AFAIK you cannot do this (though there are ways around this that I have seen on this site). One trick that I have used to keep my JavaScript and html visually separate, is to have the JS in its own template, and {% include %} it in another template. For example in audioscript.html: 

<script type="text/javascript">
 window.onload = function() {
     // collecting elements
     {% for link in soundlinks %}
     var sound{{ forloop.counter }} = document.getElementById('sound{{ forloop.counter }}');
     var text{{ forloop.counter }} document.getElementById('text{{ forloop.counter }}');
     ...

      text{{ forloop.counter }}.onmouseover = function() {
          sound{{ forloop.counter}}.play();
          return false;
      };
     {% endfor %}
 };
</script>

And then in another template:

<head>
{% include 'audioscript.html' %}
</head>
<html>
    <section>
        {% for link in soundlinks %}
        <audio id="sound{{ forloop.counter }}" controls="controls" preload="auto">
            <source src="{{ link }}"></source>
        </audio>
        <a id="text{{ forloop.counter }}" href="#">
            Hover to play audiofile #{{ forloop.counter }}
        </a>
        {% endfor %}
    </section>
</html>

Upvotes: 1

Related Questions