title: Html php Javascript class not work dynamically. by ajax
body: <p>Question from beginner.</p>
  
  <p>I just try made photo gallery website by sample site template.
  My photos located in local folder to IIS server.</p>
  
  <p>First job is to load all subfolders from mainfolders: This works fine!</p>
  
  <pre><code>&lt;li class="colorlib-active"&gt;
     &lt;?php
      if ($handle = opendir('images')) {
            while (false !== ($entry = readdir($handle))) {
              if ($entry != "." &amp;&amp; $entry != ".." &amp;&amp; $entry != ".htaccess" &amp;&amp; $entry != ".htpasswd"){                                 
               echo '&lt;a href="#" onclick=photogallery("images/'.$entry.'")&gt; '.$entry.'&lt;/a&gt;&lt;br&gt;';                                                                          }
             }
           closedir($handle);
         }                                              
      ?&gt; 
  &lt;/li&gt;
  </code></pre>
  
  <p>Then function photogallery(): after cliking subfolder, then we can find all jpg-files and attribute them.
  This works also fine!</p>
  
  <pre><code>    &lt;script&gt;   
      function photogallery($dir){
          $.ajax({
            url: $dir,
            success: function(data){ 
                  $(data).find('a[href$=".jpg"]').each(function () { 
                  var filename = this.href.replace(window.location.host, "").replace("https://", "");
                  var fileurl = filename;
                  var para = document.createElement("div");
                  para.setAttribute("class", "col-md-4 ftco-animate");                       
                  var para2 = document.createElement("a");
                  para2.setAttribute("href",  filename);                       
                  para2.setAttribute("class", "photography-entry img image-popup d-flex justify-content-center align-items-center");                       
                  para2.setAttribute("style", "background-image: url("+fileurl+");");                                              
                  document.getElementById("photoplace").appendChild(para).appendChild(para2);                
              });
            }
          });
      }             
      &lt;/script&gt;
  </code></pre>
  
  <p>This updates dynamically div photoplace:</p>
  
  <pre><code>&lt;section class="ftco-section-2"&gt;
      &lt;div class="photograhy"&gt;
          &lt;div class="row no-gutters" id="photoplace"&gt;
           &lt;/div&gt;                                                                                
          &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>So problem is, pictures does not showing in page because class ftco-animate won't work.
  I remove this class and now i see pictures. After cliking picture class image-popup won't work.</p>
  
  <p>Still if i call directly function without ajax:</p>
  
  <pre><code>&lt;script&gt;   
  function test($dir2){
        var para = document.createElement("div");
        para.setAttribute("class", "col-md-4 ftco-animate");                       
        var para2 = document.createElement("a");
        para2.setAttribute("href",  $dir2);                       
        para2.setAttribute("class", "photography-entry img image-popup d-flex justify-content-center align-items-center");                       
        para2.setAttribute("style", "background-image: url("+$dir2+");");                                              
        document.getElementById("photoplace").appendChild(para).appendChild(para2);       
      }       
  &lt;/script&gt;
  </code></pre>
  
  <p>By call:
  <code>test("images/folder1/IMG_20200410_0128.jpg");</code>  This works fine!</p>
  
  <p>Could you please tell what happend code inside ajax or where this is going wrong?
  Thanks.</p>
  
  <p>Chrome console show following errors:</p>
  
  <pre><code>js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&amp;sensor=false:126 Uncaught pd {message: "Map: Expected mapDiv of type Element but was passed null.", name: "InvalidValueError", stack: "Error↵    at new pd (https://maps.googleapis.com/m…init (myurladdress/js/google-map.js:44:15)"}message: "Map: Expected mapDiv of type Element but was passed null."name: "InvalidValueError"stack: "Error↵    at new pd (https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&amp;sensor=false:56:227)↵    at Object._.qd (https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&amp;sensor=false:56:337)↵    at new Gi (https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&amp;sensor=false:126:50)↵    at init (myurladdress/js/google-map.js:44:15)"__proto__: Error
  Gi @ js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&amp;sensor=false:126
  init @ google-map.js:44
  load (async)
  _.N.addDomListener @ js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&amp;sensor=false:184
  (anonymous) @ google-map.js:62
  DevTools failed to load SourceMap: Could not load content for myurladdress/js/popper.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
  DevTools failed to load SourceMap: Could not load content for myurladdress/js/bootstrap.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
  DevTools failed to load SourceMap: Could not load content for myurladdress/js/aos.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
  DevTools failed to load SourceMap: Could not load content for myurladdress/css/aos.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
  util.js:230 Google Maps JavaScript API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required
  uz.o @ util.js:230
  (anonymous) @ js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&amp;sensor=false:140
  Promise.then (async)
  (anonymous) @ js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&amp;sensor=false:140
  setTimeout (async)
  Aj @ js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&amp;sensor=false:140
  google.maps.Load @ js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&amp;sensor=false:14
  (anonymous) @ js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&amp;sensor=false:233
  (anonymous) @ js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&amp;sensor=false:233
  </code></pre>
  
  <p>and:</p>
  
  <pre><code>throw _.qd("Map: Expected mapDiv of type Element but was passed "+a+".");if("string"===typeof a)throw _.qd("Map: Expected mapDiv of type Element but was passed string '"+a+"'.");var d=b||{};d.noClear||_.Bi(a);var e="undefined"==typeof document?null:document.createElement("div");e&amp;&amp;a.appendChild&amp;&amp;(a.appendChild(e),e.style.width=e.style.height="100%");if(!(_.z.devicePixelRatio&amp;&amp;_.z.requestAnimationFrame||_.Tg[43]))throw _.P("controls").then(function(m){m.Oh(a)}),
  
  </code></pre>
  
  <p>Update! Please forget previous and after many hours of checking i have one question!</p>
  
  <p>What difference is next two ways make function call? (because last one works propely!)</p>
  
  <pre><code>&lt;script&gt;
  function loadimages(){
          $imurl ="photos/gallery1/IMG_20200410_0128.jpg";
                      var para = document.createElement("div");
                      var para.setAttribute("class", "col-md-4 ftco-animate");                       
                      para2 = document.createElement("a");
                      para2.setAttribute("href", $imurl);                       
                      para2.setAttribute("class", "photography-entry img image-popup d-flex justify-content-center align-items-center");                       
                      para2.setAttribute("style", "background-image: url('"+$imurl+"');");                                              
                      document.getElementById("photoplace").appendChild(para).appendChild(para2);       
  }
  
  document.getElementById("clickMe").onclick = function () { loadimages(); };          
  &lt;/script&gt;
  </code></pre>
  
  <p>or</p>
  
  <pre><code>&lt;script&gt;
  function loadimages(){
          $imurl ="photos/gallery1/IMG_20200410_0128.jpg";
                      var para = document.createElement("div");
                      var para.setAttribute("class", "col-md-4 ftco-animate");                       
                      para2 = document.createElement("a");
                      para2.setAttribute("href", $imurl);                       
                      para2.setAttribute("class", "photography-entry img image-popup d-flex justify-content-center align-items-center");                       
                      para2.setAttribute("style", "background-image: url('"+$imurl+"');");                                              
                      document.getElementById("photoplace").appendChild(para).appendChild(para2);       
  }
  
  loadimages();         
  &lt;/script&gt;
  </code></pre>
  
  <p>Really, why this last code working propely and html button can't activate function propely?</p>