将数据从DB附加到jQuery中的div中

Question

I am trying to show images of a particular holiday package from my DB into a slider using jQuery append. My slider is inside a modal and this modal is shown from javascript function. But I am only getting one image into the slide show. I am using while loop to iterate the image array and it is added to the div using innerhtml. I don't know where I am going. Can anyone please help me?

Here is my code:

js

function showDetailsModal(id) {

  $.post('uae-holidaydetails.php',{uaeid:""+id+""},function(data){
    data = jQuery.parseJSON(data);

    var datadet= data[0];
    if(data[1]) {
      var dataimg= data[1];
      var imgarray=[];
      for (index = 0; index < dataimg.length; index++) {
        imgarray.push(dataimg[index].image);
      }
      var i=0;
      while(imgarray[i]){
        document.getElementById("detail-banner").innerHTML='<div class="item"><img src="../sysimages/origimages/'+imgarray[i]+'" alt=""></div>'; //here I am creating the div for slider
        i++;
      }
    }
    document.getElementById("uaetitle").innerHTML= datadet.title;
    document.getElementById("subtitle").innerHTML= datadet.subtitle;
    $('#holiday-details').modal('show');   //modal is shown
  });
}

php

<?php
include_once("index.class.php");
$objScr = new INDEX(); 
if(isset($_POST['uaeid'])) {
  $uaeid=$_POST['uaeid'];

  $rslthlydata = $objScr->getUaedata($uaeid);       //get holiday details
  $rowuaedetails = $rslthlydata->fetchAssoc();
  $resultimages= $objScr->getUaeholyImages($uaeid);   //get images

  while($resultimg=$resultimages->fetchAssoc()) {
    $dataimg[]=$resultimg;
  }
  echo json_encode(array($rowuaedetails,$dataimg)) ;
}

html

<div class="modal fade" id="holiday-details" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">CLOSE <img src="images/close-btn.png" alt=""></button>
      <div class="modal-body">
        <!--<section class="banner detailed"></section> -->
        <div class="owl-carousel owl-theme" id="detail-banner" >
          //this is the slider
        </div>  
        <div class="details">
          <h3 class="top-line" id="uaetitle"></h3>
          <h4 id="subtitle"></h4>
        </div>
      </div>
    </div>
  </div>
</div>

Edit 1

I tried append also. When I append I am getting the whole images but it's not shown as slider

$('#detail-banner').append('<div class="item"><img src="../sysimages/origimages/'+imgarray[i]+'" alt=""></div>');

Answer 1

You have to concat your image array data using + to create all images.You have to use innerHTML += to avoid replacing the content of a node Like following.

function showDetailsModal(id) {

        $.post('uae-holidaydetails.php',{uaeid:""+id+""},function(data){
        data = jQuery.parseJSON(data);

        var datadet= data[0];
        if(data[1]) {
        var dataimg= data[1];
        var imgarray=[];
        for (index = 0; index < dataimg.length; index++) {
        imgarray.push(dataimg[index].image);
        }
        var i=0;
        var imageContent = "";
        for (var j = 0; j < imgArray.length; i++) {
         imageContent +='<div class="item"><img src="../sysimages/origimages/'+imgarray[j]+'" alt=""></div>'; //here I am creating the div for slider
        }
        }
        document.getElementById("detail-banner").innerHTML = imageContent;
        document.getElementById("uaetitle").innerHTML= datadet.title;
        document.getElementById("subtitle").innerHTML= datadet.subtitle;
        $('#holiday-details').modal('show');   //modal is shown

        });
        }

For example let's consider the following scenario:

var array = [1,2,3,4];
for(var i=1;i<=array.length;i++){
document.getElementById("test1").innerHTML = i+" ";
}
for(var j=1;j<=array.length;j++){
document.getElementById("test2").innerHTML += j+" ";
}

<div id="test1"></div>

<div id="test2"></div>

</div>