Js fonctions only working with index.html

Js fonctions only working with index.html - javascript

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";
}
};

Related

How to display all elements from a Javascript file

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>

Translation in multipage application

i am working on hybrid multipage application. My problem is the dropdown list select option is not responsive or i am able to click it but it is responsive or works when i remove the pageload block.
var pagesHistory = [];
var currentPage = {};
var path = "";
var busyIndicator = null;
function wlCommonInit(){
busyIndicator = new WL.BusyIndicator( null, {text : ''});
// Special case for Windows Phone 8 only.
if (WL.Client.getEnvironment() == WL.Environment.WINDOWS_PHONE_8) {
path = "/www/default/";
}
$('#languages').bind('change', languageChanged);
var locale = WL.App.getDeviceLocale();
var lang = WL.App.getDeviceLanguage();
WL.Logger.debug(">> Detected locale: " + locale);
WL.Logger.debug(">> Detected language: " + lang);
if (locale.indexOf("en")!=-1) languageChanged("english");
if (locale.indexOf("ar")!=-1) languageChanged("arabic");
function languageChanged(lang) {
if (typeof(lang)!="string")
lang = $("#languages").val();
switch (lang){
case "english":
setEnglish();
break;
case "arabic":
setArabic();
break;
}
if ($("#languages").val()=="arabic")
$("#wrapper").css({direction: 'rtl'});
else
$("#wrapper").css({direction: 'ltr'});
$("#loginusername").html(Messages.loginusername);
$("#loginpassword").html(Messages.loginpassword);
$("#actionsLabel").html(Messages.actionsLabel);
}
$("#pageload").load(path + "pages/loginpage.html", function(){
$('#loginwrapper').hide();
$.getScript(path + "js/loginpage.js", function() {
if (currentPage.init) {
currentPage.init();
}
$('#loginwrapper').fadeIn(5000);
});
});
}
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>hrapp</title>
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="css/main.css">
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body>
<div id="w1wap">
<label for="languages" id="actionsLabel" class="translate"></label>
<select id="languages">
<option value="" selected="selected">--Select--</option>
<option value="english" id="englishLanguage" class="translate"></option>
<option value="arabic" id="arabicLanguage" class="translate"></option>
</select>
</div>
<div id="pageload">
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
</html>

Using jQuery pass a variable to .php

I'm attempting to make a selection and pass the variable to a .php page. I can do it with the jQuery examples on a date selector ... but can't figure it out on the menu selector. When I use this control in conjunction with the datepicker, it allows me to pass both variables, but when I just use it by itself, it doesn't hand it off.
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<title>DailyRecords</title>
<link rel="stylesheet" href="jquery/jquery-ui.css">
<script src="jquery/js/jquery-1.10.2.js"></script>
<script src="jquery/jquery-ui.js"></script>
<html>
<head>
<html>
<head>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","roster.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<script>
$(function() {
$( "#restaurant" ).selectmenu({
});
});
</script>
<table>
<form>
<td>
<select name="restaurant" id="restaurant" onchange="showUser(this.value)">
<option value="">selection</optoin>
<option value="101">DA</option>
<option value="102">FV</option>
<option value="103">CS</option>
<option value="104">TO</option>
</select>
</td>
</form>
</table>
<div id="txtHint"><b>Select restaurant</b></div>
</body>
</html>

Use my code it will work. But make sure your jquery files jquery/js/jquery-1.10.2.js available in the right path or not?
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<title>DailyRecords</title>
<link rel="stylesheet" href="jquery/jquery-ui.css">
<script src="jquery/js/jquery-1.10.2.js"></script>
<script src="jquery/jquery-ui.js"></script>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
}
else
{
$.ajax({
url: "roster.php",
data : "q="+str, //if you want to pass one variable
//data : "name="+name+"&natives="+natives, //if you want to pass more than 1 variable
type : "POST", // if you want to pass get method put "GET"
success :function(text){
alert(text);
document.getElementById('txtHint').innerHTML=text;
}
});
}
}
</script>
</head>
<body>
<table>
<form>
<td>
<select name="restaurant" id="restaurant" onchange="showUser(this.value)">
<option value="">selection</optoin>
<option value="101">DA</option>
<option value="102">FV</option>
<option value="103">CS</option>
<option value="104">TO</option>
</select>
</td>
</form>
</table>
<b>Select restaurant</b> <div id="txtHint"></div>
</body>
</html>
roster.php file
<?php
echo $_POST['q'];
?>

