Permalink
Browse files

"Fixes jQuery HTML parsing issue"

  • Loading branch information...
1 parent ce5f414 commit b1d05cce2ee86089ec80d49b55a3c1e8b8ce402e @goodmike committed Mar 14, 2012
Showing with 96 additions and 28 deletions.
  1. +3 −1 app.js
  2. +11 −1 public/bb.html
  3. +69 −18 public/javascripts/backbone_app.js
  4. +2 −0 views/layout.ejs
  5. +11 −8 views/show.ejs
View
4 app.js
@@ -36,7 +36,9 @@ var contentType = "text/html";
function acceptsXml(req) {
var acc = req.headers["accept"];
- if (acc.match(/text\/xml/)) {
+ if (acc.match(/text\/html/)) {
+ return "text/html";
+ } else if (acc.match(/text\/xml/)) {
return "text/xml";
} else if (acc.match(/application\/xml/)) {
return "application/xml";
View
12 public/bb.html
@@ -6,8 +6,16 @@
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js"></script>
- <script type="text/javascript"
+<!-- <script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.0/backbone-min.js"></script>
+-->
+ <script type="text/javascript" src="/javascripts/backbone.js"></script>
+ <script type="application/javascript"
+ src="/javascripts/jqplot/jquery.jqplot.js"></script>
+ <script type="application/javascript"
+ src="/javascripts/jqplot/plugins/jqplot.dateAxisRenderer.js"></script>
+
+
<script type="text/javascript" src="/javascripts/backbone_app.js"></script>
</head>
<body>
@@ -172,5 +180,7 @@
</table>
</div>
+<div id="hidden_response" style="display:none"></div>
+
</body>
</html>
View
87 public/javascripts/backbone_app.js
@@ -4,20 +4,14 @@ Backbone.sync = function(method, model, options) {
// Default JSON-request options.
var params = _.extend({
- contentType: 'application/xml',
- dataType: 'xml',
+ contentType: 'text/html',
+ dataType: 'html',
processData: false
}, options);
originalSync(method, model, params);
};
-
-
-$("#grades_chart").on('gradesRedraw', function() {
- alert("Redraw!");
-});
-
var tableHeaders = function() {
var headers = [].slice.apply(arguments);
return "<tr>" +
@@ -27,6 +21,67 @@ var tableHeaders = function() {
"</tr>";
};
+function processGrades(grades) {
+
+ var gradesline = _.map(grades, function(grade) {
+ return [grade.date + " 12:00PM", parseInt(grade.score, 10)];
+ });
+
+ console.log("gradesline: " + gradesline);
+
+ var targetline = [["2012-01-23 12:00AM", 88],['2012-03-12 12:00AM', 88]];
+
+ var running_avg_points = _.reduce(grades, function(memo, grade, i) {
+ var d = grade.date + " 12:00PM";
+ var p = parseInt(grade.weighted_score,10);
+ var w = parseInt(grade.weight,10);
+ if (i===0) return [{"date": d, "points": p, "weight": w}];
+ var last = memo[i-1];
+ console.log(last);
+ memo.push({"date": d, "points": p + last.points, "weight": w + last.weight});
+ return memo;
+ }, []);
+ var running_avg_line = _.map(running_avg_points, function(point) {
+ return [point.date, point.points/point.weight];
+ });
+
+ console.log(running_avg_line);
+
+ $.jqplot('grades_chart', [targetline, running_avg_line, gradesline], {
+ title:'Time Series with default date axis',
+ axes:{
+ yaxis: {min:50, max:105, tickInterval:10},
+ xaxis:{
+ renderer:$.jqplot.DateAxisRenderer,
+ tickOptions:{formatString:"%b %#d '12"},
+ min:'January 23, 2012',
+ max:'March 12, 2012',
+ tickInterval:'1 week'
+ }
+ },
+ fillBetween: {
+ series1: 1,
+ series2: 0,
+ color: "rgba(227, 167, 111, 0.5)"
+ },
+ series: [
+ {
+ // showLine: false
+ lineWidth: 1
+ },
+ {
+ rendererOptions: {
+ smooth: true
+ },
+ markerOptions: {
+ show: false
+ }
+ },
+ {}]
+});
+}
+
+
$(function() {
window.Grade = Backbone.Model.extend({
@@ -45,9 +100,8 @@ $(function() {
// },
url: "/tracker",
parse: function(response) {
- console.log("GradeList#parse");
-/*
- var data = $("table.all", response);
+ $("#hidden_response").html($("table.all", $(response)));
+ var data = $("#hidden_response");
var cols = _.pluck($("col", data), 'className');
var rows = $("tr", data).slice(1);
var models = _.map(rows, function(tr, key) {
@@ -59,11 +113,12 @@ $(function() {
return model;
});
return models;
-*/
+/*
return [{date: "2012-02-01", assessment: "homework",
details_link: "<a href=\"/grades/68ed2c9f8457e4054ac82f756d5ea541\">Details</a>",
score: "100", weight: "1", weighted_score: "100"}];
- },
+*/
+},
resetFromGradesTable: function() {
var data = $("table.all");
var cols = _.pluck($("col", data), 'className');
@@ -96,7 +151,7 @@ $(function() {
_.each(this.model.models, function (grade) {
$(this.el).append(new GradeView({model:grade}).render().el);
}, this);
- $.event.trigger('gradesRedraw');
+ processGrades(this.model.models);
return this;
}
@@ -108,10 +163,6 @@ $(function() {
template: _.template("<td><%= score %></td><td><%= assessment %></td><td><%= score %></td><td><%= weighted_score %></td>"),
render: function() {
- console.log("Examining Model");
- console.log(this.model);
- console.log(this.model.toJSON());
- console.log(this.model.score);
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
View
2 views/layout.ejs
@@ -5,6 +5,8 @@
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
+ <div id="main">
<%- body %>
+ </div>
</body>
</html>
View
19 views/show.ejs
@@ -18,12 +18,15 @@
<div id="grades">
<p>Data Table</p>
<table class="all">
-<col class="date">
-<col class="assessment">
-<col class="details_link">
-<col class="score">
-<col class="weight">
-<col class="weighted_score">
+<colgroup>
+ <col class="date" />
+ <col class="assessment" />
+ <col class="details_link" />
+ <col class="score" />
+ <col class="weight" />
+ <col class="weighted_score" />
+</colgroup>
+<tbody>
<tr>
<th>Date</th>
<th>Assessment</th>
@@ -43,6 +46,7 @@
<td class="weighted_score"><%= grade.weighted_score %></td>
</tr>
<% } %>
+</tbody>
</table>
</div>
@@ -51,7 +55,7 @@
<label for="grade_date">Date</label>
<input type="text" name="date" id="grade_date" requried="true" />
<label for="grade_assessment">Assessment Type</label>
- <input type="text" name="assessment" id="="grade_assessment" requried="true" />
+ <input type="text" name="assessment" id="grade_assessment" requried="true" />
<label for="grade_score">Score</label>
<input type="text" name="score" id="grade_score" requried="true" />
<label for="grade_topic">Topic</label>
@@ -61,6 +65,5 @@
<input type="submit" value="Post" />
</form>
-<br clear="all">
<div id="data_doc"></div>

0 comments on commit b1d05cc

Please sign in to comment.