Добавить div в модальное окно - PullRequest
Новая
       28

Добавить div в модальное окно

0 голосов
/ 08 мая 2018

Я создаю таблицу, содержащую несколько узлов. Когда я нажимаю на определенный узел в таблице, открывается модальное окно (в этом модальном окне мне нужно вставить данные, которые я сохранил в div). 

/*each node is a hyperlink and has the "#animatedModal" href, and also a different id*/

var b = document.querySelectorAll("a");
        b[i].setAttribute("id", i);
        b[i].setAttribute("href", "#animatedModal");



 /*when a particular node is clicked, the getEndpoints function is called*/
 $("a").click(function(test) {
        getEndpoints(test.target.innerHTML);//innerHTML= node id number
    });

Функция getEndpoints собирает информацию об узле с сервера и вставляет данные в div 

function getEndpoints(nodeid) {
$.get( "http://.../node/" + nodeid, function( node ) {
    window.data = node;
    var key = ["epid", "clslist", "loc", "name", "type", "zplus"];
    var endpoints = node.endpoints[0];
        for(var k = 0; k < key.length; k++){
            $("#" + key[k]).text(endpoints[key[k]]); //this selects each id from the div(the id is the same as the key) and adds the value from the server to each key)
        }
   })}

Этот div всегда отображает информацию для узла, по которому щелкнули. например: если я нажимаю 1-й узел, div показывает информацию для 1-го узла и т. д. 

<div id="endDiv">
    <ol>
        <li><label>epid: </label><span id="epid"></span> </li>
        <li><label>clslist: </label><span id="clslist"></span> </li>
        <li><label>loc: </label><span id="loc"></span> </li>
        <li><label>name: </label><span id="name"></span> </li>
        <li><label>type: </label><span id="type"></span> </li>
        <li><label>zplus: </label><span id="zplus"></span> </li>
    </ol>
</div>

Модальное окно создается с помощью этой функции: 

function createModal() {
var content = $('<div/>', {
    class: 'modal-content'
})
var createAnimation = $('<div/>', {
    id: 'animatedModal'
});
var closeAnimation = $('<div/>', {
    class: 'close-animatedModal'
});
$(".table-fill").append(createAnimation);
$("#animatedModal").append(content).append("CONTENT HERE");
$("#animatedModal").append(closeAnimation);
$(".close-animatedModal").append(closeAnimation).append("PRESS TO CLOSE");

Итак, вместо «СОДЕРЖАНИЕ ЗДЕСЬ» я хочу, чтобы мое модальное окно отображало div с информацией об узле.

Я пробовал это, но безрезультатно: 

$(".modal-content").append("#endDiv");

и 

var divInfo = document.getElementById("endDiv").textContent;
 $("a").on( "click", function() {
   $(".modal-content").text(divInfo) );
 });

Может кто-нибудь помочь мне с этим?

...