0

I've encountered a weird issue whereas the comment section on my website will only load when initially visiting the page, but not when you're using the navigation to revisit the home section.

All content is separated in different html-files, and loaded into a div using jquery.

Full code can be seen @ GitHub

All help is appreciated. Thank you in advance.

index.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){          <-- THIS WORKS on initial load
   $('#content').load("/others/bulletin.html");
   $("#homeNav").addClass("active");
   $("#headerText").text("Helpful Tools")
});
$(document).ready(function(){
   $("#homeNav").click(function() {    <-- THIS DOES NOT WORK when re-loading bulletin.html
       $('#content').load("/others/bulletin.html");
       $("#headerText").text("Helpful Tools");
       <!-- These are just to change button-background on active page... -->
       $("#homeNav").addClass("active");
       $("#foodNav").removeClass("active");   
       $("#timeNav").removeClass("active");
       $("#aboutNav").removeClass("active");
    });
... <-- none-important code here
});
... <-- more none-important code

<div id="content">
<!-- Content Will Load Here-->
</div>

homeNav etc = navigation buttons in the form of:

<li><a href="#" id="homeNav">Home</a></li>

and the /others/bulletin.html from which it loads:

<!DOCTYPE html>
<html>
<!-- ---------------------------------------------------- -->
<!--  CONTENT                                             -->
<!-- ---------------------------------------------------- -->
<div id="content">
    <p>
        <h1>Visitor Bulletin</h3>
        <br>Be sure to leave your awesome feedback below!
    </p>
    
    <table class="fb-comments-background">
        <tr>
            <td>
                <div class="fb-comments" 
                data-href="MyWebsiteURL" 
                data-width="40" 
                data-numposts="5" 
                data-colorscheme="dark"
                data-order-by="reverse_time"
                >
                </div>
            </td>
        </tr>
    </table>
    <br>
    
    <p>
        <span class="fb-comments-count" 
        data-href="https://thunderapple.github.io">
        </span>
        awesome comment(s).
    </p> 
</div>

<!--Facebook Comment Section-->
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v9.0" nonce="MyCommentID">
</script>

</html>
aslakjs
  • 1
  • 3
  • --> All the other subpages loads perfectly every time. It's only the Facebook Comment Section that does not re-load <-- – aslakjs Jan 20 '21 at 09:43
  • Why that is the case, and what you need to do about it, is explained in the mentioned duplicate. – CBroe Jan 21 '21 at 07:28

0 Answers0