timofeyp/popup.html

## popup.html
<!DOCTYPE>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script src="jquery-3.3.1.min.js"></script><script src="popup.js"></script>


    <title></title> </head>
  <body>
  <button id="mcu1">MCU #1</button> //на эту кнопку висит вызов функции handler где происходит post запрос на сервер и далее вызов функции onAjaxSuccess при ответе
  <table id="here_table">
    <tr>
    <th>ID</th>
    <th>IP</th>
    <th>Number</th>
    <th>Name</th>
    <th>RXSound</th>
    <th>Volume</th>
  </tr>
    <tr class="foo">  // этот tr создается функцией onAjaxSuccess, тут вставлен уже созданный элемент. Сервер не доступен из github..
      <td class="bar">20868</td>
      <td class="bar">10.10.229.11</td>
      <td class="bar">sip:50901@laes.local</td>
      <td class="bar">Оператор ВКС</td>
      <td id="rowid0" class="bar">
        <button id="buttonid" class="buttonclass">ON</button> // на эту кнопку хочу повесить эвент
      </td>
      <td class="bar">-34953</td>
    </tr>
  </table>

  </body>
</html>

## popup.js
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById("mcu1").addEventListener("click", handler);
});

f=function(){alert(1)};


function handler() {
    $(document).find('td').remove();
    $.post(
        "http://10.10.229.14/RPC2",
        "<?xml version='1.0'?><methodCall> <methodName>participant.enumerate</methodName> <params> <param> <value> <struct> <member> <name>authenticationUser</name> <value><string>admin</string></value> </member> <member> <name>authenticationPassword</name> <value><string>cisco</string></value> </member> <member> <name>enumerateFilter</name> <value><string>connected</string></value> </member> <member> <name>operationScope</name> <value> <array> <data> <value> <string>currentState</string> </value>  </data> </array> </value> </member> </struct> </value> </param> </params></methodCall>",
        onAjaxSuccess
    );

    }

    function onAjaxSuccess(data)
    {

        var answer = $(data).find('name:contains("participantName")');
        var displaynames = $(data).find('name:contains("displayName")').filter(function() { return ($(this).text() === 'displayName') });

        for (var i = 0; i < answer.length && ($(data).find('name:contains("audioRxEnergyMillidB")')[i].nextElementSibling.firstElementChild.innerHTML > -37500); i++)
        {

            var table = $('<tr></tr>').addClass('foo');

            console.log("Participant:");
            var participantname = $(answer)[i].nextElementSibling.children[0].innerHTML;
            var row = $('<td></td>').addClass('bar').text(participantname);
            table.append(row);
            $('#here_table').append(table);

            var ipaddress = $(data).find('name:contains("ipAddress")')[i].nextElementSibling.firstElementChild.innerHTML;
            console.log("IP: " + ipaddress);
            var row = $('<td></td>').addClass('bar').text(ipaddress);
            table.append(row);
            $('#here_table').append(table);

            var address = $(data).find('name:contains("address")')[i].nextElementSibling.firstElementChild.innerHTML;
            console.log("Address: " + address);
            var row = $('<td></td>').addClass('bar').text(address);
            table.append(row);
            $('#here_table').append(table);

            var displayname = $(displaynames)[i].nextElementSibling.firstElementChild.innerHTML;
            console.log("Displayname: " + displayname);
            var row = $('<td></td>').addClass('bar').text(displayname);
            table.append(row);
            $('#here_table').append(table);

            var mutedstatus = $(data).find('name:contains("audioRxMuted")')[i].nextElementSibling.firstElementChild.innerHTML;
            if (mutedstatus == false ) {
                mutedstatusname = "ON";
            } else {
                mutedstatusname = "OFF";
            }

            var row = $('<td id="rowid' + i + '"></td>').addClass('bar');
            table.append(row);
            var button = $('<button id="buttonid">' + mutedstatusname + '</button>').addClass('buttonclass');

            $('#here_table').append(table);
            rowid = "#rowid" + i;
            $(rowid).append(button);

            var volume = $(data).find('name:contains("audioRxEnergyMillidB")')[i].nextElementSibling.firstElementChild.innerHTML;
            console.log("Volume: " + volume);
            var row = $('<td></td>').addClass('bar').text(volume);
            table.append(row);
            $('#here_table').append(table);


                if ((answer.length - i) === 1) {
                    document.addEventListener('DOMContentLoaded', function() {
                    mod2 = $(document).find('button:contains("ON")'); //почему на кнопку "ON" не вешается эвент?
                    for (var j = 0; j < mod2.length; j++) {
                        $(document).find('button:contains("ON")')[j].addEventListener('click', f());
                    }
                    })
                }

        }

    }