javascript - load html content from ajax call

Question

I have HTML page that has Ajax call to load table content

<html>
....

<script sec:haspermission="VIEW_NOTE" th:inline='javascript'>
        require(['app/agent/viewGlobalAgent'], function (){
            var individualId= [[${model.agent.individual.id}]];
            var agentId= [[${model.agent.id}]];
            $.get("/notes/referenceTable.html?individualId="+individualId+"&agentId="+agentId, function(data){
                console.log("theData " , data);

                var noteList = $("#note-list-container2").value;
                var fileList = $("#file-list-container2").value;
                // document.getElementById("note-list-container").innerHTML = noteList;
                // document.getElementById("note-file-form").innerHTML = fileList;
                $("#note-list-container").html(noteList);
                $("#note-file-form").html(fileList);

        
        });
    </script>

....
</html>

the html that Ajax call load

<div>
<div id="note-list-container2">
    ....
</div>
<div id="file-list-container2">
....
</div>
</div>

I need to access these two div on callback of Ajax call

$.get("/notes/referenceTable.html?individualId="+individualId+"&agentId="+agentId, function(data){

I tried to access them but its not working

$("#note-list-container2").value

is any way to access div in loaded html

Depending on what's inside those two DIVs, you might want to use `.html()` instead of `.text()`. If they contain any HTML you'd lose that if you use text. — David784, Sep 07 '20 at 21:50

charlietfl · Accepted Answer · 2020-09-07T21:49:42.180

Since you want content from within the new html returned as data you want to wrap that data in $() and query within that object

Then use text() or html() since value is only for form controls, not content elements

$.get(url, function(data) {

  var $data = $(data);

  var noteList = $data.find("#note-list-container2").text();// or html()
  var fileList = $data.find("#file-list-container2").text();

  $("#note-list-container").html(noteList);
  $("#note-file-form").html(fileList);

});

score 1 · Answer 2 · answered Sep 07 '20 at 21:45

jQuery.text(): Get the combined text contents of each element in the set of matched elements, including their descendants, or set the text contents of the matched elements

jQuery.val(): Get the current value of the first element in the set of matched elements or set the value of every matched element. The .val() method is primarily used to get the values of form elements such as input, select and textarea. When called on an empty collection, it returns undefined.

A div element does not have a value....

An example:

console.log('text(): ' + $("#note-list-container2").text());
console.log('val(): ' + $("#note-list-container2").val());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="note-list-container2">
    ....
</div>

Vali D · Answer 3 · 2020-09-07T21:58:48.173

I’m guessing you’re using jQuery. The HTML contents can be accessed with .html() not with value. There is no value attribute on a div element. More importantly, you should attempt to get the contents of the element AFTER updating it, not before. Also, the selectors should match. From your example, it seems that you're attempting to get the contents for a #note-list-container2 but you're updating a #note-list-container element. One of those IDs is wrong, given your sample AJAX call output.

javascript - load html content from ajax call

3 Answers3

Linked