Note that there are some explanatory texts on larger screens.

plurals
  1. POFacebook comments iframe - updating when there is no page refresh (e.g. AJAX)
    primarykey
    data
    text
    <p>I have a website that does not have page refreshes when the visitor navigates to other pages (the site is similar to hotornot.com in functionality).</p> <p>I'm trying to use Facebook comments, which I've managed to use fine for the first page the visitor lands on. When the visitor navigates to a second page I'm trying to update the comments box to be relevant to the next "page".</p> <p>Please see my code below:</p> <pre><code>&lt;head&gt; &lt;script type="text/javascript"&gt; function facebookcomments() { fbdiv = document.getElementById("fbcm"); fbdiv.innerHTML = '&lt;div id="fb-root"&gt;&lt;/div&gt;'; (function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&amp;appId=343149849069221"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); hard_url = "http://www.example.com/usernames/" + thisusername + "/" + thisitem; showcomments = document.getElementById("show_comments"); showcomments.innerHTML = '&lt;div id="fb-comments" class="fb-comments" data-href="' + hard_url + '" data-num-posts="2" data-width="470" mobile="false"&gt;&lt;/div&gt;'; } &lt;/script&gt; &lt;/head&gt; &lt;body onload="facebookcomments();"&gt; </code></pre> <p>Essentially I generate a unique URL for the page when the page loads and pass this into the Facebook comments script. This function then populates the comments div onload.</p> <p>I am triggering the facebookcomments(); function when someone clicks to go to the next item on the playlist. I was hoping the innerHTML function would simply swap out the current set of comments, with the relevant set for the new "page", however, it disappears completely instead.</p> <p>Any help would be appreciated.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload