0

I am programming an application as we all do... But for now i have stumpled uppon an error i can't figure out and i thought it would be nice to get some new eyes to look at it.

Let me explain. Shortly explained, when i load the page and it is fresh the DOM functions work fine, but after i request the same page with AJAX the DOM functions don't work.

I have my index.php as you see below and the included ajaxmineopslag.php is also the file i make a request for with AJAX. The AJAX request is called in loggedinpage.js as the function "sendDataAJAX". The function is triggered when you onclick either the id mine_opslag_l or classer_tilbud_l. These id's trigger the function and has a parameter that defines which page that gets included in the getinnerclassertilbud.php which is the page the request is sent to.

After the request has been sent the ajaxmineopslag.php does as supposed but the DOM elements don't work. The javascript function that does not work now is the first one at the loggedinpage.js where the settings-opslag-wrapper should be displayed when the settings-opslag is clicked.

Thanks for your patience and time!

index.php

<!DOCTYPE>    
<html>
<head>
     <title>Ajax</title>
     <style>
        .adddisplay {
          display: block;
         }

        .settings-opslag-wrapper {
          display: none;
         }

     </style>
</head>

<body>
   <a id="mine_opslag_l">Mine opslag</a> 
   <a id="classer_tilbud_l">Classers Tilbud</a>         
   <div id="mainchangercontent">

        <?php include "include/ajaxmineopslag.php"; ?>

   </div>


<script type="text/javascript" src="js/loggedinpage.js"></script>

 </body>
</html>

My loggedinpage.js

const settingclick = document.getElementsByClassName('opslag-wrapper');

for (var i = 0; i < settingclick.length; i++) {
  settingclick[i].getElementsByClassName('settings-opslag')[0].addEventListener('click', function() {
    this.getElementsByClassName('settings-opslag-wrapper')[0].classList.toggle("adddisplay");
  });
}

document.getElementById("mine_opslag_l").addEventListener("click", function() {
  sendDataAJAX("1");
});
document.getElementById("classer_tilbud_l").addEventListener("click", function() {
  sendDataAJAX("2");
});

function sendDataAJAX(dataz) {

  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  } else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }

  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 & this.status == 200) {
      document.getElementById("mainchangercontent").innerHTML = this.responseText;

    }
  };

  xmlhttp.open("GET", "getinnerclassertilbud.php?p=" + dataz, true);
  xmlhttp.send();
}

The getinnerclassertilbud.php page

<?php
//init.php contains my db connection and such...
include "core/init.php";

if (isset($_GET)) {
    if (isset($_GET["p"])) {
        $p = $_GET["p"];
        if (!empty($p)) {
            if ($p == 1) {
                include "include/ajaxmineopslag.php";
            } else if ($p == 2) {
                //this is an other page like ajaxmineopslag.php, but this page does not annoy me for now
                include "include/ajaxclassertilbud.php";
            }
        }

      }
    }
?>

ajaxmineopslag.php page

<div class="opslag-wrapper">
<div class="settings-opslag">
    <p>View hidden div</p>



    <div class="settings-opslag-wrapper">
        <p>This is the hidden div that does not show up after AJAX request</p>
    </div>

</div>
</div> 

<div class="opslag-wrapper">
<div class="settings-opslag">
    <p>View hidden div</p>



    <div class="settings-opslag-wrapper">
        <p>This is the hidden div that does not show up after AJAX request</p>
    </div>

</div>
</div> 

<div class="opslag-wrapper">
<div class="settings-opslag">
    <p>View hidden div</p>



    <div class="settings-opslag-wrapper">
        <p>This is the hidden div that does not show up after AJAX request</p>
    </div>

</div>
</div>
Barmar
  • 741,623
  • 53
  • 500
  • 612
  • Any errors in your console? – Difster Jul 29 '17 at 04:05
  • Nope. I have checked 1000 times. No errors, nothing, 0. :// –  Jul 29 '17 at 04:06
  • If you're talking about the event handlers in the first loop, those elements are deleted when you do the ajax call, and they are replaced by new elements that probably look the same, with the same classes, but aren't the same elements, and don't have the event handlers. – adeneo Jul 29 '17 at 04:07
  • Thanks. If you have an answer please drop it below! –  Jul 29 '17 at 04:09
  • Well, you tagged it with jQuery, so something like -> https://jsfiddle.net/adeneo/Ly2szeey/1/ – adeneo Jul 29 '17 at 04:15
  • Thanks for your fiddle! But i would like to keep my script in diamond pure javascript –  Jul 29 '17 at 04:16
  • Then you'd have to figure out delegation in plain JS, which isn't always that easy, but here's a start -> https://stackoverflow.com/questions/45291962/vanilla-js-version-of-jquery-document-on-click-for-links/45292145#45292145 – adeneo Jul 29 '17 at 04:21

0 Answers0