using ajax request to get xml data and make javascript load image

Question

I am using a ajax request to load data from the server. A php file presents an xml file. I get all the data succesfully but i cannot get the imgage on screen.

In the code below in the for ... loop i made some comments what i try to do. Can someone explain how i make the script load images wich i add dinamicly using javascript.

The valIMG is added at the bottom afther the button using appendChild.

function updatePlaneten(){
var valDiv, planets , valButton, textNode;

// Get xml files
planets = this.responseXML.getElementsByTagName("planeet");

// loop through the <planet> tags 
for(var i=0;i<planets.length;i++){
(function(num){

        valDiv = document.createElement("div");
        valDiv.setAttribute("class", "divPresentPlanet" );

// I try to add an img element here.
// the variable imagename containts the path to the img: 'images/moon.jpg'
// appending it does add it to the div, tho the image isnt loaded
        var valIMG = document.createElement("image");
        var imagename = planets[num].getElementsByTagName("img")[0].childNodes[0].nodeValue;
        valIMG.setAttribute("src", imagename );
        valIMG.setAttribute("class", "IMGTAGPresentPlanet" );


            // Get the id and the name from the xml info in current <planet> tag
            var IDplanet = (planets[num].getElementsByTagName("id")[0].childNodes[0].nodeValue)-1;
            var id = planets[num].getElementsByTagName("id")[0].childNodes[0].nodeValue + "<br>";
            var name = planets[num].getElementsByTagName("name")[0].childNodes[0].nodeValue + "<br>";
            var img = planets[num].getElementsByTagName("img")[0].childNodes[0].nodeValue + "<br>";
            valDiv.innerHTML = id+"<br>"+name+"<br>"+ img +"<br>";

            // Create button with a value and pass in this object for later reference use (valButton.object=this)
            valButton = document.createElement("input");
            //  valButton.setAttribute("planeetID", planets[i].getElementsByTagName("id")[0].childNodes[0].nodeValue);
            valButton.setAttribute("value", 'Meer info');
            valButton.setAttribute("type", 'button');
            valButton.id = num;
            valButton.object = this;    
            // FIX: PASS showinfo TO AN ANONYMOUS FUNCTION CONTAINING THE OBJECT
            valButton.addEventListener('click', function(){
             showinfo(valButton, planets, IDplanet);   
            });

        // Place the button on screen
        valDiv.appendChild(valButton);

        valDiv.appendChild(valIMG);
        // place img tag on screen
        valDiv.appendChild(valIMG);

        document.getElementById("planetenID").appendChild(valDiv);

    }(i));
}

}

score 0 · Answer 1 · edited May 23 '17 at 12:04

0

Your image path should have absolute or relative to your domain, example '/images/moon.jpg' in your case maiby you have some url yourdomain.com/something and maiby your url is not correct if you put src="image/moon.jpg".
Acoorting to What is the best JavaScript code to create an img element you should have

document.createElement('img')

insteand of document.createElement('image')

edited May 23 '17 at 12:04

Community

1
1

answered Jan 02 '16 at 09:45

Laurentiu

574
6
26

Tnx for the answers. – Walter Pothof Jan 02 '16 at 10:23
Problem here was the creating of the img element, using document.createElement('image') doenst work. I changed this into document.createElement('img') and now it works fine tnx. – Walter Pothof Jan 02 '16 at 10:24
So in fact the question i asked was simple. I made a error in the code. But using an image of which i have the path i can just use to reference the path of the image. I dont have to code anything in ajax its just like inserting new css it will find the image and use it, it dont have to load it. – Walter Pothof Jan 02 '16 at 10:30

using ajax request to get xml data and make javascript load image

1 Answers1