Только одно из меню отображает содержимое по клику с использованием JavaScript
Так что я работаю с API atm, и теперь я сделал код, который при щелчке в меню покажет содержимое элемента HTML с этой страницы.
Оба моих меню распечатаны из API для отображения в виде меню: один слева и один сверху внутри поля выбора на картинке https://gyazo.com/f896b7b578f04223bcdc9a06fe1124bd
Здесь вы можете увидеть, что при использовании меню верхнего выбора я могу получить содержимое из API для распечатки: https://gyazo.com/c784369a7bdfbba10012252d5ca0a516
Но НЕ с левой меней..
Вот код:
HTML
<!DOCTYPE html>
<html lang="se">
<head>
<title>Lediga tjänster hos Arbetsförmedlingen</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Play:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/styles.css" type="text/css">
</head>
<body>
<header id="mainheader">
<div class="contain">
<h1 id="logo">DT084G - Projekt</h1>
<section id="search">
<select id="searchlan" class="form-control"></select>
<input type="search" placeholder="Sök..." id="searchText" class="form-control">
<button id="searchbutton" class="btn btn-primary">Sök</button>
</section>
<!-- /#search -->
</div>
<!-- /.contain -->
</header>
<div class="container">
<h2>Lediga tjänster hos Arbetsförmedlingen</h2>
<div class="left">
<section class="lan">
<h3>Bläddra via län</h3>
<nav id="mainnav">
<ul id="mainnavlist"></ul>
<div class="spacer">
<input type="checkbox" id="onlyit"> <label for="onlyit">Visa endast Data/IT</label>
</div>
<div class="spacer">
<label for="numrows">Max antal: </label><input type="number" id="numrows" value="20" min="1" max="2000">
</div>
</nav>
</section>
<!-- /#lan -->
</div>
<!-- /.left -->
<div class="right">
<div id="info"></div>
<!-- /#info -->
</div>
<!-- /.right -->
<footer>
<p>Projektuppgift för kursen DT084G, Introduktion till programmering med JavaScript.</p>
</footer>
</div>
<!-- /.container -->
<script src="js/main.js"></script>
</body>
</html>
Javascript:
"use strict";
var URL = "http://api.arbetsformedlingen.se/af/v0";
//
// DOM onload
document.addEventListener("DOMContentLoaded", function () {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == XMLHttpRequest.DONE) {
if (xmlhttp.status == 200) {
var jsonData = JSON.parse(xmlhttp.responseText);
document.getElementById("searchlan").innerHTML = "";
for (var i = 0; i < jsonData.soklista.sokdata.length; i++) {
document.getElementById("mainnavlist").innerHTML += "<li id='" + jsonData.soklista.sokdata[i].id + "'>" + jsonData.soklista.sokdata[i].namn + "</li>";
document.getElementById("searchlan").innerHTML += "<option value='" + jsonData.soklista.sokdata[i].id + "'>" + jsonData.soklista.sokdata[i].namn + "</option>";
}
}
else if (xmlhttp.status == 400) {
alert('There was an error 400');
}
else {
alert('something else other than 200 was returned');
}
}
};
xmlhttp.open("GET", URL + "/platsannonser/soklista/lan", true);
xmlhttp.send();
});
//
// Choose LÄN from choicebox
document.getElementById("searchlan").addEventListener("change", function () {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == XMLHttpRequest.DONE) {
if (xmlhttp.status == 200) {
var jsonData = JSON.parse(xmlhttp.responseText);
document.getElementById("info").innerHTML = "";
for (var i = 0; i < jsonData.matchningslista.matchningdata.length; i++) {
// Genom att undvika att uppdatera DOMträdet med innerHTML hela tiden kan man öka exekveringshastighet
document.getElementById("info").innerHTML += "<h3>" + jsonData.matchningslista.matchningdata[i].yrkesbenamning + "</h3>";
document.getElementById("info").innerHTML += "<p>" + jsonData.matchningslista.matchningdata[i].annonsrubrik + "</p>";
document.getElementById("info").innerHTML += "Anställningstyp: " + jsonData.matchningslista.matchningdata[i].anstallningstyp + "<br/>";
document.getElementById("info").innerHTML += "Antal platser: " + jsonData.matchningslista.matchningdata[i].antalplatser + "<br/>";
document.getElementById("info").innerHTML += "Publiceringsdatum: " + jsonData.matchningslista.matchningdata[i].publiceraddatum + "<br/>";
document.getElementById("info").innerHTML += "Sista ansökningsdag: " + jsonData.matchningslista.matchningdata[i].sista_ansokningsdag;
// Button kan enklare hanteras med en "<a href" istället för att man använder en händelsehanterare
// implementerad på detta sätt för att ni ska se hur man läser ut dynamiskt data som skapats med innerHTML, e.target
// Ex. <a href="http://www.arbetsformedlingen.se/ledigajobb?id="+jsonData.matchningslista.matchningdata[i].annonsid ...
document.getElementById("info").innerHTML += "<p><button id='" + jsonData.matchningslista.matchningdata[i].annonsid + "' class='btn btn-primary'>Läs Mer</button></p>";
document.getElementById("info").innerHTML += "<hr/>";
}
}
else if (xmlhttp.status == 400) {
alert('There was an error 400');
}
else {
alert('something else other than 200 was returned');
}
}
};
var lanid = document.getElementById("searchlan").value;
var str = URL + "/platsannonser/matchning?lanid=" + lanid + "&antalrader=" + document.getElementById("numrows").value;
xmlhttp.open("GET", str, true);
xmlhttp.send();
});
//
// Show job -> Redirect to another page -> Läs Mer
document.getElementById('info').addEventListener("click", function (e) {
var url = "http://www.arbetsformedlingen.se/ledigajobb?id=" + e.target.id;
window.location.href = url;
});
- Кто-нибудь знает, как помочь мне сделать так, чтобы левое меню распечатало тот же результат? 2.Если я хочу использовать кнопку в левом нижнем углу, чтобы выбрать, сколько строк распечатать, как я это делаю?