Froy T Froy T - 1 year ago 79
HTML Question

Ajax request text flashes in the DOM

The issue I am having is that the AJAX request I am making flashes after selecting an item from a drop down menu. From the flash of text it looks like the request is pulling the correct information.

The way it is supposed to work is hover over drop down and when an anchor tag is clicked display that genres movies.

I think what is happening is that I am not holding onto that genre until another selection is made, if it is how do I hold the genre value until a new genre is selected? If it's not wth am I doing wrong?

I removed all the 'fluff' from the code so we just have the bare bones.


<!DOCTYPE html>
<html lang="en">
<script src="script.js"></script>
width: 151px;
width: 150px;
height: 30px;
border: 1px solid black;
border-radius: 2px;
background: white;
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;
background-color: lightblue;
display: none;
.dropdown:hover .content{
display: block;

<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 id="selectedMovies"></div>



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 = "";
var myRequest;
//Test if XMLHttpRequest is available in active browser
myRequest = new XMLHttpRequest();
myRequest = new ActiveXObject("Msxml2.XMLHTTP");
myRequest = new ActiveXObject("Microsoft.XMLHTTP");
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 =; //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;
}"GET", movieData, true);

Any help is appreciated.

Answer Source

When you click on the link, it links to the href URL, and an empty URL means to reload the current page. You can prevent this by returning false from the onclick:

<a class="anchor" href="" onclick="generateMovies('Comedy'); return false;">Comedy</a>

Or you can use a javascript:void(0) URL:

<a class="anchor" href="javascript:void(0)" onclick="generateMovies('Comedy')">Comedy</a>

or you can use the # URL as you discovered.