0

I am trying to implement this code to my Django application. I manage to get the code on the page using code blocks in my index.html.

It seems like the styles from the css is displaying correctly. I also manage to play songs, but the pause button, different cover images and song titles does not change when they are clicked/changed.

For me it seems like the JavaScript is not able to change the style of html elements in the DOM.

I know that JS files is not processed by Django's template engine. So I am using this code, so I can reference this global variable from within the js-file.

<script>
var MEDIA_URL = "{{MEDIA_URL}}";
</script>

<script type="text/javascript"  src="{{MEDIA_URL}}/js/myscript.js" ></script>

inside the JS file there is two places where the variable is referred,

$('.player .cover').css('background-image','url(MEDIA_URL + audio/' + cover+')');;
song = new Audio(MEDIA_URL+'audio/' + url);

This reference do actually take place, but for the rest of the JS-file.. none of the addClass, removeClass etc. do affect the DOM.

When trying this code outside the Django framework, everything works as expected.I am pretty sure that there is something I am ignoring, that is causing this problem.. but I cannot seem to figure out what it is!

Please help!

rnevius
  • 26,578
  • 10
  • 58
  • 86
Sepi
  • 75
  • 2
  • 13
  • Have you checked your browser console for errors? Are you sure you're targetting the correct classes? Is the javascript file loading? Django is a back-end framework, it can't "prevent" anything from happening on the front-end of your website. You'll need to post more code (eg, both the html and the javascript) for us to help you determine the issue. – Christian Apr 28 '15 at 08:37

1 Answers1

0

That code shouldn't work. You've mixed up some quotes:

$('.player .cover').css('background-image','url(' + MEDIA_URL + 'audio/' + cover + ')');

Definitely watch your syntax. Another thing you could have done to test things out is actually put the MEDIA_URL value in the jQuery function, before trying to substitute in the variable.

rnevius
  • 26,578
  • 10
  • 58
  • 86
  • Thank you! This made the cover img's changeable.. but still no interaction between the JS code and the CSS classes.. – Sepi Apr 28 '15 at 13:14
  • I'm not sure I understand...Have you included that part of your code in the question? – rnevius Apr 28 '15 at 13:19
  • The issue was mainly due to a JQuery conflict, your suggestion helped me as well.. see [this](https://stackoverflow.com/questions/3173256/avoiding-conflicts-in-jquery-and-jquery-extensions) post for the jQuery conflict solution. – Sepi Apr 28 '15 at 14:55