Как добавить один слайд в существующую запущенную Bootstrap Carousel во время выполнения с использованием JavaScript / JQuery? - PullRequest
Новая
       20

Как добавить один слайд в существующую запущенную Bootstrap Carousel во время выполнения с использованием JavaScript / JQuery?

0 голосов
/ 03 июля 2019

У меня есть карусель с отзывами клиентов и пользовательская форма, которая позволяет клиентам дать новый отзыв. Когда форма будет заполнена, я хочу добавить новый отзыв клиента в карусель. Я не могу найти документацию, в которой говорится, как добавить слайд к существующей карусели.

Я использую Bootstrap 4.3.1. Страница изначально загружается без слайдов в карусели. Когда страница готова ($ (document) .ready ()), я использую $ .getJSON (), чтобы извлечь содержимое слайда с сервера, а затем динамически создать и внедрить html на страницу. Это отлично работает. Карусель загружена правильными слайдами и начинает полный цикл, как и ожидалось.

У меня также есть форма на странице, которая позволяет пользователям написать новый отзыв и опубликовать его на сайте. Когда форма отправляется (стандартная type = "button", а не type = "submit"), я использую $ .post, чтобы отправить новый отзыв на сервер для вставки в базу данных. Это также отлично работает.

Проблема, с которой я столкнулся, заключается в том, что я также хочу обновить карусель на странице без обновления всей страницы.

Я попытался просто повторно запустить функцию, которая запускается, когда документ готов, но в карусели остаются оставшиеся данные, которые отображаются и не скользят, в то время как другие слайды отображаются поверх него и выполняют слайд. В конце концов, после пары переходов карусель зависает.

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

Я не получаю никаких сообщений об ошибках ни с одним из этих подходов.

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

Любая помощь будет принята с благодарностью.

Вот HTML 

  <div class="row">
    <div class="col-10">
      <div id="carouselTestimonials" class="carousel slide" data-ride="carousel" data-interval="12000">
        <div class="row">
          <div class="col-xs-offset-3 col-xs-6 w-100">
            <div class="carousel-inner carousel-Testimonials">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="testimonial-form">
    <form action="/testimonials" method="post">
      <div class="form-group">
        <input type="text" class="form-control fn" aria-describedby="nameHelp" name="firstName" placeholder="First Name" required autocomplete="off">
        <input type="text" class="form-control li" aria-describedby="nameHelp" name="lastInitial" placeholder="M.I." maxlength="1" minlength="1" required autocomplete="off"><br />
        <small id="nameHelp">Enter your first name and middie initial.</small>
        <input type="text" class="form-control city" aria-describedby="citystateHelp" name="city" placeholder="City">
        <select class="form-control st" aria-describedby="citystateHelp" name="state" placeholder="City">
            <option value="AL">AL</option>
            <option value="AK">AK</option>
                  ...
        </select>
        <small id="citystateHelp">Enter your city and state.</small>
        <textarea class="form-control comment" aria-descrbedby="commentHelp" name="comment" required rows="4" placeholder="Comment"></textarea>
        <small id="commentHelp">Type your comment.</small>
      </div>
      <input type="button" class="btn btn-primary" name="submitTestimonial" value="Submit">
    </form>

А вот и сценарий: 

function populateTestimonials() {
  $.getJSON("/testimonials", (data, status) => {
    var carouselItems = "";
    $.each(data, (index, testimonial) => {
      carouselItems += "          <div class=\"carousel-item" + (index == 0 ? " active" : "") + "\">" +
                       "            <div class=\"carousel-content\">" +
                       "              <div class=\"testimonial\">\"" + testimonial.testimonial + "\"</div>" +
                       "              <div class=\"testimonial-author\">- " + testimonial.firstName + " " + testimonial.lastInitial + ".</div>" +
                       "              <div class=\"testimonial-from\">" + testimonial.city + ", " + testimonial.state + "</div>" +
                       "            </div>" +
                       "          </div>"
    });
    $(".carousel-Testimonials").html(carouselItems);
  });
};

$("document").ready(() => {
  populateTestimonials();
});

$("input[name='submitTestimonial']").click(() => {
  // Validate input

  // build object
  var newTestimonial = {
    firstName: $("input[name='firstName']").val(),
    lastInitial: $("input[name='lastInitial']").val(),
    city: $("input[name='city']").val(),
    state: $("select[name='state']").val(),
    comment: $("textarea[name='comment']").val()
  };
  $.post("/testimonials", newTestimonial, (data, status) => {
    $(".testimonial-form").fadeOut();
    if (status == "success") {
      $("#carouselTestimonials").carousel('pause').removeData();
      populateTestimonials();
      $("#carouselTestimonials").carousel(0);
    } else {
      $(".testimonial-error-message").html("Unable to save testimonial");
      $(".testimonial-error").fadeIn();
    }
  });
});

Я хочу, чтобы слайды карусели включали новый обзор после того, как пользователь отправит его, не прибегая к обновлению веб-страницы.

...