Replace HTML Page With Contents Retrieved Via Ajax

Replace HTML page with contents retrieved via AJAX

The simplest way is to set the new HTML content using:

document.open();
document.write(newContent);
document.close();

How to replace the entire html webpage with ajax response?

If your response includes the <head> and <body> tags:

$("html").html(response);.

If not, and it's only content, then do:

$("body").html(response);.

How can I replace the entire HTML of a page, or its body content, via an AJAX call's success callback?

remove() will remove the body element (instead of just clearing it out). You can use this to match what you are trying to do

$("body").empty();  
$("body").append($(returneddata));

but it would be better to use

$("body").html(returneddata);

You also may want to look into the jQuery load() function which will place the html into the element(s) for you.

Replacing HTML contents with AJAX

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;  
      });
}

jQuery HTML Replace Dynamically Loaded Ajax Content After Second Load

Number of fixes to make. Here is a Working Example: https://jsfiddle.net/Twisty/3cp2kddm/

HTML

<ul>
  <li class="stone-list ng-scope" id="stone_913">
    <span class="check-span">
    <span class="check-span-botton"></span>
    </span>
    <span class="shape-span ng-binding">pear</span>
    <span class="carat-span ng-binding">0.5</span>
    <span class="cut-span ng-binding">excellent</span>
    <span class="colour-span ng-binding">G</span>
    <span class="clarity-span ng-binding">VS2</span>
    <span class="price-span" content="stone.price" dir="">
    <span class="ng-scope">$ 1412</span>
    </span>
    <span class="help-span">
    <span class="help-more">
      <span class="information-help-more ui-icon ui-icon-info">
        <span class="top-help-more"></span>
    <span class="center-help-more"></span>
    </span>
    </span>
    </span>
  </li>
</ul>
<ul>
  <!-- ngRepeat: row in stone.tooltrip -->
  <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Shape pear</span></li>
  <!-- end ngRepeat: row in stone.tooltrip -->
  <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Carat Weight 0.5</span></li>
  <!-- end ngRepeat: row in stone.tooltrip -->
  <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Clarity VS2</span></li>
  <!-- end ngRepeat: row in stone.tooltrip -->
  <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Color G</span></li>
  <!-- end ngRepeat: row in stone.tooltrip -->
  <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Color Shade WH</span></li>
  <!-- end ngRepeat: row in stone.tooltrip -->
  <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Cut excellent</span></li>
  <!-- end ngRepeat: row in stone.tooltrip -->
  <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Polish VG</span></li>
  <!-- end ngRepeat: row in stone.tooltrip -->
  <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Symmetry VG</span></li>
  <!-- end ngRepeat: row in stone.tooltrip -->
  <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Fluoresence N</span></li>
  <!-- end ngRepeat: row in stone.tooltrip -->
  <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Depth (%) 62.5</span></li>
  <!-- end ngRepeat: row in stone.tooltrip -->
  <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Table (%) 61</span></li>
  <!-- end ngRepeat: row in stone.tooltrip -->
  <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Certificate Type</span></li>
  <!-- end ngRepeat: row in stone.tooltrip -->
  <li class="ng-binding ng-scope" id="li"><span class="center-help-more">Number 6255152356</span></li>
  <!-- end ngRepeat: row in stone.tooltrip -->
  <li class="ng-binding ng-scope" id="li"><span class="center-help-more"><a href="[link]" style="color:yellow">Video Link</a></span></li>
  <li style="list-style: none"><span class="center-help-more"><!-- end ngRepeat: row in stone.tooltrip --></span></li>
</ul><span class="bottom-help-more"></span> <span class="change-span"><span class="change-span-botton">Choose</span></span>
<ul></ul>

JavaScript

$(function() {
  $(".stone-list").on("mousein mouseenter mouseleave mouseout", ".help-more", function(e) {
    $('.ng-binding').each(function(ind, el) {
      var $this = $(el);
      var t = $this.prop("innerHTML");
      console.log("HTML Content: ", t);
      if (e.type == "mouseleave") {
        t = t.replace(/</g, "<");
        t = t.replace(/>/g, ">");
      } else {
        t = t.replace(/</g, "<");
        t = t.replace(/>/g, ">");
      }
      console.log("HTML Converted: ", t.toString());
      $this.html(t);
    });
  });
});

First, you have non-unique id attribute #li on almost all of your li elements. This defeats your .each() function. The id attribute should be unique. I would suggest <li id="li-1"></li> where each id has a unique number.

Second, I assume your script has some object or image inside of <span class="help-more"></span> such that the user can mouse over it. I made use of jQuery UI to do this in my example. Since the event could be worded differently in different browsers, I suggest binding to a number of them. Then performing an action conditionally based on the event you are looking for. This can be done with:

$( selector ).on( "mouseenter mouseleave", handlerInOut );

As you want to replace < or > with their HTML Entities, those being < and >, make sure you're using the right entities. Your replacement function did not work globally; hence, it only replaced the first occurrence. Switching to a regular expression with the global flag addresses this.

t = t.replace(/</g, "<");
t = t.replace(/>/g, ">");

Calling .text() will only get you the actual text value and not the HTML value. Advise using .html() or .prop("innerHTML"). Both supply the same results.

Hope that helps.

AJAX Change HTML Content

change the div id content to secContent"

Also change:

content = document.getElementById('content');

content = document.getElementById('secContent');

As well as:

content.innerHTML = e.target.responseText;

secContent.innerHTML = e.target.responseText;

Your javascript's last couple of blocks of code are exactly alike to an example I was given at college (Although the example in question was only reading a single .txt file rather than several htmls it had the same problem) . I managed to get it to work by the method mentioned above. Hopefully it will help you as well.

Replace HTML Page With Contents Retrieved Via Ajax