Звездный рейтинг Bootstrap показан дважды

Я использую этот плагин для отображения звездного рейтинга на моем веб-сайте Bootstrap. Вот часть модального кода, в котором я ставлю звездный рейтинг (см. элемент ввода):

      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="userTitle"></h4>
        <input id="avg" class="rating" min=0 max=5 step=0.1 data-size="xs" data-readonly="true" data-show-clear="false" data-show-caption="false">
        <small id="tot_reviews"></small>
      </div>
      <div class="modal-body">

Вот часть кода JS, в которой я динамически устанавливаю значение звездочек:

$.getJSON("getData.php?rating=" + user.id, function(data) {
    if (data) {
        $.each(data, function(key, val) {
            var reviews = val.tot_reviews;

            $('#avg').rating('update', val.average);
            $("#tot_reviews").html("(" + reviews + " reviews)").html();
        });
    }
});

Кажется, это работает хорошо, на самом деле, когда я нажимаю на элемент страницы, я получаю это:

введите здесь описание изображения

Если я снова нажму на тот же элемент, я получаю это:

введите здесь описание изображения

Я не могу понять, почему это происходит.


plugins jquery ajax twitter-bootstrap rating
person smartmouse    schedule 20.05.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Несколько рекомендаций для проверки:

  • Обратите внимание, что если вы установили вход class=rating, плагин будет автоматически инициализирован без НЕОБХОДИМОсти кода javascript на вашей стороне для инициализации. Это упоминается в разделе документации, возможности плагина, а также с первый пример в разделе базового использования документации.
  • Следовательно, если вы используете свой собственный javascript для инициализации плагина, НЕ устанавливайте class = rating, иначе у вас будут две параллельные инициализации, вызывающие нежелательные эффекты.

Кроме того, вы также можете отметить:

  • Убедитесь, что у вас есть уникальный идентификатор для элемента ввода HTML на странице. Дублирование идентификатора будет иметь нежелательные последствия и нарушит работу подключаемого модуля jquery со звездным рейтингом, который использует идентификатор элемента для инициализации. Например, если у вас есть несколько рейтингов на странице, <input id="avg"> должен быть уникальным с чем-то вроде <input id="avg-1"> , <input id="avg-2"> и так далее.
  • В вашем коде есть цикл $.each... не знаю, что он делает... но он обновляет рейтинг. Убедитесь, что вы каким-то образом не уничтожаете элемент с HTML-кодом, отображаемым с помощью ajax, и повторно инициализируете другой, дублируя отображение рейтинга.
person Kartik V    schedule 23.05.2015
comment
Прежде чем следовать вашей подсказке, я упущу сказать, что если я уберу class="rating" из HTML-кода, он будет работать без проблем. Что это может означать? - person smartmouse; 23.05.2015
comment
Да, это проблема двойной инициализации плагина. Проверьте мой обновленный/отредактированный комментарий. - person Kartik V; 25.05.2015