Cannot read property 'getElementsByTagName' - javascript

I want to create script, that returns all data from table(written in XML) and prints it out.
In this moment I have:
<!DOCTYPE html>
<html>
<head>head</head>
<body>
<p id="demo">body</p>
<script>
function loadXMLDoc(){
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.open("GET", "Czlonkowie.xml", true);
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
myFunction(xmlHttp);
}
};
xmlHttp.send();
};
function myFunction(xml){
var xmlDoc = xmlHttp.responseXML;
//parser = new DOMParser();
//xmlDoc = parser.parseFromString(xmlDoc,"text/xml"); // Parse string
var IdentyfikatorCzlonka = xmlDoc.getElementsByTagName("IdentyfikatorCzlonka")[0];
var Imie = xmlDoc.getElementsByTagName("Imie")[0];
var Nazwisko = xmlDoc.getElementsByTagName("Nazwisko")[0];
var DataUrodzenia = xmlDoc.getElementsByTagName("DataUrodzenia")[0];
var Ulica = xmlDoc.getElementsByTagName("Ulica")[0];
var Miasto = xmlDoc.getElementsByTagName("Miasto")[0];
var Wojewodztwo = xmlDoc.getElementsByTagName("Wojewodztwo")[0];
var KodPocztowy = xmlDoc.getElementsByTagName("KodPocztowy")[0];
var Email = xmlDoc.getElementsByTagName("Email")[0];
document.getElementById("demo").innerHTML = IdentyfikatorCzlonka;//.nodeValue;
}
</script>
<script>
loadXMLDoc()
</script>
</body>
</html>
And this is DataBase, written in XML:
<Czlonkowie>
<IdentyfikatorCzlonka>1</IdentyfikatorCzlonka>
<Imie>Katarzyna</Imie>
<Nazwisko>Szewczyk</Nazwisko>
<DataUrodzenia>1977-01-09</DataUrodzenia>
<Ulica>ul. Główna</Ulica>
<Miasto>Łódź</Miasto>
<Wojewodztwo>łódzkie</Wojewodztwo>
<KodPocztowy>12-456</KodPocztowy>
<Email>kasia#mail.com</Email>
</Czlonkowie>
<Czlonkowie>
<IdentyfikatorCzlonka>2</IdentyfikatorCzlonka>
<Imie>Bogdan</Imie>
<Nazwisko>Rawecki</Nazwisko>
<DataUrodzenia>1987-01-09</DataUrodzenia>
<Ulica>ul. Mała</Ulica>
<Miasto>Poznań</Miasto>
<Wojewodztwo>wielkopolskie</Wojewodztwo>
<KodPocztowy>34-565</KodPocztowy>
<Email>bogdan#mail.com</Email>
</Czlonkowie>
I got Error:
Cannot read property 'getElementsByTagName' of null
How solve it?
It looks like my post is mostly code, so they want me to add some more detalis.

Related

remove parsed element onclick

I have a parsed xml-file that shows twice the same element. Now I want a button that hides one of them with an onclick-statement. Does anyone know how to do this?
<!DOCTYPE html>
<html>
<body>
<p id="dasa"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "customers.xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var x = xmlDoc.getElementsByTagName("syl");
document.getElementById("dasa").innerHTML =
x[0].getAttribute('category') + "<br>";
document.getElementById("dasa").innerHTML +=
x[0].getAttribute('category');
}
function remove() {
x[0].removeAttribute('category');
}
</script>
<button onclick="remove()">remove</button>
</body>
</html>
x is undefined in your remove function.
function remove() {
x[0].removeAttribute('category');
}
You want something like this:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "customers.xml", true);
xhttp.send();
var xmlDoc;
var x;
function myFunction(xml) {
xmlDoc = xml.responseXML;
x = xmlDoc.getElementsByTagName("syl");
document.getElementById("dasa").innerHTML =
x[0].getAttribute('category') + "<br>";
document.getElementById("dasa").innerHTML +=
x[0].getAttribute('category');
}
function remove() {
x[0].removeAttribute('category');
}
This will make x into a global var set by myfunction.

Api Call Ajax n seconds GET request

