F. Flores F. Flores - 4 months ago 16
Ajax Question

Draw dynamically images in different div

Hello I have a form with four divs, every div is a full page to print like this one:

Format Example

I create all the controls with AJAX no problem with that, then I load the images with another ajax call, here is the success function:

success: function (data) {
//Variable para convertir los datos obtenidos a JSON
var aRC = JSON.parse(data.d);
//Variable que se utilizara para construir la estructura HTML
var lineas = "";
var lineas2 = "";
//Ciclo FOR para recorrer el arreglo
for (var i = 0; i < aRC.length; i++) {
//Variables = a campos obtenidos al ejecutar la funcion
var id = aRC[i].Id;
var num = id;
var rev = aRC[i].FileName;
var pur = aRC[i].Type;
var status = aRC[i].Content;
var imagen = status.substring(36, status.length - 37);
var owner = aRC[i].IdAlerta;


if (i < 4) {
lineas += '<div class="col-lg-3 col-md-4 col-xs-3 thumb marco">';
lineas += '<a class="thumbnail" href="#">'
lineas += '<img class="responsive" src="data:image/jpeg;base64,' + imagen + '" />';
lineas += '<p class="hidden text-justify" id="Pie' + i + '"></p>'
lineas += '</a>';
lineas += '<span class="btn btn-xs btn-success fa fa-pencil hidden-print" id="EditPie' + i + '"></span>';
lineas += '<input type="text" class="form-control hidden hidden-print" id="PiePag' + i + '"> <span class="btn btn-xs btn-success fa fa-check hidden hidden-print" id="OkPie' + i + '"></span>'
lineas += '</div>';
}

else {

lineas2 += '<div class="col-lg-3 col-md-4 col-xs-3 thumb marco">';
lineas2 += '<a class="thumbnail" href="#">'
lineas2 += '<img class="responsive" src="data:image/jpeg;base64,' + imagen + '" />';
lineas2 += '<p class="hidden text-justify" id="Pie' + i + '"></p>'
lineas2 += '</a>';
lineas2 += '<span class="btn btn-xs btn-success fa fa-pencil hidden-print" id="EditPie' + i + '"></span>';
lineas2 += '<input type="text" class="form-control hidden hidden-print" id="PiePag' + i + '"> <span class="btn btn-xs btn-success fa fa-check hidden hidden-print" id="OkPie' + i + '"></span>'
lineas2 += '</div>';
}
}
$('#Imagenes').html(lineas);
$('#Imagenes2').html(lineas2);
}


The problem here is that I want to load only 4 images per page, my current code its wrong but works with less than 9 images how can I solve this?

PD. That code is only for 2 pages, but has to work with more than 2.

EDIT: $Imagenes is a div(page1), $Imagenes2 is another div(page2).

Answer

Just continue with your "IF" like this:

if (i < 4) {
   code for $('#Imagenes')
}
else {
   if (i < 8) {
      code for $('#Imagenes2')           
   }
   else {
         if (i < 12) { 
              code for $('#Imagenes3')          
         }
   }
}

And continue doing that with all the #Imagenes you want.