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
});
});
});
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 want to use this code from Codepen. So, I right clicked on the result frame and chose View Frame source. Then I copied the source code and pasted it in my own text-editor.
But my webpage shows the codepart as blank.
I copied the source starting from <style> till </body> and inserted in my component.
When using the ZIP instead, I don't know how to use the code, because I just have a component and the ZIP contains a script.js and a style.css
What am I doing wrong?
Ok here's copy-and-pasting for dummies:
This is the html part:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dayparting</title>
<link rel="stylesheet" href="style.css">
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<table class="dayparts table">
<thead>
<tr>
<td class="cell-label presets-label"></td>
<td colspan="24"><span class="cell-label presetsSubtitle-label"></span>
<select v-model="selected" #change='clearAll();selectedFunc()'>
<option value="">Select a Preset</option>
<option value="0">None</option>
<option value="1">Afternoons</option>
<option value="2">Evenings</option>
<option value="3">Mornings</option>
<option value="4">Weekdays</option>
<option value="5">Weekends</option>
<option value="6">Weekends including Friday</option>
</select>
</td>
</tr>
<tr>
<td rowspan="2"></td>
<td class="cell-label am-label" colspan="12">AM</td>
<td class="cell-label pm-label" colspan="12">PM</td>
</tr>
<tr class="hour-row">
<td class="hour" v-for="hour in times" v-bind:value="hour.hour" v-on:click='setTime'>{{hour.hour}}
</td>
</tr>
</thead>
<tbody #mousedown='mouseDown' #mouseup='mouseUp' #mousemove='mouseMove'>
<tr class="day" v-for="day in days">
<td class="cell-label day-label" v-bind:value="day.dayNumber" v-bind:day-value="day.dayNumber"
v-on:click='activateDay'>{{day.dayName}}</td>
<td class='dayparts-cell' v-bind:value="hour.hour" data='day'
v-bind:class="{active: hour.isActive, preactive: hour.isPreActive}" v-for='hour in day.times'>
</td>
</tr>
</tbody>
</table>
</div>
<script src="main.js"></script>
</body>
</html>
This is the "head":
<head>
<meta charset="utf-8">
<title>Dayparting</title>
<link rel="stylesheet" href="style.css">
<script src="vue.js"></script>
</head>
1) Remove <link rel="stylesheet" href="style.css"> and add <style></style> in the same place. Fill it with the content of the css-part.
2) Replace "vue.js" in <script src="vue.js"></script> with "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" when you're in development or with "https://cdn.jsdelivr.net/npm/vue#2.6.11" for production.
Then go to the bottom of your html-code and find <script src="main.js"></script>. Remove it and add an empty <script></script> instead. Fill it with the copied Javascript part.
Now your page should run properly.
Tip: Do not use Ctrl + A in Codepen to select everything since it selects a few extra words then.
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
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