The API shows live values and changes very frequently, so I am trying to make a call every second and show it to the webpage.
I tried a get request call every N seconds using set_interval() but the values load only once and don't make a call again.
<p id="val"></p>
<p id="val2"></p>
<p id="val3"></p>
<script>
var xhttp = new window.XMLHttpRequest();
xhttp.open("GET", "http_url_link", true);
xhttp.send();
xhttp.onreadystatechange = myFunction(xhttp);
function myFunction() {
if (xhttp.readyState == 4) {
var xmlDoc = xhttp.responseXML;
var val1= xmlDoc.getElementsByTagName('value_1')[0].childNodes[0];
var val2 = xmlDoc.getElementsByTagName('value_2')[0].childNodes[0];
var val3 = xmlDoc.getElementsByTagName('value_3')[0].childNodes[0];
document.getElementById('val3').innerHTML =
v3.nodeValue;
document.getElementById('val').innerHTML =
v1.nodeValue;
document.getElementById('val2').innerHTML =
v2.nodeValue;
}
}
myFunction();
setInterval(myFunction, (1000));
</script>
var xhttp = new window.XMLHttpRequest();
here xhttp object create once when the script is running And you get proper output for one time. So you need to call this after 1 second.
function myFunction() {
var xhttp = new window.XMLHttpRequest();
xhttp.open("GET", "http_url_link", true);
xhttp.send();
xhttp.onreadystatechange = function(){
if (xhttp.readyState == 4) {
var xmlDoc = xhttp.responseXML;
var val1=xmlDoc.getElementsByTagName('value_1'[0].childNodes[0];
var val2 = xmlDoc.getElementsByTagName('value_2')[0].childNodes[0];
var val3 = xmlDoc.getElementsByTagName('value_3')[0].childNodes[0];
document.getElementById('val3').innerHTML=v3.nodeValue;
document.getElementById('val').innerHTML=v1.nodeValue;
document.getElementById('val2').innerHTML=v2.nodeValue;
}
}
setInterval(myFunction,(2000));
Happy coding :)
Try this:
function myFunction() {
function foo(){ alert("Hello"); }
setTimeout(myFunction, 1000);
foo();
}
myFunction();
The code to make the API call is outside the function.
function myFunction()
{
var xhttp = new window.XMLHttpRequest();
xhttp.open("GET", "http_url_link", true);
xhttp.send();
xhttp.onreadystatechange = myFunctionRes(xhttp);
}
function myFunctionRes()
{
if (xhttp.readyState == 4)
{
var xmlDoc = xhttp.responseXML;
var val1= xmlDoc.getElementsByTagName('value_1')[0].childNodes[0];
var val2 = xmlDoc.getElementsByTagName('value_2')[0].childNodes[0];
var val3 = xmlDoc.getElementsByTagName('value_3')[0].childNodes[0];
document.getElementById('val3').innerHTML =
v3.nodeValue;
document.getElementById('val').innerHTML =
v1.nodeValue;
document.getElementById('val2').innerHTML =
v2.nodeValue;
}
}
setInterval(myFunction, (1000));

Trouble with having global JavaScript variables updated

I am trying to get a XML document sorted and decided to go for the "sort via XSLT" approach.
However, I am having trouble updating my two global variables that should contain the content of the XML and XSLT files and I can't really figure out why.
Up until now I never had this kind of problem and global variables used to work... I also didn't declare them inside the functions, but used the global name instead and also tried using window.variable, but to no avail.
Does anyone have an idea why the code doesn't update the global variable?
best regards,
daZza
<script type="text/javascript">
var xml = "";
var xsl = "";
function callSort()
{
loadSortXML();
loadSortXSLT();
sortXML();
}
function loadSortXML()
{
var xmlHttp = null;
var xmlData;
var xmlFile = "data/LessonsLearned.xml";
if (typeof XMLHttpRequest != 'undefined')
{
xmlHttp = new XMLHttpRequest();
}
if (!xmlHttp)
{
try
{
xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");
}
catch(e)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
}
catch(e)
{
xmlHttp = null;
}
}
}
if (xmlHttp)
{
var url = xmlFile;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = function()
{
if (xmlHttp.readyState == 4)
{
xml = xmlHttp.responseXML;
}
}
xmlHttp.send();
}
}
function loadSortXSLT()
{
var xmlHttp = null;
var xmlData;
var xmlFile = "data/xslt.xml";
if (typeof XMLHttpRequest != 'undefined')
{
xmlHttp = new XMLHttpRequest();
}
if (!xmlHttp)
{
try
{
xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");
}
catch(e)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
}
catch(e)
{
xmlHttp = null;
}
}
}
if (xmlHttp)
{
var url = xmlFile;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = function()
{
if (xmlHttp.readyState == 4)
{
xsl = xmlHttp.responseXML;
}
}
xmlHttp.send();
}
}
function sortXML()
{
console.log("XML " + xml);
console.log("XSL "+ xsl);
var parser = new DOMParser();
var domToBeTransformed = parser.parseFromString(xml, "text/xml");
var xslt = parser.parseFromString(xsl, "text/xml");
var processor = new XSLTProcessor();
processor.importStylesheet(xslt);
var newDocument = processor.transformToDocument(domToBeTransformed);
var serializer = new XMLSerializer();
var newDocumentXml = serializer.serializeToString(newDocument);
alert(newDocumentXml);
}
</script>

