Вызов AJAX, производящий дополнительные записи вместо обновления - PullRequest
Новая
       9

Вызов AJAX, производящий дополнительные записи вместо обновления

0 голосов
/ 12 апреля 2019

, поэтому я разместил свой вызов AJAX внутри метода $("button").on("click") jQuery.

, поэтому, когда я щелкаю элемент button, активируется вызов AJAX и добавляет значения в шаблон усов. 

<button type="button">Click Me!</button>

<div id="template-container">
    <template id="my-template">
        <p>my name is:{{0}} and i am {{1}} living in {{2}}</p>
    </template>
</div>

<script>
  $(function(){
    var templateContainer= $('#template-container');
    var myTemplate= $("#my-template").html();

    function addInfo(info){
      templateContainer.append(Mustache.render(myTemplate, info));
    };

    $( "button" ).on( "click", function() {

        // requesting data returns an array as such: [["name1", "34", "city1"],["name2", "23", "city2"]]
        $.ajax({
          type: 'GET',
          url: '/get_data',
          success: function(dataArray){
          console.log(dataArray)
            $.each(dataArray, function(i, info){
              addInfo(info);
            });
          },
          error: function(){
            alert("error loading infos");
          }
        });
    });
  });
</script>

Теперь, когда я нажимаю кнопку $("button"), данные успешно добавляются в шаблон, как показано ниже: 

my name is:name1 and i am 34 living in city1

my name is:name2 and i am 23 living in city2

проблема возникает, когда я нажимаю кнопку $("button") опять же, он добавляет тот же массив, что и предыдущий, и выдает следующий вывод: 

my name is:name1 and i am 34 living in city1

my name is:name2 and i am 23 living in city2

my name is:name1 and i am 34 living in city1

my name is:name2 and i am 23 living in city2

как я могу заставить метод $("button").on("click") удалить предыдущие выходные данные при каждом нажатии кнопки, чтобы репликации нене произошло ??

ОБНОВЛЕНИЕ

Я пытался удалить информацию перед добавлением в контейнер templateContainer, используя templateContainer.empty() в качестве пользователя Кевин B предложил. 

function addInfo(info){
    templateContainer.empty();
    templateContainer.append(Mustache.render(myTemplate, info));
};

однако теперь он показывает только последний элемент массива как таковой: 

my name is:name2 and i am 23 living in city2

1 Ответ

0 голосов
/ 12 апреля 2019

Редактировать: добавить эту строку перед каждым: 

templateContainer.children("p").remove();

или 

  templateContainer.empty();

Надеюсь, это поможет

...