so I'm parsing CSV files into JSON then editing them so I can get arrays which jquery will use to make a graph.
I'm trying to make a dropdown menu so the user can select a CSV file from which the graph will be made. So far I've worked with local files so I used {}. I am new to jquery and a beginner in html so please explain what's going on in the solutions.
edit: the files directory is "CSV/Sheet1.csv", Sheet2.csv...
One way to do this is to write a function which opens a specific file when the dropdown menu is selected, but I'd rather just have a single function that takes input from my menu.
here's my html, style sheet and the javascript I want it linking to.
function handleFileSelect(evt) {
if ( !(evt.target && evt.target.files && evt.target.files[0]) ) {
return;
}
Papa.parse(evt.target.files[0], {
header: true,
dynamicTyping: true,
delimiter: ";",
complete: function (results) {
debugDataset(results);
renderDataset(results);
}
});
}
function debugDataset(dataset) {
var formatted = JSON.stringify(dataset, null, 2);
}
function renderDataset(dataset) {
var raw_data = dataset;
var formatted_data = {};
for(var i in raw_data.data) {
var keys = Object.keys(raw_data.data[i]);
for(var k = 0, len = keys.length; k < len; k++) {
if(typeof formatted_data[keys[k]] !== "undefined") {
formatted_data[keys[k]].push(raw_data.data[i][keys[k]]);
} else {
formatted_data[keys[k]] = new Array(raw_data.data[i][keys[k]]);
}
}
}
console.log(formatted_data);
}
$(function () {
$("#csv-file").change(handleFileSelect);
});
.graphbox {
width:500px;
height:500px;
border:1px solid black;
padding:5px;
margin:auto;
}
.dropdownmenubox {
width:500px;
height:23px;
margin:auto;
border:1px solid black;
padding:5px;
}
.dropdownmenu {
width:500px;
margin:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>grafi revije</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/libs/jquery/jquery.js"></script>
<script src="js/libs/PapaParse/papaparse.js"></script>
<script src="index.js"></script>
<link type="text/css" rel="stylesheet" href="index.css"/>
</head>
<body>
<div class="graphbox"></div>
<div class="dropdownmenubox">
<select class="dropdownmenu">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
</div>
</body>
</html>
so the solution I'm currently using is this, and it works:
<!DOCTYPE html>
<html>
<head>
<title>grafi revije</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/jquery.js"></script>
<script src="js/papaparse.js"></script>
<link type="text/css" rel="stylesheet" href="index.css"/>
</head>
<body>
<div class="graphbox"></div>
<div class="dropdownmenubox">
<select name="CSV">
<option value="CSV/Sheet1.csv">1</option>
<option value="CSV/Sheet2.csv">2</option>
<option value="CSV/Sheet3.csv">3</option>
<option value="CSV/Sheet4.csv">4</option>
<option value="CSV/Sheet5.csv">5</option>
<option value="CSV/Sheet6.csv">6</option>
<option value="CSV/Sheet7.csv">7</option>
<option value="CSV/Sheet8.csv">8</option>
<option value="CSV/Sheet9.csv">9</option>
<option value="CSV/Sheet10.csv" selected="selected">10</option>
<option value="CSV/Sheet11.csv">11</option>
<option value="CSV/Sheet12.csv">12</option>
<option value="CSV/Sheet13.csv">13</option>
</select>
</div>
<script>
$( "select" ).change(function () {
$( "select option:selected" ).each(function() {
var variable = $(this).val();
console.log(variable);
Papa.parse(variable, {
dynamicTyping: true,
download: true,
complete: function(results) {
console.log(results);
}
});
});
})
.change();
</script>
</body>
</html>
Related
So i have 2 html pages (index.html and index2.html) and i can't call js function in index2.html .I set up a console.log() in every functions and nothing show up when i try to invoke functions from index2.html . I found nothing in the javascript that could create this issue. Here is my code :
index2.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="script.js"></script>
<input class="example_input" type="text" placeholder="Search.." id="search2">
<button id="button2" class ="example_button" type="submit" onclick="getvids()"><i class="fa fa-search"></i></button>
<br/>
<br/>
<label for="numofvids2">Nombre de vidéos:</label>
<select name="Vidsnum2" id="numofvids2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
</head>
<body>
<script src="script.js"></script>
<h1><span id="vidsdiv2"></span></h1>
</body>
</html>
script.js :
function getvids() {
console.log("getvids")
var suburl2 = document.getElementById("search2").value;
var numofvids2 = document.getElementById("numofvids2").value;
if (suburl2 != "") {
suburl2 = suburl2.replace(" ", "%20");
var url2 = 'https://api.dailymotion.com/videos?search='+suburl2+'&page=1&limit='+numofvids2+'&fields=thumbnail_1080_url'
var request2 = new XMLHttpRequest();
request2.open('GET', url2);
request2.responseType = 'json';
request2.onload = function() {
var texte2 = request2.response;
if (texte2.list[0] != undefined) {
var n2 = 0
while (texte2.list[n2] != undefined) {
var allvids2 = allvids2+texte2.list[n2].thumbnail_1080_url+"<br/>";
n2 = n2+1
};
var allvids2 = allvids2.replace("undefined", "")
document.getElementById("vidsdiv2").innerHTML = allvids2;
} else {
document.getElementById("vidsdiv2").innerHTML = "Not found";
};
};
request.send();
} else {
document.getElementById("vidsdiv2").innerHTML = "Empty research";
}
};
I'm trying to display a piece of styled text below a dropdown using the change function, the problem is the option that triggers the change is the first option when the page loads, and because it's disabled (which it needs to be), there is no way to change to it
Instead, I'm wondering if there is an alternative to change that loads the function when the page loads
Just to be clear, the text should not be visible when any other value is selected from the dropdown
I'm also struggling with assigning a class name to the printed text, I have commented out what I thought should work
Days of numerous different code examples, and although I'm closer than a few days ago, I still can't figure out the proper way
<!DOCTYPE html>
<html>
<head>
<title>Reports</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
select {
outline: none;
}
</style>
</head>
<body>
<select id="reports" class="w3-select w3-border" style="font-size: 20px;" name="reports">
<option value="0" disabled selected>- Choose -</option>
<optgroup label="Reports">
<option value="1">Report 1</option>
<option value="2">Report 2</option>
<option value="3">Report 3</option>
<option value="4">Report 4</option>
</optgroup>
</select>
<script type="text/javascript">
$(document).ready(function() {
$('#reports').change(function() {
if ($(this).val() == "0") {
var x = document.createElement("div");
// class = "w3-center w3-text-light-green"
x.textContent = "Choose Report From Menu";
document.body.appendChild(x);
}
});
});
</script>
</body>
</html>
The desired result is have the "styled" text appear when the page loads, but disappear when any other option from the dropdown is selected
add onchange="hide()" to <select...> and add div with text in body and after change just hide it.
<!DOCTYPE html>
<html>
<head>
<title>Reports</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
select {
outline: none;
}
</style>
</head>
<body>
<select id="reports" class="w3-select w3-border" style="font-size: 20px;" name="reports" onchange="hide()">
<option value="0" disabled selected>- Choose -</option>
<optgroup label="Reports">
<option value="1">Report 1</option>
<option value="2">Report 2</option>
<option value="3">Report 3</option>
<option value="4">Report 4</option>
</optgroup>
</select>
<div id="msg">"Choose Report From Menu"</div>
<script type="text/javascript">
function hide() {
msg.style.display='none';
};
</script>
</body>
</html>
If you're trying to execute that function one time when the page loads, try something like this:
$(document).ready(function () {
function reportsChange() {
if ($(this).val() == "0") {
var x = document.createElement("div");
// class = "w3-center w3-text-light-green"
x.textContent = "Choose Report From Menu";
document.body.appendChild(x);
}
}
$('#reports').change(function () {
reportsChange();
});
reportsChange();
});
This will execute the "reportsChange" function once when loading the page, and it will also be available for you to use whenever the on change event triggers.
I want to display all elements when the position is selected from a dropdown box when I select a position the correct elements display but when I select all to display all the elements nothing is displayed.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="underscore.js"></script>
<script type="text/javascript" src="players.js"></script>
<script type="text/javascript" src="playerFilter.js"></script>
</head>
<body>
<h1>Players by Position</h1>
<select id="position">
<option value=''>Select...</option>
<option value='All'>All</option>
<option value='Goalkeeper'>Goalkeeper</option>
<option value='Defender'>Defender</option>
<option value='Midfielder'>Midfielder</option>
<option value='Forward'>Forward</option>
</select>
<hr>
<div id="data"></div>
</body>
.JS File:
window.onload=function()
{
document.getElementById('position').onchange=function()
{
function getPlayerPosition(element)
{
if(element.Position == $("#position").val())
return true;
}
var playerPosition = _.filter(players, getPlayerPosition);
console.log(playerPosition);
$("#data").html("");
_.each(playerPosition, function(element){
$("#data").append(element.Name + "<br>");
});
}
}
Using only jquery you can do like this using [attribute-not-equal-selector] selector1
$("#position").on('change', function() {
var str = '';
if ($(this).val() === "All") {
var getAllElem = $("#position option").not("[value='All']").not("[value='']").each(function(i, v) {
str += $(v).text() + ' ';
})
$("#data").html(str);
} else {
$("#data").html($(this).val());
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Players by Position</h1>
<select id="position">
<option value=''>Select...</option>
<option value='All'>All</option>
<option value='Goalkeeper'>Goalkeeper</option>
<option value='Defender'>Defender</option>
<option value='Midfielder'>Midfielder</option>
<option value='Forward'>Forward</option>
</select>
<hr>
<div id="data"></div>
I have this dropdown list
#Html.DropDownList("orderPosted", orderList, new { data_native_menu = "false", data_options_prefix = "Insert at Position: ", data_mini = "true" })
and the script to update #itemPosition to pass it to the controller
#Html.Hidden("itemPosition")
<script>$("#itemPosition").val($("#orderPosted option:selected").text());
$(function () {
$("#orderPosted").on("change", function () {
$("#itemPosition").val($("option:selected", this).text());
});
})
</script>
It will assign the text to #itemPosition when the page loads, but the 'On Change' function is not working. What is wrong with the way I have this formatted.
Here is a working example, you can find out what you are doing wrong by comparing it with your code:
function getSelected(el) {
var value = el.val();
var text = el.find("option").filter(":selected").text();
$("#page-one pre").text("Selected: "+value+" - "+text);
}
$(document).on("pagecreate", "#page-one", function() {
getSelected($("#select-custom-1"));
$("#select-custom-1").change(function() {
getSelected($(this));
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page-one">
<div data-role="content" role="main">
<select name="select-custom-1" id="select-custom-1" data-native-menu="false">
<option value="1">The 1st Option</option>
<option selected value="2">The 2nd Option</option>
<option value="3">The 3rd Option</option>
<option value="4">The 4th Option</option>
</select>
<pre></pre>
</div>
</div>
</body>
</html>
BTW, yes you are right, the selected attribute won't be updated, but by using the filter as above, you will get (and can post back) the selected option(s) text as expected.
I have a selectpicker multiselect dropdown. I'm not able to invoke 'onclick' when I select any option. But this works with the normal html multiple dropdown. How to make it work with selectpicker?
Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-
select/1.6.3/css/bootstrap-select.min.css" />
<link rel="stylesheet" href="https:
//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script
src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
>
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-
select/1.6.3/js/bootstrap-select.min.js"></script>
</head>
<body>
<form action="/action_page.php">
<select class="selectpicker" name="cars" multiple>
<option value="volvo" onclick="myFunction(this)">Volvo</option>
<option value="bmw" onclick="myFunction(this)">Bmw</option>
<option value="opel" onclick="myFunction(this)">Opel</option>
<option value="audi" onclick="myFunction(this)">Audi</option>
</select>
<input type="submit">
</form>
<p>Hold down the Ctrl (windows) / Command (Mac) button to select
multiple options.</p>
<script type="text/javascript">
function myFunction(option) {
if (option.selected) {
alert(option.text);
}
}
</script>
</body>
</html>
I have changed the dropdownlist a bit below:
<select class="selectpicker" onchange="myFunction()" id="cars" name="cars" multiple>
<option value="volvo">Volvo</option>
<option value="bmw">Bmw</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
Then modified your myFunction below:
var oldarr = [];
var newarr = [];
function myFunction() {
if ($("#cars option:selected").length == 1) {
oldarr = [];
oldarr.push($("#cars option:selected").val());
alert($("#cars option:selected").val());
}
else {
newarr = [];
$("#cars option:selected").each(function(i){
newarr.push($(this).val());
});
newitem = $(newarr).not(oldarr).get();
if (newitem.length > 0) {
alert(newitem[0]);
oldarr.push(newitem[0]);
}
else {
oldarr = newarr;
}
}
}
Basically, the oldarr will store the previous list of selected items. Then we insert the latest list of selected items into newarr. Then we compare what is in the newarr but not in the oldarr. This way we can filter out only the latest clicked item. If the user deselects an item instead, we just assign the newarr to oldarr.
try this, use forEach to find selected option
var selectEl = document.querySelector('.selectpicker');
var options = document.querySelectorAll('.selectpicker option');
selectEl.addEventListener('change', function() {
options.forEach(function(option) {
if(option.selected) { alert(option.value); }
})
})
<select class="selectpicker" name="cars" multiple>
<option value="volvo">Volvo</option>
<option value="bmw">Bmw</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
or use jQuery find :select
$('.selectpicker').change(function() {
var thisValue = $(this).find(':selected').attr('value') ;
alert(thisValue);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select class="selectpicker" name="cars" multiple>
<option value="volvo">Volvo</option>
<option value="bmw">Bmw</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
Hope help :)
I have used jQuery to do this. since you use select from bootstrap, it will ordered as list not as options, thats why it didnt worked for you
$(function() {
$('.selectpicker').on('change', function(){
var selected = $(this).find("option:selected").text();
alert(selected);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
<form action="/action_page.php">
<select class="selectpicker" name="cars" multiple>
<option value="volvo" >Volvo</option>
<option value="bmw">Bmw</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
<p>Hold down the Ctrl (windows) / Command (Mac) button to select
multiple options.</p>
Hope this helps..!