Javascript interfering with each other

As I know very little about Javascript and Jquery I am hoping to be able to get an answer here.
Here is the code in my <head></head> of my document.
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/functions.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jscolor/jscolor.js"></script>
<script type="text/javascript">
var current_shouts = 0;
function $(eleid) {
return document.getElementById(eleid);
}
function urlencode(u) {
u = u.toString();
var matches = u.match(/[\x90-\xFF]/g);
if (matches) {
for (var mid = 0; mid < matches.length; mid++) {
var char_code = matches[mid].charCodeAt(0);
u = u.replace(matches[mid], '%u00' + (char_code & 0xFF).toString(16).toUpperCase());
}
}
return escape(u).replace(/\+/g, "%2B");
}
function shouts() {
clearTimeout(getshout);
var xmlHttp = (window.XMLHttpRequest) ? new XMLHttpRequest : new ActiveXObject("Microsoft.XMLHTTP");
xmlHttp.open("GET", "../shoutbox/shouts.php?i=" + Math.random());
xmlHttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (parseInt(this.responseText) > current_shouts) {
getshouts();
current_shouts = parseInt(this.responseText);
}
getshout = setTimeout("shouts()", 1000);
}
}
xmlHttp.send(null);
}
function getshouts() {
var xmlHttp = (window.XMLHttpRequest) ? new XMLHttpRequest : new ActiveXObject("Microsoft.XMLHTTP");
xmlHttp.open("GET", "../shoutbox/getshouts.php?i=" + Math.random());
xmlHttp.onreadystatechange = function() {
if (this.readyState == 4) $("shoutbox").innerHTML = this.responseText;
$("shoutbox").scrollTop = $("shoutbox").scrollHeight;
}
xmlHttp.send(null);
}
function push_shout() {
shout();
return false;
}
function shout() {
var xmlHttp = (window.XMLHttpRequest) ? new XMLHttpRequest : new ActiveXObject("Microsoft.XMLHTTP");
xmlHttp.open("POST", "../shoutbox/shout.php");
var data = "user=" + urlencode($("user").value) + "&" + "shout=" + urlencode($("shout").value);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-length", data.length);
xmlHttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (!this.responseText) $("shout").value = "";
else {
$("console").innerHTML = this.responseText;
setTimeout("$('console').innerHTML = ''", 5000);
}
getshouts();
}
}
xmlHttp.send(data);
return true;
}
var getshout = setTimeout("shouts()", 1000);
</script>
It seems when I put the typed code above everything, it does not work, but the others do, if the code sits as it is shown above it works, but the scripts above it do not work anymore.
I have tried $.noConflict(); but it seems it did nothing, so I am not sure what I am to do here.
Any suggestions?
try something like:
$j = jQuery.noConflict();
then you can use $j to refer to the jQuery object whenever you need to.
I had a problem with jQuery plugins clashing somehow.
I loaded both into the head of the html document, between consecutive separated script tag zones. Then I used:
window.onload = function() {function01(); function02();};
to load each function in an orderly fashion and separately.
It worked for me this time.

Parsing or using variables from a called script?

I have an AJAX function which loads content from a file and displays in the file that called it.
But the script that was called I want to loop an array which is actually set in the script that called it... this is main script that calls the file:
function call_file(file, div_id) {
var xmlhttp;
if(window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById(div_id).innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", file, true);
xmlhttp.send();
}
var global = new Array();
global[0] = 1;
global[1] = 2;
call_script('html.html', 'main');
html.html is the file that is called which has this:
<script>
i = 0;
for(var id in global) {
alert(i + ' = ' + id);
i++;
}
</script>
Is this at all possible?
One way is to extract the script and eval it yourself. For example:
//....
document.getElementById(div_id).innerHTML = xmlhttp.responseText;
var str = xmlhttp.responseText;
var reg = /<script>([^>]*)<\/script>/img;
while(reg.test(str))eval(RegExp.$1);
//...

Categories