Donate. I desperately need donations to survive due to my health

Get paid by answering surveys Click here

Click here to donate

Remote/Work from Home jobs

JSON parse $ajax response - jquery

Hello I have problem with error message in my console after ajax request and I would like to know how can I prevent it.

Error message:

VM1779:2 Uncaught SyntaxError: Unexpected end of JSON input
at JSON.parse (<anonymous>)
at Object.success (all.min.js:698)
at u (all.min.js:2)
at Object.fireWith [as resolveWith] (all.min.js:2)
at k (all.min.js:2)
at XMLHttpRequest.<anonymous> (all.min.js:2)

JQUERY AJAX function:

function changeSlider() {
  let flatType = $('.active').attr('id');
  $.ajax({
    type: 'POST',
    url: './ajax.php',
    data: {
      flatType: flatType
    },
    success: function(response) {
      var obj = JSON.parse(response);
      $('.gallery-finishing .gallery-top .swiper-wrapper').html(obj['galleryTop']);
      $('.gallery-finishing .gallery-thumbs .swiper-wrapper').html(obj['galleryThumb']);
      initGallery();
    },
    error: function(e) {
      console.log(e);
    }
  });
}
changeSlider();

ajax.php

if(isset($_POST['flatType'])){
      $results['galleryTop'] = '
        <div class="swiper-slide" id="slide-1">
            <div class="swiper-slide__img">
                <img src="/assets/img/slide-w-1.jpg" alt="">
            </div>
        </div>
        <div class="swiper-slide" id="slide-2">
            <div class="swiper-slide__img">
                <img src="/assets/img/slide-w-2.jpg" alt="">
            </div>
        </div>
        <div class="swiper-slide" id="slide-3">
            <div class="swiper-slide__img">
                <img src="/assets/img/slide-w-3.jpg" alt="">
            </div>
        </div>
        ';

    $results['galleryThumb'] = '<div class="swiper-slide">
            <div class="swiper-slide__info">
                <p>Lorem</p>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="swiper-slide__info">
                <p>Ipsum</p>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="swiper-slide__info">
                <p>Dolor</p>
            </div>
        </div>';
      echo json_encode($results);
  }

I need to get multiple responses for a single ajax request.

I know that the problem is with parse JSON object, which include HTML code.

So, how can i fixed it? Thanks for help :)

Comments