W.Kurek W.Kurek - 4 months ago 13
Ajax Question

How can I add divs to existing div correctly?

I'm creating a page which displays data from database as

div
elements. At the beginning, I want to show all the data and them if the user types something in the form, then presented data will fit into the user search result.

I'm using
AJAX
technique.

The code is not working in the desired way because there is no
div
on the screen. I think that it is something to do with the declaration of
div
but I'm not sure where I'm going wrong.?

<script>


function getData1(search)
{

if(search=="")
{

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
data = JSON.parse(xmlhttp.responseText);
fill1(data);

}
};

xmlhttp.open("GET",'ex2.php?q=0', true);
xmlhttp.send();

}
else
{

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
data = JSON.parse(xmlhttp.responseText);
fill1(data);

}
};

xmlhttp.open("GET",'ex2.php?q='+search, true);
xmlhttp.send();



}

}

function fill1(data)
{

parent = document.getElementById('contener');
parent.innerHTML = "";


for(i=0, len =data.length; i<len; i++)
{


var div = document.createElement('div');
div.innerHTML = '<div class="tile" id='+data[i][0]+' onClick="detail(this.id)">


+'<div class="date"><i class="icon-calendar"></i>'+data[i][3]+'</div>'
+'<div class="features">'

+'<div id="distance" class="sq">'

+'<div class="img"><i class="icon-distance"></i></div>'
+'<div class="description">'+data[i][1]+' km</div>'
+'<div style="clear:both"></div>'

+'</div>'
+'<div id="time" class="sq">'

+'<div class="img"><i class="icon-time"></i></div>'
+'<div class="description">'+data[i][2]+'</div>'
+'<div style="clear:both"></div>'

+'</div>'
+'<div id="velocity" class="sq">'

+'<div class="img"><i class="icon-velocity"></i></div>'
+'<div class="description">'+data[i][4]+' km/h</div>'
+'<div style="clear:both"></div>'

+'</div>'
+'<div style="clear:both"></div>'

+'</div>'

+'</div>';


parent.append(div);

}


}


$('document').ready(getData1(""));

</script>


HTML part

<div id="contener"></div>
<div id="search">

<form>

<input type="text" onkeyup="getData(this.value)">

</form>

</div>
<div style="clear:both"></div>

Answer

First thing first.

You are calling a getData() function on onkeyup="getData(this.value)"where as in script tag you have a function named getData1(). There is a typo I guess.

First change this onkeyup="getData(this.value)" to onkeyup="getData1(this.value)"

Moreover, You are calling a function without terminotor in statement $('document').ready(getData1("")); it should be

$(document).ready(function() {
        getData1('');
});

And lastly, you are missing a ending apostrophe

div.innerHTML = '<div class="tile" id='+data[i][0]+' onClick="detail(this.id)">

it should be

 div.innerHTML = '<div class="tile" id='+data[i][0]+' onClick="detail(this.id)">'