title: Cannot display slider in jquery response
body: <p>I have successfully implemented slider on view page but in jquery response i dont understand y slider is not moving and i dont know where i am doing wrong. Actually i ve loaded data in jquery response which is coming from database. </p>
  
  <p>Here is my successful view page for slider:</p>
  
  <pre><code>&lt;div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"&gt;
    &lt;div class="modal-dialog modal-lg" style="width:640px;"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div id="carousel-example-generic" class="carousel slide" data-ride="carousel"&gt;
  
  
  
    &lt;!-- Wrapper for slides --&gt;
    &lt;div class="carousel-inner" id="slider"&gt;
    &lt;?php $count=1; if($inspection_images !=''){ foreach($inspection_images as $img){?&gt;   
      &lt;div class="item &lt;?php if($count==1){ echo 'active'; } ?&gt;"&gt;
       &lt;img class="img-responsive" src="&lt;?php echo base_url();?&gt;uploads/inspection/&lt;?php echo $img-&gt;attachment_saved_name; ?&gt;" alt="..."&gt;
        &lt;div class="carousel-caption"&gt;
         &lt;?php echo $img-&gt;attachment_name.' ('.$img-&gt;column_name.')'; ?&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;?php $count++; }} ?&gt; 
    &lt;/div&gt;
  
    &lt;!-- Controls --&gt;
    &lt;a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"&gt;
      &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"&gt;
      &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
    &lt;/a&gt;
  &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>which successfully produces this:
  <a href="https://i.stack.imgur.com/AtxBV.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AtxBV.gif" alt="enter image description here"></a></p>
  
  <p>and now i want to do the same thing in jquery reponse to set those data in slider:</p>
  
  <pre><code>function galleryselectetemplate()
  {
      var c = $('#gallery option:selected').val();
      var gt = $('#templategallery option:selected').val();
  //  alert(gt);
      $.ajax({
         cache: false,
        dataType:'json',
         type: 'POST',
         url: site_url+'Gallery/inspection_gallery',
         data: {client:c,gt:gt},
         success: function(resp)
         {
           //  alert((JSON.stringify(resp)));
            // var count=1;
             var json_arr = JSON.parse(JSON.stringify(resp));
             &lt;?php $count=1; ?&gt;
             if(json_arr != null)
             {
                 &lt;?php $count=1; ?&gt;
                 $('#img').empty();
                 for(var ind = 0;ind &lt; json_arr.length;ind++)
                 {
                  /*  $('#img').append('&lt;a href=""&gt;&lt;img src="&lt;?php echo base_url(); ?&gt;uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" class="img-responsive"&gt;&lt;/img&gt;&lt;/a&gt;');*///shows fit smaller image
  
                      $('#img').append('&lt;a onclick="viewImage(\''+json_arr[ind]['attachment_saved_name']+'\')" title="'+json_arr[ind]['attachment_original_name']+'" href="javascript:;"&gt;&lt;img src="&lt;?php echo base_url(); ?&gt;uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" width="300" height="200" class="img-responsive"&gt;&lt;/img&gt;&lt;/a&gt;');//showing very larger img and i dont know y it is not getting in viewImage?
  
              /*      $('#slider').append('&lt;img class="img-responsive " src="&lt;?php echo base_url();?&gt;uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" alt="..."&gt;&lt;/img&gt;');*/
  
                      $('#slider').html('&lt;div class="item &lt;?php if($count==1){ echo 'active'; } ?&gt;"&gt;&lt;img class="img-responsive " src="&lt;?php echo base_url();?&gt;uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" alt="..."&gt;&lt;/img&gt;&lt;/div&gt;');
  
                      &lt;?php $count++; ?&gt;
  
                 }
             }
         }
        });
  //  var ins= $("#inspectionid").val();
  //  alert(c);
  //  alert(gt);
  //  alert(ins);
  }
  </code></pre>
  
  <p>but i get this only:</p>
  
  <p><a href="https://i.stack.imgur.com/mgZsE.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mgZsE.gif" alt="enter image description here"></a></p>
  
  <p>, slider is not moving. Any idea where in my jquery i am doing wrong?</p>