Обновите текст в div, используя javascript - PullRequest
Новая
       6

Обновите текст в div, используя javascript

0 голосов
/ 10 апреля 2020

Совершенно новый для программирования, так что извините, если это глупый вопрос. У меня есть две (очень похожие) функции: 

function getRingNumbers(queueID, divID) {

    $.ajax({
        url: `https://api.mypurecloud.de/api/v2/routing/queues/${queueID}/users`,
        type: "GET",
        beforeSend: function(xhr){xhr.setRequestHeader('Authorization', 'bearer ' + globalToken);},
        success: function(data) {            
            var i;
            for (i = 0; i < data.entities.length; i++) {
                if (i % 2 == 1) {
                    var div = document.getElementById(divID);
                    div.innerHTML += '<center><p class="odd">' + data.entities[i].ringNumber + '</p></center>';
                }
                else {
                    var div = document.getElementById(divID);
                    div.innerHTML += '<center><p class="even">' + data.entities[i].ringNumber + '</p></center>';
                }
            } 
        }        
    });
}

и 

function updateRingNumbers(queueID, divID) {

    $.ajax({
        url: `https://api.mypurecloud.de/api/v2/routing/queues/${queueID}/users`,
        type: "GET",
        beforeSend: function(xhr){xhr.setRequestHeader('Authorization', 'bearer ' + globalToken);},
        success: function(data) {            
            var i;
            for (i = 0; i < data.entities.length; i++) {
                if (i % 2 == 1) {
                    var div = document.getElementById(divID);
                    div.innerHTML = '<center><p class="odd">' + data.entities[i].ringNumber + '</p></center>';
                }
                else {
                    var div = document.getElementById(divID);
                    div.innerHTML = '<center><p class="even">' + data.entities[i].ringNumber + '</p></center>';
                }
            } 
        }        
    });
}

Я хочу запустить вторую функцию с интервалом 30 секунд, чтобы она обновляла номера звонков. Единственное, что я изменил в коде, это удалите + перед = @ div.inner HTML (+) =. Из всей документации, которую я могу найти на inte rnet, это должно обновить div с новой информацией. Тем не менее, я продолжаю получать «неопределенный», и он просто очищает данные номера звонка. Когда я запускаю первую функцию на интервале, это работает, но продолжает создавать div, что не то, что я хочу.

Кто-нибудь знает, что вызывает это и как это исправить? Спасибо.

1 Ответ

0 голосов
/ 10 апреля 2020

Вам нужно сбросить внутренний HTML и все равно присоединиться к нему. Без + = вы увидите только последнюю запись. Вы можете использовать внутренний HTML с или создавать элементы. Я предпочитаю создавать элементы. 

    success: function(data) {
      var div = document.getElementById(divID);
      // empty the content
      div.innerHTML = '';
      // loop over your array
      data.entities.forEach(function(entry, index) {
        // create a p element
        var p = document.createElement("p");
        // set your class
        p.className = index % 2 == 1 ? 'odd' ? 'even';
        // add the text
        p.textContent = data.entities[i].ringNumber;
        // add it to your div
        div.appendChild(p);
      })
    }

Теперь вы можете просто использовать CSS, чтобы управлять нечетным или четным и центрировать содержимое с выравниванием текста. 

#myWrapper p {
  background-color: #CCC;
  text-align: center
}

#myWrapper p:nth-child(odd) {
  background-color: #777;
}
<div id="myWrapper">
  <p>Bacon 1</p>
  <p>Bacon 2</p>
  <p>Bacon 3</p>
  <p>Bacon 4</p>
  <p>Bacon 5</p>
  <p>Bacon 6</p>
</div>
...