I am just trying to prototype a simple functionality using javascript for learning purpose, but the contents within the <p> tag are not updating and I am stuck at this point. My code is as follows:
<!DOCTYPE html>
<html>
<head>
<title> Ajax Search Box </title>
<script>
function LoadList()
{
var searchBox = document.getElementById("txtSearch");
var resultBox = document.getElementById("results");
var searchedChars = "";
var xHttp = new XMLHttpRequest();
searchedChars += searchBox.value;
xHttp.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200)
{
var xmlContent = this.responseXML;
var nameList = xmlContent.getElementsByTagName("name");
var dispText = "";
for(var i = 0 ; i < nameList.length ; i++)
{
dispText += nameList[i].textContent + "<br/>";
}
resultBox.innerHtml = dispText;
}
};
xHttp.open("GET","AssessorList.xml",true);
xHttp.send();
}
</script>
</head>
<body>
<input id="txtSearch" type="text" placeholder="Search" onkeyup="LoadList();" />
<p id="results">
No Data Available.
</p>
</body>
</html>
Could someone tell me why the innerHtml is not updating? Thanks in advance.
P.S: The code is fetching the data from the xml file as I could see in browser's console, the values being passed to the dispText variable.
<!DOCTYPE html>
<html>
<body>
<input id="txtSearch" type="text" placeholder="Search" onkeyup="LoadList();" />
<p id="results">No data available</p>
<script>
function LoadList() {
var xhttp = new
XMLHttpRequest();
var searchBox =
document.getElementById("txtSearch");
var resultBox = document.getElementById("results");
var searchedChars = "";
searchedChars += searchBox.value;
xhttp.onreadystatechange = function() {
//alert(this.status);
if (this.readyState == 4 && this.status == 200) {
var xmlContent = this.responseXML;
var nameList = searchedChars;
alert(nameList);
var dispText = "";
for(var i = 0 ; i < nameList.length ; i++)
{
dispText += nameList[i] + "<br/>";
}
resultBox.innerHTML = dispText;
}
};
xhttp.open("GET", "ajax.txt", true);
xhttp.send();
} </script>
</body>
</html>
Hope this may help you
Related
So I'm creating a search website where the user enters a part of a name or a full name and then presses a button. And based on the string entered, it displays a hint of names of actors that contain the string or sub-string. The names are stored in a mysql database.
I was able to accomplish all of that by using ajax to interact with php and php to interact with mysql database. However, if the user enters nothing, it's supposed to display nothing.
So I though of just deleting all names when the field text is empty (in other words, I just delete all p elements of a div).
That's where the problem is. Even though I used element.removeChild(), It doesn't delete anything. Instead, even when the string is empty and the user presses the button, it keeps the same info from the previous search. I already searched on similar questions about removeChild(), but none of the answers or hints I found have worked for me.
Here is the javascript and html code below.
var array = [];
var str = "";
var clicked_id = "";
var body = document.getElementsByTagName('BODY')[0];
var actors = document.getElementById('actors');
var roles = document.getElementById('roles');
actors.addEventListener("click", function(){
getData(this.id);
}, false);
roles.addEventListener("click", function(){
getData(this.id);
}, false);
function getData(myid) {
str = document.getElementById('mytext').value;
clicked_id = myid;
var id = "roles";
console.log(clicked_id);
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
array = JSON.parse(xmlhttp.responseText);
var element = document.createElement('div');
element.id = "mydiv";
if (str == "" && element.hasChildNodes() != null) {
while (element.hasChildNodes()) {
element.removeChild(element.lastChild);
}
} else {
for (var i = 0; i < array.length; i++) {
var p = document.createElement('p');
p.append(array[i]);
element.append(p);
}
body.append(element);
}
}
};
xmlhttp.open("GET", "controller.php?q="+str , true);
xmlhttp.send();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h2>Search for either all roles or all actors in the database imdb_small</h2>
<hr> Search string <br>
<input type="text" id="mytext"> <br>
<input type="button" value="Actors" id="actors">
<input type="button" value="Roles" id="roles" > <br> <br>
<hr> <br><br>
</body>
<?php
$servername="localhost";
$username="root";
$password="";
$dbname="demon";
//CREATE CONNECTION
$conn=new mysqli($servername,$username,$password,$dbname);
//CHECK CONNECTION
if ($conn->connect_error)
{
die("connection failed:".$conn->connect_error);
}
$sql="delete from category where SUBCATEGORY_ID='".$_GET["id"]."'";
$result=$conn->query($sql);
if ($result===TRUE)
{
echo"RECORD DELETED SUCCESSFULLY";
}
else
{
echo "ERROR:".$sql."<br>".$conn->error;
}
$conn->close();
?>
var array = [];
var str = "";
var clicked_id = "";
var body = document.getElementsByTagName('BODY')[0];
var actors = document.getElementById('actors');
var roles = document.getElementById('roles');
actors.addEventListener("click", function(){
getData(this.id);
}, false);
roles.addEventListener("click", function(){
getData(this.id);
}, false);
function getData(myid) {
str = document.getElementById('mytext').value;
clicked_id = myid;
var id = "roles";
console.log(clicked_id);
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
array = JSON.parse(xmlhttp.responseText);
// Check for an existing mydiv first here, before creating a new one
// If it exists then get it and check its child nodes
var element = document.getElementById('#mydiv');
element = element ? element : document.createElement('div');
element.id = "mydiv";
if (str == "" && element.hasChildNodes() != null) {
while (element.hasChildNodes()) {
element.removeChild(element.lastChild);
}
} else {
for (var i = 0; i < array.length; i++) {
var p = document.createElement('p');
p.append(array[i]);
element.append(p);
}
body.append(element);
}
}
};
xmlhttp.open("GET", "controller.php?q="+str , true);
xmlhttp.send();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h2>Search for either all roles or all actors in the database imdb_small</h2>
<hr> Search string <br>
<input type="text" id="mytext"> <br>
<input type="button" value="Actors" id="actors">
<input type="button" value="Roles" id="roles" > <br> <br>
<hr> <br><br>
</body>
I'm currently working on a weather site. I want to get the user input into a variable that changes the current city. Hope someone of you can help me.
var userInput = "London";
function changeValue() {
userInput = document.getElementById("user_Input").value;
document.getElementById("location").innerHTML = document.getElementById("user_Input").value;
}
window.onload = function() {
var api = "http://api.openweathermap.org/data/2.5/forecast/daily?q=";
var units = "&units=metric";
var url2 = api + userInput + units + APPID;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
var iconCode = myObj.list[0].weather[0].id;
var directions = myObj.list[0].deg;
for (var i = 0; i < 7; i++) {
document.getElementById("day" + i).innerHTML = Math.round(myObj.list[i].temp.day) + "°";
document.getElementById("icon" + i).src = "sl_line/" + iconCode + ".svg";
document.getElementById("wota" + i).innerHTML = wochentag[day.getDay()+i+1];
document.getElementById("humidity").innerHTML = Math.round(myObj.list[0].humidity);
document.getElementById("wind").innerHTML = myObj.list[0].speed + " m/s";
document.getElementById("direction").innerHTML = directions;
}
}
};
xmlhttp.open("GET", url2, true);
xmlhttp.send();
};
<article>
<input id="user_Input" type="text" placeholder="Ortsuchen...">
<button id="submit" onclick="changeValue()">Submit</button>
<span id="location">Unknown</span>
</article>
<section>
<div>
<div><span id="day0" class="ml:.25r fs:6r">0</span></div>
<div><span id="wochentage">0</span></div>
</div>
<div>
<img id="icon0">
</div>
<div>
<span id="wind">0</span><span id="direction"></span><span></span>
</div>
<div>
<span id="humidity">0</span><span>%</span>
</div>
</section>
location is getting updated after hitting the submit button. But the value of the variable doesn't change. I've already looked around stackoverflow and other sites but didn't find any solution that works for me.
1st : Your request will only run on page load . you need to run that again after user change the userInput .so make it as a function and call it every time of userInput change like this .
var userInput = "London";
function changeValue() {
userInput = document.getElementById("user_Input").value;
document.getElementById("location").innerHTML = document.getElementById("user_Input").value;
ajax_call();
}
function ajax_call(){
var api = "http://api.openweathermap.org/data/2.5/forecast/daily?q=";
var units = "&units=metric";
var url2 = api + userInput + units + APPID;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
var iconCode = myObj.list[0].weather[0].id;
var directions = myObj.list[0].deg;
for (var i = 0; i < 7; i++) {
document.getElementById("day" + i).innerHTML = Math.round(myObj.list[i].temp.day) + "°";
document.getElementById("icon" + i).src = "sl_line/" + iconCode + ".svg";
document.getElementById("wota" + i).innerHTML = wochentag[day.getDay()+i+1];
document.getElementById("humidity").innerHTML = Math.round(myObj.list[0].humidity);
document.getElementById("wind").innerHTML = myObj.list[0].speed + " m/s";
document.getElementById("direction").innerHTML = directions;
}
}
};
xmlhttp.open("GET", url2, true);
xmlhttp.send();
}
window.onload = function() {
ajax_call();
};
<article>
<input id="user_Input" type="text" placeholder="Ortsuchen...">
<button id="submit" onclick="changeValue()">Submit</button>
<span id="location">Unknown</span>
</article>
<section>
<div>
<div><span id="day0" class="ml:.25r fs:6r">0</span></div>
<div><span id="wochentage">0</span></div>
</div>
<div>
<img id="icon0">
</div>
<div>
<span id="wind">0</span><span id="direction"></span><span></span>
</div>
<div>
<span id="humidity">0</span><span>%</span>
</div>
</section>
I'm trying to use JavaScript to display data from an XML file. My data isn't being displayed to the web page and I'm not sure why.
Any help/advice would be appreciated. My code is displayed below.
NOTE - I have no experience with XML so be aware that I am completely new to it.
<script>
var xmlData;
function loadXml () {
var filename = "CDLibrary.xml";
var XMLhttp = new XMLHttpRequest();
XMLhttp.open("GET", filename, true);
var ok = true;
try {
XMLhttp.send();
}
catch(err) {
ok = false;
alert ("Database not found");
}
if (ok) {
xmlData = XMLhttp.responseXML;
displayXml(xmlData);
}
}
function displayXml () {
var CdElements;
var CdTitle;
var count;
CdElements = xmlData.getElementsByTagName("CD");
for (count = 0; count < CdElements.length; count=count+1) {
CdTitle = CdElements[count].getElementsByTagName("title");
document.getElementById("output").innerHTML = document.getElementById("output").innerHTML + CdTitle[0].childNodes[0].nodeValue + "</br>";
}
}
</script>
</head>
<body>
<div>
<p id="output">
</p>
<p id="buttons">
<input type="button" id="btnDisplay" value="Display CDs" onclick="loadXml();">
</div>
</body>
<html>
<head><title>Import XML Data</title></head>
<body>
<div>
<p id="output">
</p>
<p id="buttons">
<input type="button" id="btnDisplay" value="Display CDs" onclick="loadXml()">
</div>
<script>
var xmlData;
function loadXml () {
var filename = "CDLibary.xml";
var XMLhttp = new XMLHttpRequest();
XMLhttp.open("GET", filename, true);
var ok = true;
try {
XMLhttp.send();
}
catch(err) {
ok = false;
alert ("Database not found");
}
if (ok) {
xmlData = XMLhttp.responseXML;
displayXml(xmlData);
}
}
function displayXml(xmlDataBase) {
var CdElements;
var CdTitle;
var count;
CdElements = xmlDataBase.getElementsByTagName("CD");
for (count = 0; count < CdElements.length; count=count+1) {
CdTitle = CdElements[count].getElementsByTagName("title");
document.getElementById("output").innerHTML = document.getElementById("output").innerHTML + CdTitle[0].childNodes[0].nodeValue + "</br>";
}
}
</script>
</body>
</html>
You're not using the var xmlData instead you're using a var xmlDataBase. Replace you code to:
CdElements = xmlData.getElementsByTagName("CD");
And since you're using a global var xmlData, it's available inside displayXml function, in this case no need for function displayXml(xmlDataBase) if you use function displayXml() it'll be enough.
Using the w3schools link and changing some information and changing the directory I got it working. There must be an error in the template i was following, thank you all for your time and efforts.
<html>
<style>
table,th,td {
border : 1px solid black;
border-collapse: collapse;
}
th,td {
padding: 5px;
}
</style>
<body>
<button type="button" onclick="loadDoc()">Get my CD collection</button>
<br><br>
<table id="demo"></table>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "CDLibrary.xml", true);
xhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Artist</th><th>Title</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("performer")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
</script>
</body>
</html>
<html>
<body>
<input type="text" list="anrede" />
<datalist id="anrede"></datalist>
<script type="text/javascript">
var options='';
function readTextFile()
{
var rawFile = new XMLHttpRequest();
rawFile.open("GET", "file:///D:/search.txt", false);
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var allText = rawFile.responseText;
<!--allText array contains file elements inception force batman superman supergirl-->
var arr=allText.split("\n");
for(var i=0;i<arr.length;i++)
{
options += '<option value="'+arr[i]+'" />'; <!-- trying to add array elements for auto completion -->
}
document.getElementById('anrede').innerHTML = options;
}
}
}
rawFile.send(null);
}
readTextFile();
</script>
</body>
</html>
search.txt contains:
inception
force
batman
superman
supergirl
it is showing "null" at the end of elements in the result of auto completion when inputted in the text box.how to remove that??
<html>
<body>
<input type="text" list="anrede" />
<datalist id="anrede"></datalist>
<script type="text/javascript">
var options='';
function readTextFile()
{
var rawFile = new XMLHttpRequest();
rawFile.open("GET", "file:///D:/search.txt", false);
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var allText = rawFile.responseText;
//allText.replace(/[^\x20-\x7E]/gmi, "")
var arr=allText.trim().split("\n");
for(var i=0;i<arr.length;i++)
{
console.log(arr[i]);
options+='<optionvalue="'+arr[i].replace(/[^\x20-\x7E]/gmi, "")+'">';
}
document.getElementById('anrede').innerHTML = options;
}
}
}
rawFile.send(null);
}
readTextFile();
</script>
</body>
</html>
The simplest solution would be to simply add a null check into your loop:
for(var i = 0; i < arr.length; i++){
if(arr[i] !== null && arr[i].trim() !== ""){
options += '<option value="' + arr[i] + '" />';
}
}
This should prevent any blank options being added.
I'm very new to HTML.
I am trying to load an XML which contains image names and display it in a div dynamically.
I can see the image names but can't assing img a source.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
if (window.XMLHttpRequest) {xmlhttp=new XMLHttpRequest();}
else{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
xmlhttp.open("GET","resimler.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
x=xmlDoc.getElementsByTagName("pic");
i=0;
function displayFoto(){
ad=(x[i].getElementsByTagName("ad")[0].childNodes[0].nodeValue);
document.getElementById("showFoto").innerHTML="img/" + ad;}
function next(){
if (i<x.length-1){
i++;
displayFoto();}}
function previous(){
if (i>0){
i--;
displayFoto();}}
</script>
</head>
<body onload="displayFoto()">
<div id='showFoto'><img id='showFoto'></img></div><br>
<input type="button" onclick="previous()" value="<<" />
<input type="button" onclick="next()" value=">>" />
</body>
</html>
Can anyone please guide me?
document.getElementById("showFoto").src="img/" + ad;
this would help you to load image but i dont garanty about rest of the code. You better look for Loader frameworks and jquery.
I agree with Kemal, just give a snipet of your xml and also the id for div and img tag is same, is that something you are unaware of it or just intentional
<script type="text/javascript">
function loadXMLDoc()
{
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function ()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
xmlDoc = xmlhttp.responseXML;
var Image = "";
x = xmlDoc.getElementsByTagName("IMAGE");
for (i = 0; i < x.length; i++)
{
Image = Image + x[i].childNodes[0].nodeValue + " ";
var res = Image.split(" ");
var ii = res[i];
var img = document.createElement("img");
img.src = ii;
img.width = 150;
img.height = 100;
document.body.appendChild(img);
}
}
}
xmlhttp.open("GET", "ll.xml", true);
xmlhttp.send();
}
</script>
</head>
<body onload="loadXMLDoc()">
</body>