CODEWITHSUNDEEP
javascriptjquerydjango
JojoL
JojoL

Reputation: 141

Include JQuery countdown in Django

I'm new with Django and this question is probably very basic. I would like to implement this Jquery countdown (http://keith-wood.name/countdown.html) in my Django app. But I have no idea how to include some javascript in my django templates. Here is what I tried to include in my template:

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<style type="text/css">@import "/Users/marc-antoine.lacroix/Desktop/JQuery/jquery.countdown.package-1.6.0/jquery.countdown.css";</style>
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.countdown-fr.js"></script>
<script language="javascript">
var newYear = new Date(); 
newYear = new Date(newYear.getFullYear() + 1, 1 - 1, 1); 
 $('#defaultCountdown').countdown({until: newYear}); 
</script>

But nothing appears in my page. What did I do wrong? Is it the good way to include JQuery in my template?

I know several questions has been asked about it, but I didn't find how to solve my problem.

Any help would be very welcome.

Now, I tried:

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script type="text/javascript"    src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<style type="text/css">@import "/Users/marc-antoine.lacroix/Desktop/JQuery/jquery.countdown.package-1.6.0/jquery.countdown.css";</style>
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.countdown-fr.js"></script>
<script language="javascript">

$(document).ready(function(){

var newYear = new Date(); 
newYear = new Date(newYear.getFullYear() + 1, 1 - 1, 1); 
$('#defaultCountdown').countdown({until: newYear}); 

});
</script>

</head>
<body>

<div id="defaultCountdown"> </div>

</body>

Still nothing!

Upvotes: 3

Views: 945

Answers (1)

pckill
pckill

Reputation: 3759

Did you include <div id="defaultCountdown"></div> somewhere on your page? Also it would be a good idea to put your javascript code inside ready event, like so: 

$(document).ready(function(){
    //your code here
});

Upvotes: 1

Related Questions