Using AJAX I have retrieved Json information but, during the function, I cannot display the text in the relevant Div.

The code works right to the bottom, as I can see using the console, but even if I put placeholder text in the div "place", the placeholder text stays the same right to the end of the function.

            $.each(data, function(i,item){
                if(i===0){
                    var placeHTML='<h2>'+item.name+'</h2>' +
                    '<p>where you can get <br>' +
                    'a pint of <em>'+item.pint+'</em> for only<br>' +
                    '<span>£'+item.cost+'!</span></p>';

                    window.localStorage.setItem("placeName", item.name);
                    window.localStorage.setItem("placeLoc1", item.location);
                    window.localStorage.setItem("placeLoc2", item.location2);
                    window.localStorage.setItem("placeEmail", item.email);
                    window.localStorage.setItem("placeNumber", item.number);

                    console.log("Data saved");

                    document.getElementById("place").innerHtml = placeHTML;

                    console.log("Data placed:");
                    console.log(placeHTML);

                    $("#loadText").fadeOut();
                    $('#place').fadeIn();

                    return false;
                }
            });

I have also tried replacing document.getElementById("place").innerHTML = foo to $("#place").val(foo) with no luck.

The div has the values id="place" and class="place".

Using AJAX I have retrieved Json information but, during the function, I cannot display the text in the relevant Div.

The code works right to the bottom, as I can see using the console, but even if I put placeholder text in the div "place", the placeholder text stays the same right to the end of the function.

            $.each(data, function(i,item){
                if(i===0){
                    var placeHTML='<h2>'+item.name+'</h2>' +
                    '<p>where you can get <br>' +
                    'a pint of <em>'+item.pint+'</em> for only<br>' +
                    '<span>£'+item.cost+'!</span></p>';

                    window.localStorage.setItem("placeName", item.name);
                    window.localStorage.setItem("placeLoc1", item.location);
                    window.localStorage.setItem("placeLoc2", item.location2);
                    window.localStorage.setItem("placeEmail", item.email);
                    window.localStorage.setItem("placeNumber", item.number);

                    console.log("Data saved");

                    document.getElementById("place").innerHtml = placeHTML;

                    console.log("Data placed:");
                    console.log(placeHTML);

                    $("#loadText").fadeOut();
                    $('#place').fadeIn();

                    return false;
                }
            });

I have also tried replacing document.getElementById("place").innerHTML = foo to $("#place").val(foo) with no luck.

The div has the values id="place" and class="place".

• javascript
• jquery
• html
• ajax

• could you provide a jsfiddle? – Eric Goncalves Commented Feb 14, 2013 at 16:08
• Where does the ajax e in? – Kevin B Commented Feb 14, 2013 at 16:08
• And why are you iterating over one instance only? and it's .innerHTML = placeHTML or $('#place').html(placeHTML) ... – adeneo Commented Feb 14, 2013 at 16:09

4 Answers 4

document.getElementById("place").innerHtml = placeHTML;

should be

document.getElementById("place").innerHTML = placeHTML;

to do it with jQuery

$("#place").html(placeHTML)

val will set the value of something like an input field, to change the inner HTML with jQuery you want to use the html() function

Try this:

$("#place").html(foo)

Or

$("#place").text(foo)

Also, it is not innerHtml, it should be innerHTML here:

Change it to:

document.getElementById("place").innerHTML = placeHTML;

This line is wrong,

document.getElementById("place").innerHtml = placeHTML;

Change innerHtml to innerHTML (HTML should be caps),

document.getElementById("place").innerHTML = placeHTML;

May be try to use

$("#place").html(placeHTML);