I am currently using this plugin http://code.google.com/p/jquerycsvtotable/, but for some reason can't convert my CSV to a html table. I followed the documentation provided, but it just sticks on "Loading CSV Data...", can someone help me out please?
<html>
<head>
<script src="jquery-2.1.1.min.js"></script>
<script src="jquery.csvToTable.js"></script>
<script>
$(function() {
$('#CSVTable').CSVToTable('data.csv');
});
</script>
</head>
<body>
<div id="CSVTable"></div>
</body>
</html>
Here you have a working exameple : https://github.com/medialab/reanalyse/tree/master/static/js/csvtotable, a test csv and a test template.
You can follow that example which is using table sorter too.
Your code after you download the folder will be this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery CSVToTable</title>
<link rel="stylesheet" href="css/csvtable.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.csvToTable.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.dev.js"></script>
<script>
$(function() {
$.get('test.csv', function(data) {
$('#CSVSource').html('<pre>' + data + '</pre>');
});
$('#CSVTable').CSVToTable('test.csv', { loadingImage: 'images/loading.gif', startLine: 0 });
$.get('test.tsv', function(data) {
$('#TSVSource').html('<pre>' + data + '</pre>');
});
$('#TSVTable').CSVToTable('test.tsv', { loadingText: 'Loading TSV Data...', loadingImage: 'images/loading.gif', startLine: 0, separator: "\t" });
$('#CSVTable2').CSVToTable('test.csv', { loadingImage: 'images/loading.gif', startLine: 1, headers: ['Album Title', 'Artist Name', 'Price ($USD)'] }).bind("loadComplete",function() {
$('#CSVTable2').find('TABLE').tablesorter();
});;
});
</script>
</head>
<body>
This is a test of the CSVToTable plugin.
<br><br>
Original CSV (comma separated values) source of test.csv:<br>
<div id="CSVSource" class="source">
</div>
<br><br>
CSV To Table:<br>
<div id="CSVTable">
</div>
<br><br>
Original TSV (tab separated values) source of test.tsv:<br>
<div id="TSVSource" class="source">
</div>
<br><br>
TSV To Table:<br>
<div id="TSVTable">
</div>
<br><br>
CSV To Table - made sortable using <a target="_blank" href="http://tablesorter.com/">jQuery tablesorter:</a><br>
<div id="CSVTable2">
</div>
</body>
</html>
You can use your own jQuery version.
Related
I am following a tutorial in Jasmine and serverless. The problem I am facing is around Javascript.
There is a public directory which has an index.html
Jasmine tests are in public/tests directory. It also has an index.html.
Following JS code (SpecHelper.js below) is suppose to find markups with class markup in public/index.html and copy that code in <body> of public/tests/index.html but it isn't doing so. I am unable to find the issue.
public/index.html
<body>
<div class='markup'>
<div class='view-container container'>
<div class='one-half column'>
<h3>Learn JS, one puzzle at a time</h3>
<a href='' class='button button-primary'>Start now!</a>
</div>
<div class='one-half column'>
<img src='/images/HeroImage.jpg'/>
</div>
</div>
</div>
</body>
SpecHelper.js
var fixture;
function loadFixture(path) {
var html;
jQuery.ajax({
url: '/index.html',
success: function(result) {
html = result;
},
async: false
});
return $.parseHTML(html);
}
function resetFixture() {
if (!fixture) {
var index = $('<div>').append(loadFixture('/index.html'));
var markup = index.find('div.markup');
fixture = $('<div class="fixture" style="display: none">').append(markup);
$('body').append(fixture.clone());
} else {
$('.fixture').replaceWith(fixture.clone());
}
}
beforeEach(function () {
resetFixture();
});
public/tests/index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Jasmine Spec Runner v2.3.4</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.3.4/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="lib/jasmine-2.3.4/jasmine.css">
<!-- App Dependencies -->
<script src="lib/jquery-2.1.4.js"></script>
<script src="/vendor.js"></script>
<!-- Test libraries -->
<script type="text/javascript" src="lib/jasmine-2.3.4/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-2.3.4/jasmine-html.js"></script>
<script type="text/javascript" src="lib/jasmine-2.3.4/boot.js"></script>
<!-- include source files here... -->
<script type="text/javascript" src="/app.js"></script>
<!-- include spec files here... -->
<script type="text/javascript" src="SpecHelper.js"></script>
<script type="text/javascript" src="app_spec.js"></script>
</head>
<body>
<!--This is always empty! -->
</body>
</html>
The test in Jasmine fails with following error
1 spec, 1 failure
Spec List | Failures
learnJS can show problem view
Expected 0 to equal 1.
Try this
fixture = $('<div class="fixture" style="display: none">').append(markup.html());
Then maybe
$('body').append(fixture.clone().html());
got it working..phew ... had to clear browser cache by going to developer tools, networks. I noticed that most files were being picked from memory. Right clicked and cleared cache and cookies.
I am trying to plot historical flot chart between two custom date range, user will select date range and based on selection I will retrieve data from my database and going to plot flot chart. Retrieving data from database based on selection is completed but plotting that data in flot chart is not resulting result. Below is my code I am trying to plot
<!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>Flot Examples: Real-time updates</title>
<script data-require="jquery#2.1.3" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="flot#0.8.2" data-semver="0.8.2" src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script data-require="flot#0.8.2" data-semver="0.8.2" src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.time.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function()
{
function GetData()
{
var data = [];
var now = new Date().getTime();
var res;
data.shift(); //to remove first item of array
var str = [[1475210230423,64.51024424527357],[1475210232423,26.131426274344072]];
data.push(str);
$.plot($("#placeholder"), [data], {series: {
lines: {
show: true,
lineWidth: 1.2,
fill: true
}
},
yaxis: {
min: 0,
max: 100
},
xaxis: {
mode: "time", minTickSize: [1, "day"]
}
}
);}
GetData();
});
</script>
</head>
<body>
<div id="header">
<h2>HISTORICAL CHART</h2>
</div>
<div id="content">
<div class="demo-container">
<div id="placeholder" class="demo-placeholder"></div>
</div> </div>
<div id="footer">
Copyright © 2007 - 2014 IOLA and Ole Laursen
</div>
</body>
</html>
<!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>Flot Examples: Real-time updates</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.time.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function()
{
function GetData()
{
var data = [];
var now = new Date().getTime();
var res;
data.shift(); //to remove first item of array
var str = [[1475210230423,64.51024424527357],[1475210232423,26.131426274344072]];
data.push(str);
$.plot($("#placeholder"), data, {series: {
lines: {
show: true,
lineWidth: 1.2,
fill: true
}
},
yaxis: {
min: 0,
max: 100
},
xaxis: {
mode: "time", minTickSize: [1, "day"]
}
}
);}
GetData();
});
</script>
</head>
<body>
<div id="header">
<h2>HISTORICAL CHART</h2>
</div>
<div id="content">
<div class="demo-container">
<div id="placeholder" class="demo-placeholder" style="height:300px;"></div>
</div> </div>
<div id="footer">
Copyright © 2007 - 2014 IOLA and Ole Laursen
</div>
</body>
</html>
I am trying to create a pie chart using wijmo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Data Source</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="%description%" />
<meta name="keywords" content="" />
<meta name="author" content="ComponentOne" />
<link href="../Scripts/Wijmo/jquery-wijmo.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/Wijmo/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="../Scripts/Wijmo/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
<script src="../Scripts/Wijmo/raphael-min.js" type="text/javascript"></script>
<script src="../Scripts/Wijmo/globalize.min.js" type="text/javascript"></script>
<script src="../Scripts/Wijmo/jquery.wijmo.raphael.js" type="text/javascript"></script>
<script type="text/javascript" src="../Scripts/Wijmo/jquery.wijmo.wijchartcore.js"></script>
<script type="text/javascript" src="../Scripts/Wijmo/jquery.wijmo.wijpiechart.js"></script>
<style type="text/css">
#wijpiechart
{
width: 756px;
height: 475px;
}
</style>
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
debugger;
var data = [{
Device: 'MacBook Pro',
Percent: 46.78,
Offset: 15
}, {
Device: 'iMac',
Percent: 23.18
}, {
Device: 'MacBook',
Percent: 20.25
}, {
Device: 'Mac Pro',
Percent: 5.41
}, {
Device: 'Mac mini',
Percent: 3.44
}];
$('#wijpiechart').wijpiechart({
dataSource: data,
data: {
label: { bind: "Device" },
value: { bind: "Percent" },
offset: { bind: "Offset" }
},
radius: 140,
legend: { visible: true },
hint: {
content: function () {
return this.data.label + " : " + Globalize.format(this.value / this.total, "p2");
}
},
header: {
text: "Steam - Mac Hardware"
}
});
});
</script>
</head>
<body class="demo-single">
<div class="container">
<div class="header">
<h2>
DataSource</h2>
</div>
<div class="main demo">
<!-- Begin demo markup -->
<div id="wijpiechart" class="ui-widget ui-widget-content ui-corner-all">
</div>
<!-- End demo markup -->
<div class="demo-options">
<!-- Begin options markup -->
<!-- End options markup -->
</div>
</div>
<div class="footer demo-description">
<p>
This sample shows how to create a pie chart using an array as the data source for
the chart.</p>
</div>
</div>
</body>
</html>
I am getting an object reference error ///
Microsoft JScript runtime error: Object doesn't support this property or method
You should either refer the complete js files that are available at this link:
http://wijmo.com/downloads/
or you can use AMD modules and can refer to the following link:
http://wijmo.com/docs/wijmo/#AMDwithRequireJs.html
I am new into web devlopment. I am trying to use select2-bootstrap. It working fine. Just need a css help.
Initial display of widget :
There is an indent between the bars(between Search for a movie and No matches found)
After clicking on the widget it looks fine as shown here and thereafter the dent disappears even on subsequent use.
Can someone suggest how to remove the dent between two bars in the first pic above.
NOTE :
CSS Added : select2.css, select2-bootstrap.css and bootstrap.css
JS Added : bootstrap.js, jquery-1.9.1.js, select2.js
Also please suggest how to avoid the No matches found display immediately after page loads.
Here is the code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Twitter Bootstrap</title>
<link rel="stylesheet" type="text/css" media="screen"
href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="css/select2.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="css/select2-bootstrap.css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/select2.js"></script>
<script type="text/javascript">
var contextPath = "<%=request.getContextPath()%>";
$(document)
.ready(
function() {
MultiAjaxAutoComplete('#e6',contextPath + "/getData");
$('#save').click(function() {
alert($('#e6').val());
});
});
</script>
<script type="text/javascript">
function MultiAjaxAutoComplete(element, url) {
$(element).select2({
placeholder : "Search for a movie",
//minimumInputLength : 1,
multiple : true,
ajax : {
url : url,
dataType : 'json',
data : function(term, page) {
return {
q : term,
page_limit : 10,
};
},
results : function(data, page) {
console.log("page = " + page);
return {
results : data.results
};
}
},
formatResult : formatResult,
formatSelection : formatSelection,
initSelection : function(element, callback) {
var data = [];
$(element.val().split(",")).each(function(i) {
var item = this.split(':');
data.push({
id : item[0],
country : item[1]
});
});
callback(data);
}
});
};
function formatResult(movie) {
return '<div>' + movie.country + '</div>';
};
function formatSelection(data) {
return data.country;
};
</script>
</head>
<body style="background-color: #F9F9F6">
<h1>Serach Movies</h1>
<div class="container-fluid">
<div class="row-fluid">
<div class="span9">
<input type='hidden' id="e6" class="span8" />
</div>
<div class="span3">
<button id="save">Save</button>
</div>
</div>
</div>
</body>
</html>
I am using YUI layout and autocomplete in the same page. The problem is that autocomplete field dropdown goes behind the layout.
I think the problem is with z-order but couldn't find it after a bit of research.
Here is the simplified piece of code I have, just copy it to html file and it should work (enter letter a for example to see the problem):
<!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=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/resize/assets/skins/sam/resize.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/autocomplete/assets/skins/sam/autocomplete.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/assets/skins/sam/layout.css">
<link rel="stylesheet" type="text/css" href="main.css"></link>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/layout/layout-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/autocomplete/autocomplete-min.js"></script>
</head>
<body class="yui-skin-sam">
<div id="header" >
<div class="header2">
<span class="right-float topPad4px" id="myAutoComplete">
<input class="searchInput" id="searchInput" type="text" size="25" value=""/>
<div id="results"></div>
<input id="myHidden" type="hidden">
</span>
</div>
</div>
<div class="mainArea">
<div id="tree" class="tree" style="margin-left :20px">
</div>
<div id="center" class="centerDiv">
</div>
</div>
<script>
(function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
Event.onDOMReady(function() {
var layout = new YAHOO.widget.Layout({
units: [
{ position: 'top', height: 40, body: 'header', gutter: '0px'},
{ position: 'left', width: 280, resize: true, body: 'tree', scroll: true, animate: false },
{ position: 'center', body: 'center', scroll: true }
]
});
layout.render();
Event.on('tLeft', 'click', function(ev) {
Event.stopEvent(ev);
layout.getUnitByPosition('left').toggle();
});
});
})();
var ds = new YAHOO.util.LocalDataSource(["apples", "apricots", "bananas"]);
var ac = new YAHOO.widget.AutoComplete("searchInput", "results", ds);
</script>
</body>
</html>
my question is - what do I need to modify for the autocomplete dropdown to appear on top of layout?
Ok, found the answer on yui forum, basically I need to add bold items:
{ position: 'top', height: 28, body: 'top1', scroll: null, zIndex: 2 },
see http://developer.yahoo.com/yui/examples/layout/menu_layout.html for more details in the "Fixing the hidden Menus" section.