Multiple JQuery countdowns in a loop with Django
Question
I'm creating a sport app with django. I would like to display a list of matches with a countdown for each match.
For now, I only have one countdown. I use this Jquery countdown: http://keith-wood.name/countdown.html (that goes to the new year). I have a loop to display my matches. So the question is how can I insert the countdown into the loop and make it go to the DateTime of my objects "match"?
Here is my template:
<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-a antoine.lacroix/Desktop/Jquery/jquery.countdown.package-1.6.0/jquery.countdown.css";</style>
<script type="text/javascript" src="http://keith-wood.name/js/jquery.countdown.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 style="float:left">
{% for match in matches %}
<div>
<p>{{ match }}</p>
<p> {{match.real_start}} <p>
<a href="{{ match.get_absolute_url_grille }}">Go</a>
</div>
{% endfor %}
</div>
<div id="defaultCountdown"> </div>
</body>
"matches" is the list containing every matches. "real_start" is the DateTime of my objects "match"
My views.py is simply:
def page(request):
matches = Match.live_matches.all()
return render_to_response('myhtml.html', {'matches': matches}, context_instance=RequestContext(request))
So I don't know how to import my "real_start" DateTime into the countdown and how to insert this countdown into the loop.
Here is my current code:
<script language="javascript">
$(function(){
$('.match_wrap').each(function(){
var match_start=$(this).data('match_start');
$(this).find('.matchTimer').countdown({until: match_start});
});
})
</script>
</head>
<body>
<div style="float:left">
{% for match in matches %}
</br></br>
<div class="match_wrap" data-match_start="{{ match.real_start|date:"M j, Y" }}">
<p>{{ match }}</p>
<p> {{match.real_start}} <p>
<div>
<ul>
{% for team in match.teams %}
<li>
<img src="{{ team.logo.url }}">
</li>
{% endfor %}
</ul>
</div>
<a href="{{ match.get_absolute_url_grille }}">Go</a>
<div class="matchTimer"> </div>
</div>
{% endfor %}
</div>
</br></br>
I also 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>
<script type="text/javascript" src="http://keith-wood.name/js/jquery.countdown.js"></script>
<script language="javascript">
$('.match_countdown').each(function() {
var self = $(this),
date_string = self.attr('data-date'),
date = new Date.parse(date_string);
self.countdown({until: date});
});
</script>
</head>
<body>
<div style="float:left">
{% for match in matches %}
</br></br>
<div class="match_countdown" data-date="{{ match.real_start|date:'M j, Y' }}"></div>
<p>{{ match }}</p>
<p> {{match.real_start}} <p>
<div>
<ul>
{% for team in match.teams %}
<li>
<img src="{{ team.logo.url }}">
</li>
{% endfor %}
</ul>
</div>
<a href="{{ match.get_absolute_url_grille }}">Go</a>
</div>
{% endfor %}
</div>
2 answers
solution1
3 ACCPTED 2012-10-15 12:35:05
Similar to charlietfl's answer but js parses the correct date.
{# template #}
{% for match in matches %}
<div>
<p>{{ match }}</p>
<p> {{match.real_start}} <p>
<a href="{{ match.get_absolute_url_grille }}">Go</a>
<div class="match_countdown" data-date="{{ match.real_start|date:'M j, Y' }}"></div>
</div>
{% endfor %}
and then the js:
$('.match_countdown').each(function() {
var self = $(this),
date_string = self.attr('data-date'),
date = new Date(date_string);
self.countdown({until: date});
});
Here ( http://jsfiddle.net/miki725/MQcYw/1/ ) js jsfiddle which illustrates the solution.
solution2
2 2012-10-15 12:20:50
WHenever you need to invoke a plugin on many elements that requires different data for each instance is often easiest to loop over the elements involved and call each instance from within the loop.
Something like this should be easy to implement:
HTML
{% for match in matches %}
<div class="match_wrap" data-match_start="{{match.startFormattedToCountDownPlugin}}">
<p>{{ match }}</p>
<p> {{match.real_start}} <p>
<a href="{{ match.get_absolute_url_grille }}">Go</a>
</div>
<div class="matchTimer"> </div>
</div>
{% endfor %}
JS
$(function(){
$('.match_wrap').each(function(){
var match_start=new Date.parse($(this).data('match_start'));
$(this).find('.matchTimer').countdown({until: match_start});
});
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.