since you using jquery you can do it like bellow :
<script>
function showUser(str)
{
var datastring ;
datastring = "q="+str;
$.post("roster.php",datastring,function(){
//your result here
});
}
</script>

Use this following code
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<title>DailyRecords</title>
<link rel="stylesheet" href="jquery/jquery-ui.css">
<script src="jquery/js/jquery-1.10.2.js"></script>
<script src="jquery/jquery-ui.js"></script>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
}
else
{
$.ajax({
url: "roster.php",
data: {"q":str}, //if you want to pass one variable
type : "POST", // if you want to pass get method put "GET"
success :function(data){
console.log(data);
document.getElementById('txtHint').innerHTML=data;
}
});
}
}
</script>
</head>
<body>
<table>
<form>
<td>
<select name="restaurant" id="restaurant" onchange="showUser(this.value)">
<option value="">selection</optoin>
<option value="101">DA</option>
<option value="102">FV</option>
<option value="103">CS</option>
<option value="104">TO</option>
</select>
</td>
</form>
</table>
<b>Select restaurant</b> <div id="txtHint"></div>
</body>
</html>
get post value in poster.php
<?php
if(isset($_POST['q'])){
echo $_POST['q'];
}
?>

<select> dropdown menu to target files that javascript opens

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>

directing user to url based on his choice from dropdown menu

i have found a script that do what i need (dropdown menus) but i want it to take user to an external/internal url based on his choice from the dropdown menu for example if he choose USA and then NY they go to url#1 and if choose USA and NJ go to url#2, that's all i want
the script:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var citiesByState = {
USA: ["NY","NJ"],
Singapore: ["taas","naas"]
}
function makeSubmenu(value) {
if(value.length==0) document.getElementById("citySelect").innerHTML = "<option></option>";
else {
var citiesOptions = "";
for(cityId in citiesByState[value]) {
citiesOptions+="<option>"+citiesByState[value][cityId]+"</option>";
}
document.getElementById("citySelect").innerHTML = citiesOptions;
}
}
function displaySelected() {
var country = document.getElementById("countrySelect").value;
var city = document.getElementById("citySelect").value;
alert(country+"\n"+city);
}
function resetSelection() {
document.getElementById("countrySelect").selectedIndex = 0;
document.getElementById("citySelect").selectedIndex = 0;
}
</script>
</head>
<body onload="resetSelection()">
<select id="countrySelect" size="1" onchange="makeSubmenu(this.value)">
<option></option>
<option>USA</option>
<option>Singapore</option>
</select>
<select id="citySelect" size="1">
<option></option>
</select>
<button onclick="displaySelected()">show selected</button>
</body>
</html>
please help!

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var citiesByState = {
"USA": ["NY","NJ"],
"Singapore": ["taas","naas"]
}
var navURLs = {
"USA": {"NY": "http://www.yahoo.com","NJ": "http://www.google.com"},
"Singapore": {"taas": "http://www.bing.com","naas": "http://www.ibm.com"}
}
function makeSubmenu(value) {
if(value.length==0) document.getElementById("citySelect").innerHTML = "<option></option>";
else {
var citiesOptions = "";
for(cityId in citiesByState[value]) {
citiesOptions+="<option>"+citiesByState[value][cityId]+"</option>";
}
document.getElementById("citySelect").innerHTML = citiesOptions;
}
}
function displaySelected() {
var country = document.getElementById("countrySelect").value;
var city = document.getElementById("citySelect").value;
alert(country+"\n"+city);
navURL = navURLs[country][city];
if(navURL){
alert(navURL);
window.location.href = navURL;
}
}
function resetSelection() {
document.getElementById("countrySelect").selectedIndex = 0;
document.getElementById("citySelect").selectedIndex = 0;
}
</script>
</head>
<body onload="resetSelection()">
<select id="countrySelect" size="1" onchange="makeSubmenu(this.value)">
<option></option>
<option>USA</option>
<option>Singapore</option>
</select>
<select id="citySelect" size="1">
<option></option>
</select>
<button onclick="displaySelected()">show selected</button>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

Js fonctions only working with index.html - javascript

Related

How to display all elements from a Javascript file

Translation in multipage application

Using jQuery pass a variable to .php

<select> dropdown menu to target files that javascript opens

directing user to url based on his choice from dropdown menu

Categories

Resources