Звездный рейтинг в комментариях Tickets

Здравствуйте! Для моей странички с отзывами понадобилось прикрутить звездный рейтинг. В для реализации данной возможности воспользовался этим решением. Только я использовал для себя плагин Star Rating.

В форму добавил
<div class="form-group">
	<label for="comment-stars">Оставьте оценку</label>
        <input id="comment-stars" name="starrating" value="[[+properties.starrating]]" class="rating">
        <span class="error"></span>
</div>
В чанке вывода
<input value="[[+properties.starrating]]" class="rating-loading">
Проблема в том, что в момент нажатия кнопки «Написать» появляется новый комментарий без звезд рейтинга с крутящимся прелоадером. Плюс сбиваются стили оформления рейтинга в самой форме. После обновления страницы, рейтинг отображается как нужно. Мне кажется, что где-то какой-то косяк в javascript, но я в нем не силен и не могу понять, где ошибка.

Может специалисты подскажут, как сделать, чтобы все заработало. Заранее спасибо!
Константин
14 января 2018, 10:49
modx.pro
1
3 053
0

Комментарии: 8

Андрей
14 января 2018, 14:22
0
Думаю что проще будет использовать — easyComm, там всё из коробки работает.
    Константин
    14 января 2018, 14:40
    0
    Это понятно, что проще, но мы не ищем простых путей.) На самом деле мне понравилась работа самого рейтинга, его возможности. Да и для себя было бы полезно разбираться в таких вещах.
    Баха Волков
    14 января 2018, 14:33
    0
    Надо повесить инициализацию плагина звёздочек после успешной отправки формы. Скорее всего js плагин повешен на событие загрузки страницы, после отправки формы плагин не знает и не работает
      Баха Волков
      14 января 2018, 14:38
      0
      Это в том случае когда именно Tickets нужен, а если не принципиально, то и вправду надо EasyComm использовать, там ещё учитывается/собирается рейтинг товара/ресурса, это для того чтобы потом с этими значениями что нибудь можно будет поделать, например фильтровать/сортировать
        Константин
        14 января 2018, 14:45
        0
        Дело в том, что изначально звездочки были не нужны. И мне сразу хватало возможностей Tickets. Просто все зашло слишком далеко. Я все оформил, а также сделал вывод отзывов на главной странице. И тут вдруг понадобились звезды.) Вот я и решил довести дело до конца, надеясь на помощь специалистов.
          Баха Волков
          14 января 2018, 15:22
          +1
          Скопируйте файл assets/components/tickets/js/web/default.js, дайте другое название и укажите в системных настройках.

          В новом файле, где-то 315-ая строка:

          save: function (form, button) {
                      $(form).ajaxSubmit({
                          data: {action: 'comment/save'},
                          url: TicketsConfig.actionUrl,
                          form: form,
                          button: button,
                          dataType: 'json',
                          beforeSubmit: function () {
                              clearInterval(window.timer);
                              $('.error', form).text('');
                              $(button).attr('disabled', 'disabled');
                              return true;
                          },
                          success: function (response) {
                              $(button).removeAttr('disabled');
                              $(document).trigger('tickets_comment_save', response);
                              if (response.success) {
          
          			// Тут запустите свой плагин звездного рейтинга  <<<<<------- ВОТ ЗДЕСЬ
          
                                  Tickets.forms.comment(false);
                                  $('#comment-preview-placeholder').html('').hide();
                                  $('#comment-editor', form).val('');
                                  $('.ticket-comment .comment-reply a').show();
          
                                  // autoPublish = 0
                                  if (!response.data.length && response.message) {
                                      Tickets.Message.info(response.message);
                                  }
                                  else {
                                      Tickets.comment.insert(response.data.comment);
                                      Tickets.utils.goto($(response.data.comment).attr('id'));
                                  }
          
                                  Tickets.comment.getlist();
                                  prettyPrint();
                              }
                              else {
                                  Tickets.Message.error(response.message);
                                  if (response.data) {
                                      var errors = [];
                                      var i, field;
                                      for (i in response.data) {
                                          field = response.data[i];
                                          var elem = $(form).find('[name="' + field.field + '"]').parent().find('.error');
                                          if (!elem.length) {
                                              elem = $(form).find('#' + field.field + '-error');
                                          }
                                          if (elem.length) {
                                              elem.text(field.message)
                                          }
                                          else if (field.field && field.message) {
                                              errors.push(field.field + ': ' + field.message);
                                          }
                                      }
                                      if (errors.length) {
                                          Tickets.Message.error(errors.join('
          '));
                                      }
                                  }
                              }
                              if (response.data.captcha) {
                                  $('input[name="captcha"]', form).val('').focus();
                                  $('#comment-captcha', form).text(response.data.captcha);
                              }
                          }
                      });
                      return false;
                  },
            Константин
            14 января 2018, 15:58
            0
            Спасибо! Сделал как Вы сказали. Но сработало только через setTimeout
            setTimeout(function() { 
            	$(".rating-loading").rating({
            	showClear:false,
            	disabled:true
            });
            }, 100);
            Еще раз спасибо!

            Еще скажите, где можно почитать, как вывести в админке Тикетов значения дополнительных полей, созданных с помощью JSON поля properties, с возможностью редактирования.
              Макс
              15 мая 2020, 12:11
              0
              Здравствуйте. Решил попробывать ваш способ и у меня такая же проблема крутящимся прелоадером, после перезагрузки рейтинг появляется можете пожалуйста помочь
              В форму добавил
              <div class="form-group">
              	<label for="comment-stars">Оставьте оценку</label>
                      <input id="input-4-ltr-star-md" type="number" name="input-4-ltr-star-md" value="[[+properties.input-4-ltr-star-md]]" class="kv-ltr-theme-fas-star" dir="ltr" data-size="md">
                      <span class="error"></span>
              </div>
              В чанке вывода
              <input value="[[+properties.input-4-ltr-star-md]]" class="kv-ltr-theme-fas-star rating-loading" dir="ltr" data-size="xs">
              <script>
                  	$('.rating-loading').rating({
                      hoverOnClear: false,
                      hoverEnabled: false,
                      hoverChangeStars: false,
                      hoverOnClear: false,
                      displayOnly: 'readonly',
                      theme: 'krajee-fas',
                      containerClass: 'is-star',
                      stars: "5",
                      defaultCaption: '{rating} из 5',
                      clearCaption: 'Нет оценки',
                      min: 0, 
                      max: 5, 
                      step: 1,
                      starCaptions: function (rating) {
                          return rating == 1 ? '1 из 5' : rating + ' из 5';
                      },
                      filledStar: '<i class="fas fa-star"></i>',
                      emptyStar: '<i class="far fa-star"></i>'
                  });
                  setTimeout(function() { 
              	$(".rating-loading").rating({
              	showClear:false,
              	disabled:true
              });
              }, 100);
                  </script>
      Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
      8