title: jquery ajax function generating dynamic content on success
body: <p>i have this <code>function</code> that iterates an <code>array</code> and i want to generate dinamically all te divs where the info coming from the <code>array</code> is supposed to be shown... the firebug inspector shows the <code>divs</code> are in there, but the images and info are not showing. I really appreciate any help that you guys can give me, here is my code</p>
  
  <pre><code>        $("#busca").on('click', function(){
  
          $.ajax({ 
          type    : "POST",
          url     : "service.php",
          dataType: "json",
          data    : {
              action:"fullProjects",
              },          
              success:function(data){
  
                  var i;
                  for (i = 0; i &lt; data.data.length; ++i) {
  
                      console.log(i);
  
                      var divCreator ='';
  
                      divCreator+='&lt;div id="grupo'+i+'" class="typeface-js" style="font-family:GreyscaleBasic"&gt;';
                      divCreator+='&lt;div class="tipo-pro"&gt;';
                      divCreator+='&lt;div id="tipo_'+i+'" class="tipo"&gt;&lt;/div&gt;';
                      divCreator+='&lt;div id="tipo_arq_abajo'+i+'" class="abajo"&gt;&lt;/div&gt;';
                      divCreator+='&lt;/div&gt;';
                      divCreator+='&lt;div id="fotoproyectos'+i+'" class="foto"&gt;&lt;/div&gt;';
                      divCreator+='&lt;div id="nombreproyectos'+i+'" class="nombre-pro"&gt;&lt;/div&gt;';
                      divCreator+='&lt;/div&gt;';
                      divCreator+='&lt;/div&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;';
  
                      $("#contiene-pro").append(divCreator);
  
                      //$("#fotoproyectos"+i).empty();
                      var htmlThings = '';
                      htmlThings += '&lt;img src="' + data.data[i].path + '" height="128" width="160"&gt;';
                      $("#fotoproyectos"+i).append(htmlThings);
  
                      $("#nombreproyectos"+i).empty();
                      var htmlMoreThings = '';
                      htmlMoreThings += "&lt;form method=\"post\" name=\"projectsearch\" id=\"projectsearch"+ i +"\" action=\"proyectos_arq.php\"&gt;" 
                      htmlMoreThings += "&lt;span style=\"cursor: pointer;\" onclick=\"document.getElementById('projectsearch"+ i +"').submit()\"&gt;"+ data.data[i].projectName +"&lt;/span&gt;"
                      //html2 += "&lt;button id=" + "button" + data.projectId + " style=\"visibility:hidden;\"&gt;&lt;span id=" + data.projectId + " style=\"cursor: pointer;\"&gt;&lt;span&gt;" + data.projectName + "&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;"
                      htmlMoreThings += "&lt;input name=\"project_id\" type=\"hidden\" id=\"project_id\" value=" + data.data[i].projectId + "&gt;"  
                      htmlMoreThings += "&lt;/form&gt;"
                      $("#nombreproyectos"+i).append(htmlMoreThings);
  
  
                  };
  
              }
          })
  
      });
  </code></pre>
  
  <p><code>contiene-pro</code> is the main container of the rest of the <code>div's</code> all help is really appreciated... i tried a different approach with the same result</p>
  
  <pre><code>$("#busca").on('click', function(){
  
          $.ajax({ 
          type    : "POST",
          url     : "service.php",
          dataType: "json",
          data    : {
              action:"fullProjects",
              },          
              success:function(data){
  
                  var i;
                  for (i = 0; i &lt; data.data.length; ++i) {
  
                      console.log(i);
  
                      var divCreator ='';
  
                      divCreator+='&lt;div id="grupo'+i+'" class="typeface-js" style="font-family:GreyscaleBasic"&gt;';
                      divCreator+='&lt;div class="tipo-pro"&gt;';
                      divCreator+='&lt;div id="tipo_'+i+'" class="tipo"&gt;&lt;/div&gt;';
                      divCreator+='&lt;div id="tipo_arq_abajo'+i+'" class="abajo"&gt;&lt;/div&gt;';
                      divCreator+='&lt;/div&gt;';
                      divCreator+='&lt;div id="fotoproyectos'+i+'" class="foto"&gt;&lt;img src="' + data.data[i].path + '" height="128" width="160"&gt;&lt;/div&gt;';
                      divCreator+='&lt;div id="nombreproyectos'+i+'" class="nombre-pro"&gt;&lt;form method=\"post\" name=\"projectsearch\" id=\"projectsearch"+ i +"\" action=\"proyectos_arq.php\"&gt;';
                      divCreator+='&lt;span style=\"cursor: pointer;\" onclick=\"document.getElementById('projectsearch"+ i +"').submit()\"&gt;"+ data.data[i].projectName +"&lt;/span&gt;'
                      divCreator+='&lt;input name=\"project_id\" type=\"hidden\" id=\"project_id\" value=" + data.data[i].projectId + "&gt;';
                      divCreator+='&lt;/form&gt;&lt;/div&gt;';
                      divCreator+='&lt;/div&gt;';
                      divCreator+='&lt;/div&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;';
  
                      $("#contiene-pro").append(divCreator);
  
  
                  };
  
              }
          })
  
      });
  </code></pre>