Das Problem, das ich habe, ist, dass die AJAX-Anfrage, die ich mache, blinkt, nachdem Sie ein Element aus einem Dropdown-Menü ausgewählt haben. Aus dem Flash des Textes sieht es so aus, als würde die Anfrage die richtigen Informationen abrufen.Ajax Anfragetext blinkt im DOM
Die Art, wie es funktionieren soll, ist den Mauszeiger über Drop-Down und wenn ein Anker-Tag geklickt wird, zeigen Sie diese Genres Filme.
Ich denke, was passiert ist, dass ich nicht an diesem Genre festhalte, bis eine andere Auswahl getroffen wird, wenn es ist, wie halte ich den Genre-Wert, bis ein neues Genre ausgewählt wird? Wenn es nicht ist, mache ich falsch?
Ich entfernte alle "Flaum" aus dem Code, so dass wir nur die nackten Knochen haben.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="script.js"></script>
<style>
.dropdown{
width: 151px;
}
.dropbtn{
width: 150px;
height: 30px;
border: 1px solid black;
border-radius: 2px;
background: white;
}
a{
display: block;
background-color: lightgreen;
width: 148px;
height: 30px;
text-align: center;
text-decoration: none;
padding-top: 10px;
border-bottom: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
}
a:hover{
background-color: lightblue;
}
.content{
display: none;
}
.dropdown:hover .content{
display: block;
}
</style>
</head>
<body onload='movieScript()'>
<div class="dropdown">
<button class="dropbtn">Select</button>
<div class="content">
<a class="anchor" href="" onclick="generateMovies('Comedy')">Comedy</a>
<a class="anchor" href="" onclick="generateMovies('Action')">Action</a>
<a class="anchor" href="" onclick="generateMovies('Biography')">Biography</a>
<a class="anchor" href="" onclick="generateMovies('Drama')">Drama</a>
<a class="anchor" href="" onclick="generateMovies('Crime')">Crime</a>
</div>
</div>
<div id="selectedMovies"></div>
</body>
</html>
JS:
var titles = [];//Will hold an array of titles
var imgs = [];//Will hold an array of imgs
var pos = 0;//Global position indicator which will be shared by all global arrays
movieScript = function(){
var movieData = "http://test.frontendhero.nl/movie-challenge/movies.json";
var myRequest;
//Test if XMLHttpRequest is available in active browser
try{
myRequest = new XMLHttpRequest();
}
catch(e){
try{
myRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
myRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
alert("Something broke!");
return false;
}
}
}
myRequest.onreadystatechange = function(){
if(myRequest.readyState === 4 && myRequest.status === 200){
var jsonObj = JSON.parse(myRequest.responseText);//Grabs json object
var data = jsonObj.data; //Grabbing data objects from json
var assets; //Will hold array of data objects
var movies =[]; //Array for actionMovie objects
var DOM = document.getElementById('selectedMovies');
generateMovies = function(userGenre){
//Outer level of json
for(var key in data){
assets = data[key].assets;
//Movie data of the json file cross checked with user selected genre
for(var x in assets){
if(assets[x].genre === userGenre){
movies[x] = assets[x];
}
}
}
//Add each element to an array of titles and imgms
for(var key in movies){
DOM.innerHTML = movies[key].title + movies[key].img;
}
}
}
}
myRequest.open("GET", movieData, true);
myRequest.send();
};
Jede Hilfe sehr geschätzt wird.