如何使用JS用包含文件覆盖td内容？

Question

I have a menu with names of different htm files like this:

I want when I click in one, the content of a td shows the document that I just clicked, I have a for that list this names, and set the calling to the JS function:

<% for (int i=0; i < fileNames.length; i++) { %>
    <tr> 
        <td onClick="refreshContent(this)"> <%= fileNames[i] %> </td>
    </tr>
<% } %>

I'm using a Jsp that displays the content of the first document by default:

<td id="documentContaner">
    <%@ include file ="/docs/document1.htm" %>
</td>

I'd like something like this in my JS Function:

function refreshContent(element) {
    var name = element.textContent;
    var tdContaner = document.getElementById("documentContaner");
    tdContaner.innerHTML = '<%@ include file ="/docs/'+ name +'.htm" %>';
}

first question: Is it possible do it this way? or Do I need to refresh the page to show new content? second question: If it's possible, How can I write an include file inside the TD?

Answer 1

You cannot use JavaScript to insert server side code into the DOM. Server side code needs to be executed by the appropriate runtime / interpreter on the server before the results are delivered to the browser.

To achieve this type of effect, you would need to write an HTTP endpoint which returns just the content of that cell and then use Ajax (usually via the XMLHttpRequest object) to fetch it, and then use DOM methods to insert the result into the cell.

Answer 2

You can send AJAX from page to load file

<script>
    function refreshContent(element) {
        var name = element.textContent;
        var xhr= new XMLHttpRequest();
        xhr.open('GET', '/docs/'+ name +'.htm', true);
        xhr.onreadystatechange= function() {
            if (this.readyState!==4) return;
            if (this.status!==200) return; // or whatever error handling you want
            element.innerHTML= this.responseText;
        };
        xhr.send();
    }
</script>
<table>
    <tr>
        <td onClick="refreshContent(this)">test</td>
    </tr>
</table>

if you have jquery on your page use it

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
    $(function () {
        $('#table-id').on('click', 'td.clickable', function (event) {
            event.preventDefault();
            var $element = $(this);
            var name = $element.text();
            $.get('/docs/'+ name +'.htm', function (response) {
                $element.html(response);
            })
        });
    })
</script>
<table id="table-id">
    <tr>
        <td class="clickable">test</td>
    </tr>
</table>

UPD. or preload file & name and show/hide them

<script>
    function refreshContent(element) {
        var name = element.children[0];
        var file = element.children[1];
        name.style.display = 'none';
        file.style.display = null;
    }
</script>
<table>
    <tr>
        <% for (int i=0; i < fileNames.length; i++) { %>
    <tr>
        <td onClick="refreshContent(this)">
            <div class="name"><%= fileNames[i] %></div>
            <div class="file" style="display: none;"><%@ include file ="/docs/document1.htm" %></div>
        </td>
    </tr>
    <% } %>
    </tr>
</table>

with jquery

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
    $(function () {
        $('#table-id').on('click', 'td.clickable', function (event) {
            var $element = $(this);
            var $name = $element.find('.name');
            var $file = $element.find('.file');
            $name.hide();
            $file.show();
        });
    })
</script>
<table id="table-id">
    <tr>
        <% for (int i=0; i < fileNames.length; i++) { %>
    <tr>
        <td class="clickable">
            <div class="name"><%= fileNames[i] %></div>
            <div class="file" style="display: none;"><%@ include file ="/docs/document1.htm" %></div>
        </td>
    </tr>
    <% } %>
    </tr>
</table>