title: jQuery and AJAX. POST only gives NULL
body: <p>I'm doing this in Cloud9.</p>
  
  <p>My plan is to make an image gallery. </p>
  
  <p>On first page:</p>
  
  <ul>
  <li>there is few pictures, which represent different "categories". </li>
  <li>By clicking one those, you will be moved to the next page of albums from the chosen category. </li>
  <li>And by clicking an album, you will be shown the pictures within that album.</li>
  </ul>
  
  <p>On the first page, I have made couple of categories. The following code should activate, when you click one of the pictures. The code triggers, and the jQuery moves to the next page. </p>
  
  <p>Problem is, AJAX sends the id, but it never reaches the other page. The sent id is string, and it contains right word. </p>
  
  <p>However, the other page, which catches the POST, won't receive it: type of the variable remains as NULL, and it contains nothing.</p>
  
  <p>Code of the first page(mainpage.php):</p>
  
  <pre><code>        $(document).ready(function(){
              getContent("mainpage.php");
          });
  
          function getContent($sivu){
               var xhttp = new XMLHttpRequest();
               xhttp.onreadystatechange = function() {
                   if (xhttp.readyState == 4 &amp;&amp; xhttp.status == 200) {
                       document.getElementById("kuvaa").innerHTML = xhttp.responseText;
                   }
               }
               xhttp.open("GET", $sivu, true);
               xhttp.send();
          }  
  
  
           $(document).on("click", ".picture", function(){
  
                 var pictureId = $(this).attr("name");
                 //window.alert(jQuery.type(pictureId)); //type is string
                 //window.alert(pictureId); // content is what it should be
  
                 var request = $.ajax({
                     url: 'folders.php',
                     type: 'POST',
                     data: {
                         'idd': pictureId
                     },
  
                     success : function() {
                        getContent("folders.php")  
                     },
                     error : function(err) {
                         // in case of error
                         console.log(err);
                         alert('error');
                      },
                      dataType: "html"
                  });
              });
  </code></pre>
  
  <p>Variable on the second page (folders.php), which won't get anything:</p>
  
  <pre><code>    $picId = $_POST["idd"];
  </code></pre>
  
  <p>The first page still reads the folders.php right (which means it succeed sending the POST, as success is mandatory for the getContent to be run).</p>
  
  <p>Any ideas are welcome.</p>
  
  <p>EDIT, working solution:</p>
  
  <p>When you click picture:</p>
  
  <pre><code>            $(document).on("click", ".picture", function(){
                  var pictureId = $(this).attr("name");
                  getNewContent(pictureId);
  
              });
  </code></pre>
  
  <p>And that goes to this:</p>
  
  <pre><code>            function getNewContent($idd){
                  var xhttp = new XMLHttpRequest();
                  xhttp.onreadystatechange = function() {
                      if (xhttp.readyState == 4 &amp;&amp; xhttp.status == 200) {
                          document.getElementById("kuvaa").innerHTML = xhttp.responseText;
                      }
                  }
              xhttp.open("GET", "/folders.php?idd="+$idd, true);
              xhttp.send();
              } 
  </code></pre>