How to automate with for loop inside array from a jquery element

318
November 21, 2016, at 7:45 PM

I want to automate with the help of for loop an array for 10 image files in initialPreview and initialPreviewConfig parameters.

Something like this:

for (i = 0; i < 11; i++) {
  "<img style='height:35px' id=' + zerofill(i,2) +' src='" + url + zerofill(i,2) +"'.png'>"
}

But how can I implement that in code bellow?

initialPreviewShowDelete: false,
initialPreview: [
    "<img style='height:35px' id='01' src='" + url + "01.png'>",
    "<img style='height:35px' id='02' src='" + url + "02.png'>",
    "<img style='height:35px' id='03' src='" + url + "03.png'>",
    "<img style='height:35px' id='04' src='" + url + "04.png'>",
    "<img style='height:35px' id='05' src='" + url + "05.png'>",
    "<img style='height:35px' id='06' src='" + url + "06.png'>",
    "<img style='height:35px' id='07' src='" + url + "07.png'>",
    "<img style='height:35px' id='08' src='" + url + "08.png'>",
    "<img style='height:35px' id='09' src='" + url + "09.png'>",
    "<img style='height:35px' id='10' src='" + url + "10.png'>",
],
initialPreviewConfig: [
    {caption: "01", width: "35px", url: "avatar_ajax.php", key: 1},
    {caption: "02", width: "35px", url: "avatar_ajax.php", key: 2},
    {caption: "03", width: "35px", url: "avatar_ajax.php", key: 3},
    {caption: "04", width: "35px", url: "avatar_ajax.php", key: 4},
    {caption: "05", width: "35px", url: "avatar_ajax.php", key: 5},
    {caption: "06", width: "35px", url: "avatar_ajax.php", key: 6},
    {caption: "07", width: "35px", url: "avatar_ajax.php", key: 7},
    {caption: "08", width: "35px", url: "avatar_ajax.php", key: 8},
    {caption: "09", width: "35px", url: "avatar_ajax.php", key: 9},
    {caption: "10", width: "35px", url: "avatar_ajax.php", key: 10},
],
Answer 1

You should use Array.prototype.push() method on every iteration of for cycle, to add items to the array. Like this:

var initialPreviewArray = []; 
var initialPreviewConfigArray = [];
for (var i = 0; i < 11; i++) {
  initialPreviewArray.push("<img style='height:35px' id='" + zerofill(i,2) + "' src='" + url + zerofill(i,2) +"'.png'>");
  initialPreviewConfigArray.push({
      caption: zerofill(i,2),
      width: "35px",
      url: "avatar_ajax.php",
      key: i
  });
}

And assign it to needed property:

 $("#inputFile").fileinput({
     uploadUrl: "avatar_upload.php", 
     uploadAsync: true, 
     minFileCount: 1, 
     owerwriteInitial: false, 
     showClose: true, 
     showCaption: true, 
     initialPreviewShowDelete: false,
     initilPreview: initilPreviewArray
     initialPreviewConfig: initialPreviewConfigArray,
     uploadExtraData: {
         img_key: "1000", 
         img_keywords: "happy, people"
     },     
});

Also, you should better use var i = 0 istead of just i in for loop. var statement makes the variable local, otherwise it gets in global scope and one day could harm you very much. And pay attention to quote escape when you generate your string. I've fixed a mistake there too.

READ ALSO
Find absolute path to image from relative path with PHP

Find absolute path to image from relative path with PHP

There are similar questions (PHP: Find images and links with relative path in output and convert them to absolute path) but I'm not sure they solve this problem. .

521
How to get index of clicked element?

How to get index of clicked element?

I have five anchor elements in my navigation. I want to get index of clicked element with jQuery.

342
JQuery/JSON Error - [AJAX] Invalid JSON - Server reponse is:

JQuery/JSON Error - [AJAX] Invalid JSON - Server reponse is:

I was trying a Jquery/Json terminal thing: http://terminal. jcubic.

442
jQuery .unload() doesn not work, but .load() does

jQuery .unload() doesn not work, but .load() does

I'm new to jQuery so forgive me for my ignorance. .

372