PHP Versions Question posted in
You can find a list of all versions here.

Replacing HTML contents with AJAX – PHP Versions

I’m relatively new to Javascript, so I’ve pieced together the code I have by looking through the forums on here. However, I cannot get this to work, and I am needing help.

The desired end result I am trying to achieve is that whenever a user calls the moreInfo(ID) function, a modal pops up on the screen with the contents of the modal being populated from an external file that is built using PHP.

Right now, whenever I call the function, the modal pops up but does not display the external file. Instead, the modal displays the current page (??). A live version can be found here: http://classcolonies.com/app/test.php/

What am I doing wrong? How do I need to go about doing this instead? An explanation along with a solution would be ideal so I can learn and grow in my journey to understand javascript.

Launch Page (used to launch the modal)

<h1>Test Screen</h1><button onclick='moreInfo("12");'>Test</button>

 <div id="infoModal" class="modal">
   <div class="modal-window">
     <span id="moreInfo"></span>
   </div>
 </div>


 <script>                                                                        /* AJAX name selector */
   var infoModal = document.getElementById("infoModal");

   function moreInfo(str){
       if (window.XMLHttpRequest) {xmlhttp=new XMLHttpRequest();}

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

       xmlhttp.open("GET","moreinfo.tem.php?assID=" + str, true);
       xmlhttp.send();

       infoModal.style.display = "block";                                        /* After fetching request, make modal appear */
   }

   window.onclick = function(event) {                                              /* Make modal disappear when you click "X" */
     if (event.target == infoModal) {infoModal.style.display = "none";}
   }
 </script>

 <style>
  .modal {
    display: none;
    position: fixed;
    z-index: 20;
    right: 0; top: 0;
    width: 100%; height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
    -webkit-animation-name: fadeIn;
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.4s}

  /* Customized part listed below */

  .modal-window{
    display: grid;
    position: fixed;
    padding: 10px;
    width: 600px; height: 350px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    transition: height 0.5s;
    grid-template-rows: 90px 1fr 60px;
    grid-template-areas:
      "top"
      "content"
      "controls";}

  /* --------[TOP] -------- */
  .modal-top {
    display: grid;
    grid-area: top;
    border-bottom: 2px solid #5B7042;
    grid-template-columns: 100px 1fr 80px;}

  .pic{
    display: inline-block;
    width: 65px;
    clip-path: circle();
    margin-left: 10px;}

  .modal-top .title {
    display: flex;
    align-items: center;
    font-weight: 800;
    font-size: 26px}

  .due {
    display: flex;
    align-items: center;
    font-size: 18px;
    color: gray;}


  /* --------[CONTENT] -------- */
  .modal-content {
    display: block;
    grid-area: content;
    overflow-y: scroll;
    padding: 12px;}

  .directions {
    font-size: 18px;
    line-height: 1.7}

  textarea {
    display: none;
    width: 100%; height: 100px;
    box-sizing: border-box;
    font-size: 18px !important;
    margin-top: 20px;}

  /* --------[CONTROLS] -------- */
  .modal-controls {
    display: flex;
    align-items: center;
    grid-area: controls}

  #askforhelp {margin-right: 10px;}

  #sendmsg {display: none; margin-right: 10px}
  #cancelmsg {display: none}
 </style>

External file, used to replace the <span id="moreInfo"> with actual content

<div class='modal-top'>
  <img class='pic' src='../resources/pics/1.png'>
  <span class='title'> Reading Homework </span>
  <span class='due'> Due 3d </span>
</div>
<div class="modal-content">
  <div class='directions'>
    <b>Directions:</b> You must complete the assignment to continue to the next section. Please type complete sentences and capitalization. Let me know if you need help.
  </div>
  <textarea placeholder='Type Question..'></textarea>
</div>
<div class="modal-controls">
  <button id='askforhelp' class='button green-btn' onclick='askHelp("showform")'>Ask for Help</button>
  <button id='markdone' class='button green-btn'>Mark as Done</button>
  <button id='sendmsg' class='button green-btn'>Send Message</button>
  <button id='cancelmsg' class='button grey-btn' onclick='askHelp("hideform")'>Cancel Message</button>
</div>

<script>

  function askHelp(arg) {

    var window = document.getElementsByClassName('modal-window')[0];
    var textbox = document.getElementsByTagName("textarea")[0];

    var helpBtn = document.getElementById('askforhelp');
    var doneBtn = document.getElementById('markdone');
    var sendBtn = document.getElementById('sendmsg');
    var cancelBtn = document.getElementById('cancelmsg');

    if (arg == "showform") {
      window.style.height = '400px';
      textbox.style.display = 'block';
      helpBtn.style.display = 'none';
      doneBtn.style.display = 'none';
      sendBtn.style.display = 'block';
      cancelBtn.style.display = 'block';
    }

    if (arg == "hideform") {
      window.style.height = '350px';
      textbox.style.display = 'none';
      helpBtn.style.display = 'block';
      doneBtn.style.display = 'block';
      sendBtn.style.display = 'none';
      cancelBtn.style.display = 'none';
    }
  }

</script>
Tags:

3

Answers


  1. 0

    Try using fetch instead.

    Something like:

    function moreInfo(str){
   fetch("moreinfo.tem.php?assID=" + str).then((response) => {
      response.text().then((text) => {
         document.getElementById("moreInfo").innerHTML=text;
         infoModal.style.display = "block";
      });
   })
}

    Some explanation about the syntax here:
    fetch makes an HTTP request to the URL provided (default is GET request, unless specified otherwise)
    .then means, do something after the request is done.
    (response) => {} is an arrow notation in JavaScript.
    it’s the same as writing function(response) {...}

    Login or Signup to reply.
  2. 0 
    fetch('xxx/com/api')
.then(responese=>responese.json())
.then(data=>{ do something..}

    remember to add json() within first .then

    Login or Signup to reply.
  3. 0

    Based on the answer by @Gil, Update your moreInfo function as below:

    function moreInfo(str){
   fetch("moreinfo.tem.php?assID=" + str).then((res) => res.text()).then(response=>{
     document.getElementById("moreInfo").innerHTML=response;
     infoModal.style.display = "block";
    });
}

    fetch returns a promise. From that promise, return the evaluated text from the response. This yields another promise which would contain the html or whatever.

    It would be worth mentioning that the script in the returned html won’t execute, so your askHelp function won’t be defined. You can parse the html response and inject any script contents into the page as follow:

    function moreInfo(str){
   infoModal.style.display = "block";
   fetch("moreinfo.tem.php?assID=" + str).then((response) =>response.text()).then((text) => {
        var parser = new DOMParser();
        var doc = parser.parseFromString(text, "text/html");
        var ele = doc.documentElement;
        var scripts = ele.getElementsByTagName('script');
        for(var script of scripts){
            var head = document.getElementsByTagName('head')[0];
            var scriptElement = document.createElement('script');
            scriptElement.setAttribute('type', 'text/javascript');
            scriptElement.innerText = script.innerText;
            head.appendChild(scriptElement);
            head.removeChild(scriptElement);
       }
       document.getElementById("moreInfo").innerHTML=text;  
      });
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search