Как загрузить страницу JSP на следующий / предыдущий щелчок карусели Bootstrap

Question

Раньше у меня была полоса прокрутки, на которой отображались разные значки. при нажатии на конкретную иконку, JSP страница отображалась. но мне нужно заменить его на карусель.

при следующем / предыдущем щелчке должна быть вызвана следующая функция:

 function testing(index) {
        var tableLength = tableAddArray.length;
        for (var i = 0; i < tableLength; i++) {  
            if (i == index) {
                selectedElement= tableAddArray[i].id;
            }
            console.log("selectedElement:: "+selectedElement);
        }
        createElement();
    }


function createElement() {
    var request ="/xyzz/abcdd?objectName="; 
    var attributesToSend = "&action=add" ; 
    attributesToSend += "&ref="+document.getElementsByName("ref")[0].value ; 
    document.getElementsByName("action")[0].value = "add"; 
    if (selectedElement != null) { request += selectedElement; 
    if (selectedElement == "1") {equest += "&condOp=5"; } 
    else if (selectedElement == "2") {request += "&dest=2";} 
    request += attributesToSend; location.href=request; 
    //from here other processing is done to get corresponding data from DB 
    } 
} 

затем в карусели:

    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="false"> 
    <div class="carousel-inner"> 
    <div class="carousel-item"> 
    <c:choose> 
    <c:when test="${requestScope.objectName == '2'}"> 
    <jsp:include page="2nd_Slide.jsp"></jsp:include> </c:when>
     <c:when test="${requestScope.objectName == '3'}"> 
    <jsp:include page="3rd_slide.jsp"></jsp:include> </c:when> 
    </c:choose>
     </div> 
     <a class="carousel-control-prev" ..> 
    <a class="carousel-control-next" ..> 
    </div> 

СледовательноМне нужно установить имя объекта на 0-й индекс, а также. Я не знаю, как позвонить в js, пока не появится 0-й слайд карусели.

Answer 1

Возможно, вы захотите зарегистрировать обработчик событий на слайде карусели. Примерно так:

$('#carousel_id').on('slide.bs.carousel', function () 
  //load jsp like before with click on icons
)

Установить идентификатор для элемента, который должен запускать загрузку jsp

ПРИМЕЧАНИЕ: check slid.bs.carousel для обработки событий после слайда

РЕДАКТИРОВАТЬ:

Попробуйте:

  <div id="carouselExampleControls" class="carousel slide" data-   ride="carousel">
     <div class="carousel-inner">
        <div class="carousel-item active">
        <p class="d-block w-100"> 
        Slide 1
        <div id="jspdiv1"></div>
      </p>
    </div>
    <div class="carousel-item">
      <p class="d-block w-100">
        Slide 2
        <div id="jspdiv2"></div>
      </p>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

  <script>
  var ind = 0;
  $('#carouselExampleControls').bind('slid.bs.carousel', function (e) {
    if(e.direction =='right'){
     ind++;
     console.log("right "+ind);
     $("#jspdiv1").text("Slided right "+ind);
    }
    else if(e.direction == 'left'){
         ind--;
     console.log("left "+ind);
     $("#jspdiv2").text("Slided left "+ind);
    }
    console.log(e);
    });
    </script>