javascriptjqueryajaxlaravelbootstrap-carousel

Append Data on bootstrap carousel with ajax

I want to ask how I can append ajax data on the bootstrap carousel. 2 post-show on the bootstrap carousel when the page load for the first time then if someone clicks the next arrow bootstrap carousel slide and shows the next 2 posts I'm getting 2 posts per click with ajax now I want to append next 2 posts on the bootstrap carousel and so on like this

here's my blade code where I'm using foreach to show 2 posts when pages load for example I'm showing post 1 and 2 here

<div id="carousela" class="carousel slide" data-touch="false" data-interval="false">
    <div class="carousel-inner">
    @foreach($magazine->chunk(2) as $magazines)
        <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
        @foreach($magazines as $row)
            <div class="row no-gutters m-0 p-0">
                <div class="col-md-2 col-sm-12">
                    <img  src="{{(!empty($row->magazine_sys_file_name) ? asset('/uploads/'.$row->magazine_sys_file_name):'')}}" class="img-thumbnail border-0 p-0" alt="" srcset="">
                </div>
                <div class="col-md-10 col-sm-12 px-4 m-0 m-mb">
                    <h4 class="text-light m-0 p-0">{{$row->title}}</h4>
                    {{($row->magazine_des) ? $row->magazine_des: ''}}
                    <div><a href="{{$row->links}}" class="text-center text-warning float-right">{{__('Read More')}}</a></div>
                </div>   
            </div>
        @endforeach
        </div>
    @endforeach
    </div>
</div>

now I'm using onclick function to get the next 2 posts here's ajax code and with this code, i'm getting post 3 and 4 now I want to append these 2 posts on the bootstrap carousel

$('#nextclick').on('click',function(){
    var val = $('#hidden').val();
    var data = {val:val}
    $.ajax({
        url: "{{url('/user/nextmagazine')}}",
        method: 'get',
        data: data,
        success: function(data){
            $('#hidden').val(parseInt(val) + parseInt(2));
            
        }
    })
})

here's my result after onclick

enter image description here

if anyone can help me with how I can append this data in the ajax success function to show on the bootstrap carousel

Thank you

Solution

  • You can loop through your jsons return from backend and append that inside some variable using += .Finally , add generated html inside your carousel using $(html).insertAfter('#carousela .carousel-item:last') this will insert new slide after last slide .

    Demo Code :

    $(document).ready(function() {
  $("#carousela").carousel();
  //using `one` just for demo change it to `on`
  $('#nextclick').one('click', function() {
    /* var val = $('#hidden').val();
     success: function(data){
     //your other codes..
   $('#hidden').val(parseInt(val) + parseInt(2));*/
    //suppose data return look like this..
    var data = [{
      "id": 3,
      "title": "Something3",
      "magazine_sys_file_name": "somehting",
      "link": null

    }, {
      "id": 4,
      "title": "Something4",
      "magazine_sys_file_name": "somehting",
      "link": null
    }]
    if (data.length > 0) {
      var html = ""
      //loop
      $(data).each(function(i, v) {
        //generate htmls//
        html += ` <div class="carousel-item">
      <div class="row no-gutters m-0 p-0">
        <div class="col-md-2 col-sm-12">
          <img src="/uploads/${v.magazine_sys_file_name}" class="img-thumbnail border-0 p-0" alt="" srcset="">
        </div>
        <div class="col-md-10 col-sm-12 px-4 m-0 m-mb">
          <h4 class="text-light m-0 p-0">${v.title}</h4>
          <div><a href="${v.links}" class="text-center text-warning float-right">{{__('Read More')}}</a></div>
        </div>
      </div>

    </div>`
      })
      //insert new html after last slide
      $(html).insertAfter('#carousela .carousel-item:last')
    }

    /*}
    })*/
  })
});
    #carousela{
background:black
}
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div id="carousela" class="carousel slide" data-touch="false" data-interval="false">
  <div class="carousel-inner">
    <div class="carousel-item active">

      <div class="row no-gutters m-0 p-0">
        <div class="col-md-2 col-sm-12">
          <img src="{{(!empty($row->magazine_sys_file_name) ? asset('/uploads/'.$row->magazine_sys_file_name):'')}}" class="img-thumbnail border-0 p-0" alt="" srcset="">
        </div>
        <div class="col-md-10 col-sm-12 px-4 m-0 m-mb">
          <h4 class="text-light m-0 p-0">Something1</h4>

          <div><a href="{{$row->links}}" class="text-center text-warning float-right">{{__('Read More')}}</a></div>
        </div>
      </div>

    </div>
    <div class="carousel-item">

      <div class="row no-gutters m-0 p-0">
        <div class="col-md-2 col-sm-12">
          <img src="{{(!empty($row->magazine_sys_file_name) ? asset('/uploads/'.$row->magazine_sys_file_name):'')}}" class="img-thumbnail border-0 p-0" alt="" srcset="">
        </div>
        <div class="col-md-10 col-sm-12 px-4 m-0 m-mb">
          <h4 class="text-light m-0 p-0">Something2</h4>

          <div><a href="{{$row->links}}" class="text-center text-warning float-right">{{__('Read More')}}</a></div>
        </div>
      </div>

    </div>
    <a class="carousel-control-prev" href="#carousela" data-slide="prev">
      <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#carousela" data-slide="next" id="nextclick">
      <span class="carousel-control-next-icon"></span>
    </a>
  </div>
</div>