How to render html code from JavaScript on span tag of a jsp file?

Question

I am working on a jsp file, which has a span tag as shown below:

<span id="divBasicSearchResults" style="height:100%;"></span>

the Javascript file that renders html code on this span is shown below:

function renderBasicSearchNarrative1(response) {
var html = '';
var i = 0;
var j = 0;

if(response){
    html += '<table><tr><th colspan="5">Search Results</th></tr>';
    html += '<tr><td><b>#</b></td><td style="min-width:150px;"><b>Name</b></td><td><b>Lat/Long</b></td></tr>';
    html += '<tbody>';

    for(var i =0; i < response.length; i++){
        var result = response[i];
        var resultNum = i+1;            
        if(result.lat>47.33 && result.lat<48.92 && result.lon>9.8 && result.lon<13.46){ //this loop is to restrict the results to Munich
        html += "<tr valign=\"top\">";
        html += "<td>" + resultNum + "</td>";

        html += "<td>";
        if(result.display_name){
            var new_display_name = result.display_name.replace(/,/g, ",<br />");
            html += new_display_name;               
        }
        html += "</td>";

        html += "<td>" + result.lat + ", " + result.lon + "</td>";
        addmarker(result.lat, result.lon, "map-pointer-icon.png");

        html += "</tr>";
    } //end of for loop for Munich
}
    html += '</tbody></table>';
}

document.getElementById('divBasicSearchResults').style.display = "";
document.getElementById('divBasicSearchResults').innerHTML = html;

Now, in this above code I am generating an html code dynamically which is supposed to be rendered on the jsp file. But the problem which I am facing that I cannot see the whole html code which is dynamically generated, instead I just see the header data of the html code on my span tag. The result which I see on the span tag is:

Search Results
#Name   Lat/Long

Thanks in advance for reading this text, waiting for suggestions.

Have you added in some logging to check what you are getting back in your response? — Leo Farmer
– Leo Farmer, Commented Feb 23, 2015 at 20:03
Yes I have used console.log(html) and I am getting the required html code. But I cannot render it on the span tag! — Amir
– Amir, Commented Feb 23, 2015 at 20:07
What is the span sitting inside? The most likely cause is that it has a parent element with a fixed height and overflow hidden.... — Leo Farmer
– Leo Farmer, Commented Feb 23, 2015 at 20:36

Leo Farmer · Accepted Answer · 2015-02-23 21:12:24Z

1

I think your problem is the height of your span. You need to check the css settings of the span parent elements. e.g. do they have a fixed height and overflow:hidden set on them. This would mean that your html is rendering perfectly within your span but just isn't being seen because there isn't enough space.

Also, as Eric points out, it is not correct mark-up to put a table inside a span. You should be using a div.

answered Feb 23, 2015 at 21:12

Leo Farmer

7,9606 gold badges35 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Amir Over a year ago

overflow:hidden should have been removed from the parent tag, this was the solution. Thanks allot guys for your time :)

Eric · Accepted Answer · 2015-02-23 20:20:11Z

0

I suggest SPAN tag is not really appropriate to render a whole table : better use a DIV

answered Feb 23, 2015 at 20:20

Eric

911 silver badge7 bronze badges

2 Comments

Amir Over a year ago

Same issue with DIV as well. Moreover, when I put the whole code manually in the span tag, it is rendering the whole table as I need it to do. But it doesn't work when I try to do as show in the above question!

Eric Over a year ago

I would try to replace the span content with a simple multi-lines string, just to check that it has nothing to do with the content itself.

Collectives™ on Stack Overflow

How to render html code from JavaScript on span tag of a jsp file?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related