Include JQuery countdown in Django - javascript

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!

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
});

Related

Angular JS is not displaying clock

I am absolutely new to angular JS and going through the tutorial of ng-book. I am trying to add a clock on the page but the page is showing Hello {{clock}} instead of actual clock. I am using Angular 1.4.8.
Here is my code.
clock.html
<!doctype html>
<html ng-app>
<head>
<title>Angular clock demo</title>
<script src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js" ></script>
</head>
<body>
<div ng-controller="MyController">
<h1>Hello {{ clock }}</h1>
</div>
</body>
</html>
code for js/app.js
function MyController($scope) {
$scope.clock = new Date();
var updateClock = function(){
$scope.clock = new Date();
};
setInterval(function(){
$scope.$apply(updateClock);
},1000);
updateClock();
};
From angular 1.3.x global controller isn't allowed by default.
Bind your controller with module
Like this
var app=angular.module("app",[]);
app.controller("MyController",MyController);
html
ng-app="app"
DEMO

How to insert image from HTML to PDF with jsPDF library?

As jspdf does not support utf8 characters, I'm trying to replace some of the characters with images and then export it in pdf. To help you understand, I made the sample of code, where I try to put an image in html div, and then paste this into the pdf with jspdf. The text appears in pdf, but no image, so whats the issue? I am a beginner, so please explain me how to do this.
TRY THIS LINK AND SEE THE PROBLEM: http://www.balkanex.info/test/start.html
And the code is below:
start.html
<!doctype>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="runner.js" charset="utf-8"></script>
<script type="text/javascript" src="script.js" charset="utf-8"></script>
<script type="text/javascript" src="jspdf/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jspdf/jspdf.js"></script>
<script type="text/javascript" src="jspdf/libs/Deflate/adler32cs.js"></script>
<script type="text/javascript" src="jspdf/libs/FileSaver.js/FileSaver.js"></script>
<script type="text/javascript" src="jspdf/libs/Blob.js/BlobBuilder.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="jspdf/jspdf.plugin.from_html.js"></script>
</head>
<body>
<input type="button" id="btn" value="PROCEED TO THE NEXT PAGE" onClick="run();pdf();">
</body>
</html>
runner.js
function run() {
document.write('<div id="myid">This is the image: <img src="button.png" alt="Submit"> </div><br/>');
document.write('<button id="pdf">Export in pdf</button></div>');
}
script.js
function pdf() {
$(function () {
var doc = new jsPDF();
var specialElementHandlers = {
'body': function (element, renderer) {
return true;
}};
$('#pdf').click(function () {
doc.fromHTML($('#myid').html(), 15, 35, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample.pdf');
});
});
}
The library you use jspdf does not support some of the utf-8 letters, so I suggest you to use some other lib (like Mozilla's pdf.js) and avoid these problems.
If you, on the other hand, decide to use this one - then I you will have to make an array for each variable that saves the string and then replace chars with images.

After including jquery plugin countdown not working

I have a content editor webpart in sharepoint with the following code, However the countdown is not working.
What I noticed is that this site is using an old version of jquery 1.6.3, I wonder if that might be the cause or not.
<script src="/Style%20Library/countdown/jquery.countdown.js" type="text/javascript">
<link rel="stylesheet" type="text/css" href="/Style%20Library/countdown/jquery.countdown.css" />
<script class="ms-rteForeColor-3" type="text/javascript">
$(function () {
var austDay = new Date(2013, 7 - 1, 27);
$('#countdown').countdown({until: austDay});
});
</script>
<div id="countdownBox">
<h3 class="ms-rteElement-H3 ms-rteForeColor-3">Countdown to go-live</h3>
<span class="countdown" id="countdown"></span>
</div>
Update 1
Error in firefox console. the error is flooded too many times on the console
Timestamp: 10/07/2013 08:13:21
Warning: Error in parsing value for 'filter'. Declaration dropped.
Source File: https://xx/Communities/xx/Pages/project-xx.aspx
Line: 0
Source Code:
alpha(opacity=99.00000000000007)
this is the generated html, I wonder if the css has to be in the head?
<DIV id=WebPartWPQ7 class="ms-WPBody noindex" allowDelete="false" width="100%" HasPers="false" WebPartID="c1b5cf92-534f-4d23-8cd0-8c0fbe8f541b">
<SCRIPT type=text/javascript src="/Style%20Library/countdown/jquery.countdown.js">
<link rel="stylesheet" type="text/css" href="/Style%20Library/countdown/jquery.countdown.css" />
<script type="text/javascript">
$(document).ready(function() {
var austDay = new Date(2013, 7 - 1, 27);
$('#countdown').countdown({until: austDay});
});</SCRIPT>
<DIV id=countdownBox>
<H3 class="ms-rteElement-H3 ms-rteForeColor-3">Countdown to go-live</H3><SPAN id=countdown class=countdown></SPAN></DIV></DIV>
The jsFiddle works fine: http://jsfiddle.net/Fnsgk/3
However you should add a closing script tag:
<script src="/Style%20Library/countdown/jquery.countdown.js" type="text/javascript">
</script>

Using Javascript to load dropdown values

I have following code where I am trying to load values into a dropdown from an array(from file page students.js):
student.js
var STU_NAME = 0;
var STU_ID = 1;
var STU_AGE = 2;
var STUDENTS = [
["Apple", 1, 15],
["Billy", 2, 16]
["Cathy", 3, 14]
];
Functions.js
var jQ = $.noConflict();
function populateStudents() {
jQ('#students').empty();
jQ('#students').append(jQ("<option></option>").attr("value", "").text("-- Please Select --"));
for (var _i = 0; _i < students.length; _i++) {
jQ('#students').append(jQ("<option></option>").attr("value", _i).text(STUDENTS[_i][STU_NAME]));
}
}
jQ(document).ready(function () {
populateStudents();
});
mypage.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div id="model">
<form>
<div>
<div id="StudentLabel">
Student:
</div>
<select id="students" name="students">
</select>
</div>
<script src="../Scripts/Functions.js" type="text/javascript"></script>
<script src="../Scripts/student.js" type="text/javascript"></script>
</form>
</div>
</body>
</html>
I get an error "Microsoft JScript runtime error: '$' is undefined" at line 1 of Functions.js
Can anyone help me on what I would be missing to make it working here.
You have forgotten to add the jquery library
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="../Scripts/Functions.js" type="text/javascript"></script>
<script src="../Scripts/student.js" type="text/javascript"></script>
It is highly recommended to use CDN version of jquery to improve pagespeed,check this link
You need to include jquery library, you can download from here Add the script tag in head of page or before you use jquery.
<head runat="server">
<title></title>
<style type="text/css">
</style>
<script language="javascript" type="text/javascript" src="JS/jquery-1.7.2.js"></script>
<script src="../Scripts/Functions.js" type="text/javascript"></script>
<script src="../Scripts/student.js" type="text/javascript"></script>
</head>

Jquery not works for javascript innerHtml

Please have a look on code written below. I am trying to have a multiple timer on one page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="jquery.countdown.css" media="all" type="text/css" />
<style type="text/css">
#defaultCountdown { width: 240px; height: 40px; }
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.countdown.js"></script>
<script language="javascript" type="text/javascript">
function LoadText()
{
document.getElementById('dd').innerHTML = '<div id=\"defaultCountdown\" class=\"countdown\" rel=\"87401\">hjhg</div><br/><div id=\"defaultCountdown\" class=\"countdown\" rel=\"60\">hjgj</div><br/><div id=\"defaultCountdown\" class=\"countdown\" rel=\"1800\">hjhg</div><br/>';
}
</script>
</head>
<body>
<div id="dd">
</div>
<script type="text/javascript">
// Initialization
$(document).ready(function()
{
var date = new Date();
$('div.#defaultCountdown').each(function()
{
$(this).countdown
({
until:parseInt($(this).attr("rel"),10),
format:"DHMS",
expiryText:"Expired"
})
})
});
</script>
</body>
</html>
My code works fine when I create Divs Hardcoded. But when I load it through Ajax (For understanding of code, for the time being I am creating Divs using Function LoadText()), I am not able to get it displayed. Please help me out.
For one, you have this:
div.#defaultCountdown
which should be:
div#defaultCountdown
I don't see you calling your LoadText function anywhere
ID's are required to be unique within a document, and your LoadText function does not respect that rule
Unrelated, but you don't need to escape those double quotes inside of your single quoted string in LoadText
You should be using a class or unique IDs for the #defaultCountdown div.
Also this would confuse the selector engine since you are telling it to look for a class with a # sign in it:
$('div.#defaultCountdown').each(function()
Try changing it to a class and use:
$('div.defaultCountdown').each(function()
Update: Ok, the reason why your code isn't working is because the LoadText() function is never called. If you update your script to look like this, it will work (demo):
$(document).ready(function() {
// This is needed to simulate the ajax call
LoadText();
// set up countdown timers
var date = new Date();
$('div.countdown').each(function() {
$(this).countdown({
until: parseInt($(this).attr("rel"), 10),
format: "DHMS",
expiryText: "Expired"
});
});
});
sounds like a timing issue. your jQuery code runs when the data is rendered to the page not after your ajax query completes. Make that a function rather than something to run on ready and call it after the ajax finishes.
Your $('div.#defaultCountdown').each(function() loop runs once when the document is ready - if you subsequently add new divs using Ajax then you need to make sure you re-run your $('div.#defaultCountdown').each(function() code again now that new divs have been added.
The jQuery live() function is good for this.
The working Code if I am not using Ajax Response Text or JavaScript innerHTML. Any solution in this direction will be appriciated. Please find below the modified code that is working. In this code I have created the divs hardcoded. Both the codes can be tested by copying this codes and saving it to html file.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Count Down Timer</title>
<link rel="stylesheet" href="jquery.countdown.css" media="all" type="text/css" />
<style type="text/css">
#defaultCountdown { width: 240px; height: 40px; }
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.countdown.js"></script>
<script language="javascript" type="text/javascript">
**//function LoadText()
// {
// document.getElementById('divo').innerHTML='<div id="defaultCountdown" class="countdown" rel="87401">aaa</div><br/><div id="defaultCountdown" class="countdown" rel="60">bbb</div><br/><div id="defaultCountdown" class="countdown" rel="1800">ccc</div><br/>';
// }**
// Initialization
$(document).ready(function()
{
var date = new Date();
$('div.countdown').each(function()
{
$(this).countdown
({
until:parseInt($(this).attr("rel"),10),
format:"DHMS",
expiryText:"Expired"
})
})
});
</script>
</head>
<body>
<div id="divo">
<div id="defaultCountdown" class="countdown" rel="87401">aaa</div><br/><div id="defaultCountdown" class="countdown" rel="60">bbb</div><br/><div id="defaultCountdown" class="countdown" rel="1800">ccc</div><br/>
</div>
</body>
</html>

Categories

Resources