I'm found on the internet a simple example (http://bl.ocks.org/ndarville/7075823) how to convert a .csv file into a table in HTML. I implemented the same example inside a container and it works really well. So, I decided to put its javascript code in an external file in order to be implemented in my application, but it is not working. I'm wondering why does don't work. I would appreciate id anyone could help me because I don't have any kind of experience with D3.
//-------------------------file myscript.js -------------------------------------//
function sTest(){
d3.text("data.csv", function(data) {
var parsedCSV = d3.csv.parseRows(data);
var container = d3.select("#dataTable")
.append("table")
.selectAll("tr")
.data(parsedCSV).enter()
.append("tr")
.selectAll("td")
.data(function(d) { return d; }).enter()
.append("td")
.text(function(d) { return d; });
}
//----------------------------file index.html -------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<script src="myscript.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<div class="w3-container w3-cell-row w3-lobster">
<p class="w3-xxlarge">Data Table:</p>
</div> //container where should be contained a table
<div style="height:350px;" class="w3-cell-row">
<div id="dataTable" class="w3-container w3-cell w3-center w3-cell-middle w3-border w3-border-blue w3-round-xlarge">
</div>
<div style="width:320px;" class="w3-container w3-cell w3-cell-middle w3-border w3-border-green w3-round-xlarge">
<table class="w3-table w3-bordered">
<tr>
<th>$$Resistor\,(R):$$</th>
</tr>
<tr>
<td><center><input type="number" style="text-align:center" id="Res" value="0" >
<label style="font:16px">$$\Omega$$</label></center></td>
</tr>
<tr>
<th>$$Resistor\,(R_B):$$<th>
</tr>
<tr>
<td><center><input type="number" style="text-align:center" id="Resb" value="0">
<label style="font:16px">$$\Omega$$</label></center></td>
</tr>
<tr>
<th>$$Resistor\,(R_C):$$</th>
</tr>
<tr>
<td><center><input type="number" style="text-align:center" id="Resc" value="0">
<label style="font:16px">$$\Omega$$</label></center></p></td>
</tr>
</table>
</div>
</div>
<p align="center"><input type="button" name="start" id="start" value="Start" onclick="sTest()" style="color:#00cc00">
</body>
</html>
Swap the order of the javascript references around.
myscript.js (where you have the code invoking d3 methods) is dependent on the d3js library so ensure that the d3js library is loaded first as follows:
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="myscript.js"></script>
For additional explanation on loading js libraries, read the accepted answer on this SO question:
load and execute order of scripts
Related
I running into an issue where after bundling my code Browserify I am getting a button not defined error. When using the original js file I created the function I had on the button click was partly working, so I don't think the issue is with that function per say.
To compile/bundle my code with Browserify I modified the "package.json" file and added ""build": "browserify Functions.js -o Test.js"" under the scripts section. Then from a terminal window "npm run build".
My HTML code is:
<!DCOTYPE html>
<HTML>
<head>
<meta name="viewport" content="width=device-width, initial scale=1.0">
<title>Content Search</title>
<!-- Linking styles sheet -->
<link rel="stylesheet" href="Styles.css">
<script type="text/javascript" src="Test.js"></script>
<!-- Links to the javascript file with all of the functions -->
<!-- <script type="text/javascript" src="functions.json"></script>
<script defer src="https://pyscript.net/alpha/pyscript.js"></script> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#100;200;300;400;600;700&display=swap" rel="stylesheet">
</head>
<header>
<H1>This Page is to designed to search Remedyforce, Jira, Confluence and Maxtrax</H1>
</header>
<body>
<div class="checkbox">
<label for="RF"> Search Remedyforce</label>
<input type="checkbox" id="RF" value="CheckRF">
<label for="Jira"> Search Jira</label>
<input type="checkbox" id="Jira" value="CheckJira">
<label for="Maxtrax"> Search Maxtrax</label>
<input type="checkbox" id="Maxtrax" value="CheckMaxtrax">
<label for="Network_Drive"> Search Network Drive</label>
<input type="checkbox" id="Network_Drive" value="CheckNetwork_Drive">
<label for="BitBucket"> Search BitBucket</label>
<input type="checkbox" id="BitBucket" value="BitBucket">
<br>
<br>
</div>
<textarea name="Search_Criteria" placeholder="Search" required></textarea>
<br>
<br>
<!-- onclick is used to call javascript function when button is clicked -->
<button id="Search" onclick="button()">Search</button>
<br>
<br>
<table id="Results">
<tr>
<td> Test</td>
<td> Test</td>
<td> Test</td>
<td> Test</td>
<td> Test</td>
</tr>
<tr>
<td> Test</td>
<td> Test</td>
<td> Test</td>
<td> Test</td>
<td> Test</td>
</tr>
</table>
</body>
<footer>
</footer>
</HTML>
My Functions.js file that I used to create my Test.js file has the following code:
const axios = require("axios");
const cheerio = require("cheerio");
const pretty = require("pretty");
const url = "https://pwdreset.exlservice.com/";
//Scrapes data from the URL that is specified in the URL variable
async function scrapeData() {
//Gets the data from the website (Raw HTML)
const { data } = await axios.get(url);
//loads the html into a doc
const $ = cheerio.load(data);
//console.log($.html());
//filters html based on the class name "project-logo"
const mango = $(".project-logo");
//prints out the information to the console
console.log(mango.html());
return mango.html;
}
function button () {
alert("You Clicked me");
var text;
//Makes the table that shows the results visable
document.getElementById("Results").style.display = "inline-block";
text = scrapeData();
document.getElementsByTagName("td").innerHTML = text;
}
Any help would be greatly appreciated!
I'm a vue.js beginner, so I need help.
I write an HTML page which show a list of object in a simple table.
The table is made by a script which get a JSON object from a servlet and shows it using a v-for directive.
In each row of the table, there is a button that the user can click to book the object wrote in the corresponding row, using a form.
The problem is that I don't know how to get the object's information correspondent to the clicked line to put it in the form's fields.
This is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Repetition - catalog</title>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style2.css" />
</head>
<body>
<header><h1>REPETITIONS.com</h1></header>
<div id="app" class="float-container" style="height: 80%">
<table class="catalog-table">
<thead>
<tr>
<th style="width: 200px">Corso</th>
<th style="width: 250px">Docente</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="rep in reps">
<td>{{rep.teacherName}} {{rep.teacherSurName}}</td>
<td>{{rep.course}}</td>
<td>
<form action="/Repetition/controller/ServletController" method="post" id="i">
<input type="hidden" name="operation" value="booking">
<input type="hidden" name="id_t" value="rep.getId_teac"> <---set the value of the current row
<input type="hidden" name="id_c" value="rep.getId_cor"> <---set the value of the current row
<button type="submit">Book</button>
</form>
</td>
</tr>
</tbody>
</table>
</div>
<footer>xxxxxxx</footer>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
var app = new Vue ({
el: '#app',
data: {
repetitions: [],
link: '/Repetition/ServletController?operation=catalog&device=x'
},
mounted(){
this.getRepetitions()
},
methods:{
getRepetitions: function(){
var self = this;
$.get(this.link, function(data) {
self.repetitions = data;
});
}
}
});
</script>
</body>
</html>
Alternatively the form request could be manage with another script, but there would be the same problem.
I have a XML file with Platform, Task type and Time which takes to do each task. I need to do a calculation.
Following is my XML File.
<?xml version="1.0" encoding="UTF-8"?>
<platforms>
<sitecore>
<task>
<taskname>promobox</taskname>
<time>10</time>
</task>
<task>
<taskname>newswire</taskname>
<time>30</time>
</task>
</sitecore>
<siab>
<task>
<taskname>promobox</taskname>
<time>20</time>
</task>
<task>
<taskname>newswire</taskname>
<time>15</time>
</task>
</siab>
</platforms>
and my front-end html is like below.
Screenshot
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="css/custom.css">
<title></title>
</head>
<body>
<div class="container">
<div class="col-md-8 col-centered">
<h2>Time Calculator</h2>
<form>
<div class="form-group">
<label for="platform">Platform</label>
<select class="form-control" id="platform">
<option>BDE</option>
<option>GCMS</option>
<option>Sharepoint</option>
<option>Siab</option>
<option>Sitecore</option>
</select>
</div>
<div class="form-group">
<label for="task">Task Type</label>
<select class="form-control" id="task">
<option>Newswire - Immediate</option>
<option>Page creation - text only</option>
<option>Promobox</option>
<option>Banner of image creation</option>
<option>Videocast</option>
</select>
</div>
<div class="form-group">
<label for="units">Units</label>
<input type="number" min="0" class="form-control" id="units" placeholder="Number of Units">
</div>
<button type="submit" class="btn btn-primary">Calculate</button>
<button type="submit" class="btn btn-light">Clear All</button>
</form>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Platform</th>
<th scope="col">Task Type</th>
<th scope="col">Time</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sitecore</td>
<td>Promobox</td>
<td>20</td>
</tr>
<tr>
<td></td>
<td></td>
<td><strong>Total: 20 (mins)</strong></td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
I need to get all platforms into one dropdown and specific task types to another dropdown.
Once you select a platform and task type enter the number of units and the pre-defined time in the XML will be multiplied by the number of units and it will show in the table. I am absolute beginner to Jquery and clueless where to start.
If you already have the XML in a variable as a string on the client-side, you could simply read the XML string into an XmlDoc.
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(txt, "text/xml");
Or use jQuery.readXML to parse it:
var xml = "<rss version='2.0'><channel><title>RSS Title</title></channel></rss>",
var xmlDoc = $.parseXML( xml ),
var $xml = $( xmlDoc ),
var $title = $xml.find( "title" );
If you have control of the server response, you could change it to JSON and simply use jQuery.readJSON and build the JSON keeping in mind how it would be used e.g.:
$.getJSON("rest/platforms", function( platforms ) {
platforms.forEach(function( platform ){
platform.name; // sitecore
platform.tasks.forEach(function( task ){
task.name; // promobox
task.time; // 10
});
});
});
I need to add +1 to the total number of tweets when a new tweet (text input) is submitted:
Here is my HTML:
<!DOCTYPE html>
<html lang="en" data-ng-app="Twitter">
<head>
<meta charset="UTF-8">
<title>Twitter Clone</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="profileArea">
<img id="profile" src="http://potdeli.webs.com/twitter.png" alt="tweet">
<p style="color:white;"><strong>Tweeto</strong></p>
<p>#TweetoTwiteech</p>
<table style="width:100%">
<tr>
<th>Tweets</th>
<th colspan="1">Following</th>
<th colspan="1">Followers</th>
</tr>
<tr>
<td>2</td>
<td>0</td>
<td>0</td>
</tr>
</table>
</div>
<div class="tweets" ng-app="" ng-controller="TweetsController">
<form method="POST" action="" ng-submit="addTweet()">
<h2>Compose new tweet</h2>
<input name="tweet" type="text" ng-model="newTweet" ng-maxlength="140" placeholder="What's happening?">
<button type="submit" value="addTweets">Tweet!</button>
</form>
<div class="tweetDisplay" ng-repeat="tweet in tweets track by $index">{{ tweet }}
</div>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.5/angular.min.js">
</script>
<script src="tweets.js">
</script>
</body>
</html>
And here is the JavaScript:
function TweetsController($scope) {
$scope.tweets = ["First sample tweet", "Second sample tweet"];
$scope.addTweet = function() {
if(this.newTweet) {
$scope.tweets.push($scope.newTweet);
$scope.newTweet = "";
}
};
}
I tried a couple of things but I didn't get the desired result, also I checked out a few similar Stack Overflow questions but I wasn't able to get it figured out.
Oh man, I can't believe what a half-wit I am! I just added:
<td>{{ tweets.length }}</td>
Instead of number 2, as the number of tweets and placed this on the body:
<body ng-app="" ng-controller="TweetsController">
Thanks to all for pointing me in the right direction!!
Your table markup is outside of your controller scope. Make it part of your controller scope, and then you could print a counter value there, such as $scope.tweets.length
Hello I'm very new to JavaScript Unit Testing, and I'm in the process of attempting to see if it would be possible to test some existing JavaScript.
I've got my test runner up, but I'm receiving this error in regards to function.
Test Runner the markup there is just to test something for the moment:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>QUnit Main Test Suite</title>
<link rel="stylesheet" href="../qunit.css">
<script src="../sinon-1.17.3.js"></script>
<script src="../jquery-2.2.2.min.js"></script>
<script src="../qunit.js"></script>
<script src="PreferenceControl.js"></script>
<script src="tests.js"></script>
</head>
<body>
<div id='MainContentDiv'>
<div id='PreferenceType'>PreferenceFrequency</div>
<div id='PreferenceId'>1</div>
<table id='RadioButtonList'>
<tbody>
<tr>
<td>
<span id='1'>
<input id='RadioButtonList_0' type='radio' name='RadioButtonList' value='1'>
</span>
</td>
</tr>
<tr>
<td>
<span id='2'>
<input id='RadioButtonList_1' type='radio' name='RadioButtonList' value='2' checked='checked'>
</span>
</td>
</tr>
<tr>
<td>
<span id='3'>
<input id='RadioButtonList_2' type='radio' name='RadioButtonList' value='3'>
</span>
</td>
</tr>
<tr>
<td>
<span id='4'>
<input id='RadioButtonList_3' type='radio' name='RadioButtonList' value='4'>
</span>
</td>
</tr>
</tbody>
</table>
<input type="submit" name="SaveButton" id="SaveButton" />
</div>
<div id="CheckBoxList"></div>
<div id="qunit"></div>
<div id="qunit-fixture">test markup</div>
</body>
Below is the section it's breaking on:
this.loaderContainer = $('#AjaxLoader', this.mainContentDiv);
if (this.loaderContainer.length == 0) {
this.loaderContainer = $("<div id=\"AjaxLoader\" class=\"full-width columns alpha omega\">" +
"<span class=\"loader\"><img src=\"/Common/CSS/Core/Images/Throbbers/Ajax-Loader.gif\" style=\"display: none\" ></span>" +
"</div>");
this.loaderContainer.appendTo(this.mainContentDiv);
}
this.loaderContainer.reveal({
animation: 'throbber'
});
These are the results of my break:
I'm not sure how to rectify this, or if it's possible the way I've done it? Any help would be much appreciated, thank you in advance.
jQuery does not have a reveal() method. I'm not sure what you're trying to do on that line of code, but perhaps you're looking for the show() method with an easing option specified?
The error you're seeing from QUnit is that the reveal() function does not exist (because it is not part of jQuery). If you are using a plugin that provides a reveal() function for you then you need to include that JS file in your test harness (the HTML document).
This is due to a missed reference to another library that deals with the .reveal method.