[Renault]

My articles' main page is one that loads articles dynamically using Ajax technology, either from another page or from links on the same page (listed in a side scrolling div).

With the php version I have not succeeded in anyway to do this. Bummer.

With the iframe version, it works if loading articles from a different page because that reloads (refreshes) the whole main page each time. However, I also have a list of these articles on the main page itself which loads articles dynamically, without reloading the page itself. Unfortunately, the comments are not accordingly updated. I currently have to add a page reload to each article's link — which somewhat defeats the purpose of Ajax.

Still, it works. Except for the reloading of the page, this comment system is worth purchasing (which I intend to do soon).
I guess my question as this time is: Is there currently a way to load articles/comments dynamically, with either versions, without the need to reload the page? And if not, is this something that I can hope to be implemented in a future version of Commentics?

In any case thank you for this very fine comment system.

[Steven]

You could just update the iFrame src attribute with a different identifier, like so:

Code:

<a href="#" onclick="myFunction()">Change Page</a>

<script>
function myFunction() {
    var iFrame = document.getElementById('cmtx_iframe');
    iFrame.src = 'http://yimind.org/commentics/iframe.php?identifier=2&reference=How%20to%20know%20things&url=http%3A%2F%2Fyimind.org%2Fsample.html';
}
</script>

In the above code, when you click the Change Page link, it calls the function myFunction() which gets the iFrame and changes its src attribute to the new identifier ("2" in this case). You'd have to do that last bit dynamically but that's essentially how I'd do it.

[Renault]

Thank you for your suggestion.

The way in which articles are loaded on my page is as follows:

Articles exist in a separate folder, each with the extension '.htm' — for instance, article1.htm, article2.htm, etc.

The main page in which these articles are dynamically loaded is called 'articles.html', which never needs to be refreshed/reloaded when a new article is loaded within a special container on the main page using Ajax — unless, of course, they are loaded from links on a different page.

Initially, the first article to appear on the main page is set through the function 'updateComments' on the main page (articles.html) in the following manner:

var updateComments = function() {
var ident = $('#post_id').val();
var refer = $('#post_id').attr('title');
var commentics_config = {
'identifier': ident,
'reference' : refer
};
};

updateComments();

The specific $('#post_id').val(); and $('#post_id').attr('title'); are set within a hidden input field in each article page; the function 'updateComments' initially gets the Commentics identifier and reference from that hidden input.

This works because the first article to appear on the page is set from a link on a different page, which implies an actual hard loading of the main page.

But on that same main page (articles.html) there is a list of links to other articles which when clicked dynamically (without any page reload) loads one of them in the appropriate container within the main page.

I assume this must be quite obvious to you so far.

The way in which articles and their appropriate comments are currently updated on the main page is by adding 'onclick="setTimeout(function(){location.reload();},150);"' to each link in the list of articles. Again, this list is on the main page.

Unfortunately, this means a hard reload of the main page each time a different article is loaded in its container.

I have tried your suggestion.
One problem is that I get a message to the effect that the iFrame is already present on the page.
Another issue is that I use parameters (not the whole window.location) to insert different articles. The window.location then gets changed according to these parameters.

My QUESTION is this: As its stands right now, isn't it possible to update the comments along with each article? I know it is because the system I was previously using, all php, worked just fine in this regard (still, I much prefer Commentics because it includes many important features and securities completely absent in the previous system).

I guess my hope at this point is that I was clear enough is this post for you to understand my particular situation and whether or not there actually is a way to implement this with Commentics, or if not whether you might consider it in a future update.

Thanks for invaluable help.

[Steven]

I believe the solution is how I described where you need to update the src attribute of the iFrame. I tested that prior to posting and it works fine. I appreciate my example was generic. You'll need to adapt it to fit with how your website works. So when your users click on one of the links to load an article using ajax, you'll need to get the #post_id value and title of the new article and use that info to update the iFrame src attribute. Unfortunately I can't spend too much time on the details of that as it's very specific to your website. You mentioned that you tried that but got an error about the iFrame already being present. Can you elaborate on that?

[Renault]

Thank you Steve.

I want to try your code again. I guess there's something I must have misunderstood.
The code you provided includes a function that specifically includes/sets the actual identifier and reference names of the page I wish to load dynamically.
My questions is: how do I integrate variables in that function that would correspond to those on the link (e.g., <a href="#" onclick="myFunction(identifier, referencer)">Change Page</a>).
Let's start with this and see how it goes.
Thanks.

[Renault]

Thank you Steve.

I want to try your code again. I guess there's something I must have misunderstood.
The code you provided includes a function that specifically includes/sets the actual identifier and reference names of the page I wish to load dynamically.
My questions is: how do I integrate variables in that function that would correspond to those on the link (e.g., <a href="#" onclick="myFunction(identifier, referencer)">Change Page</a>).
Let's start with this and see how it goes.
Thanks. 

UPDATE:

Okay. I am working as hard as I can to implement your code on my page.

I have had some success in coding the link correctly so as to pass the identifier and reference values to the commentics function that sets the iframe.

Each article is loaded dynamically from a json file. This json file contains all the articles with various parameters such as a title value and a document value which respectively correspond to the function’s reference and identifier. Each link also includes an ‘onclick’ function by the name of ‘updateComments’ like so: 

Code:

onclick="updateComments(\''+val.document+'\',\''+val.title+'\'); return false;"

This works to get the reference and identifier for the function, which then goes:

Code:

function updateComments(id, ref) {
var commentics_config = {
  'identifier': id,
  'reference' : ref
};

var iden = encodeURIComponent(id);
var refe = encodeURIComponent(ref);

var iFrame = $('#cmtx_iframe');

iFrame.attr('src','http://localhost/YIMind-dev/commentics/iframe.php?identifier=encodeURIComponent(id)&reference=encodeURIComponent(ref)&url=http%3A%2F%2Flocalhost%2FYIMind%2Fblog.html?b=articles&f=&s=&d=encodeURIComponent(id)');

btw: I also tried vanilla js. Same results.

I don’t get any actual error, and the iFrame doesn’t update. But I get a message saying:
 
[iFrameSizer][Host page: cmtx_iframe] Ignored iFrame, already setup. embed.js:93
s @ embed.js:93
E @ embed.js:93
d @ embed.js:93
i @ embed.js:93
(anonymous) @ embed.js:93
(anonymous) @ embed.js:97
load (async)
(anonymous) @ embed.js:95
load (async)
(anonymous) @ embed.js:6

btw: the window.location of the main page on which the articles are loaded changes with each new article being loaded. For instance, testing this locally, for an article entitled ‘egoic-mind’ the url goes: http://localhost/YIMind-dev/blog.html?b=...egoic-mind, or for an article entitled ‘yoga’ the url goes: http://localhost/YIMind-dev/blog.html?b=...&s=&d=yoga. The last item on these urls corresponds to the identifier for the function. 

So I guess my question is: what am I doing wrong?
Again, all I’m trying to do is avoid a hard refresh/reload of the main page each time a new article is loaded. Other than that it works quite well.

Thanks for your help.
btw: how do I include an attachment to these posts?

[Steven]

I've updated the below code to accept id and ref parameters, and it logs info to the console so you can verify things. You don't need the 'var commentics_config' section so that's not there on purpose.

Code:

<script>
function updateComments(id, ref) {
    console.log(id);
    console.log(ref);

    var iFrame = document.getElementById('cmtx_iframe');

    console.log(iFrame);

    var url = 'http://localhost/YIMind-dev/commentics/iframe.php?identifier=' + encodeURIComponent(id) + '&reference=' + encodeURIComponent(ref) + '&url=http%3A//localhost/YIMind/blog.html%3Fb%3Darticles%26f%3D%26s%3D%26d%3D' + encodeURIComponent(id);

    console.log(url);

    iFrame.src = url;
}
</script>

For some reason I don't see the option to add attachments. It definitely used to be there. I'll have to look into that.

[Renault]

Hi Steven.

It works... locally (http://localhost/YIMind-dev), perfectly, it seems, both when first navigating to the main page (with default article) and when clicking on one of the links on the main page to dynamically load a different article, thereby updating the comments. Great.

Unfortunately, it doesn’t seem to work on the remote site (https://yimind.org).
If no comments exist for an article I am shown the “No comments yet, be the first” form.
So I write some comment, add it. Everything seems fine so far.
Verifying this on the back end of Commentics confirms that the comments did indeed register.

But then if I refresh the page, the iFrame is loaded but empty. There’s nothing in it.
When I click any of the links on the main page, again, the iFrame loads but empty — unless there are yet no comments.

I have made some changes to your code so that it may work both locally and remotely.

I have tried adding lots of timeout, to no avail.

Here it is:

var defaultArticle = localStorage.getItem('defaultArticle');

defaultArticle = defaultArticle === null || defaultArticle === '' || defaultArticle === 'undefined' ? 'egoic-mind' : defaultArticle;

$('#textContainer').load('text/articles/' + defaultArticle + '.htm');

setTimeout(function() {
loadComments();
},1500);

// NOTE: load article from clicking on link
function loadNewArticle(ident) {
$('#textContainer').load('text/articles/' + ident + '.htm');
}

/* ************************** */

var wl_protocol = window.location.protocol;
var wl_host = window.location.host;
var wl_path = window.location.pathname;
var wl_address = wl_protocol + '//' + wl_host + wl_path;
var wl_localfolder = wl_host.match('^localhost') ? '/YIMind-dev' : '';
var wl_start = wl_protocol + '//' + wl_host + wl_localfolder;
var ident, refer, url, iFrame;

// NOTE: load comments based on default article in localStorage
function loadComments() {
ident = $('#post_id').val();
refer = $('#post_id').attr('title');

iFrame = document.getElementById('cmtx_iframe');

url = wl_start + '/commentics/iframe.php?identifier=' + encodeURIComponent(ident) + '&reference=' + encodeURIComponent(refer) + '&url=' + wl_address + '%3Fb%3Darticles%26f%3D%26s%3D%26d%3D' + encodeURIComponent(ident);

iFrame.src = url;

console.log('loading IDENTIFIER: ' + ident + ' | loading REFERENCE: ' + refer);
console.log('IFRAME from LOAD: ' + iFrame);
console.log('URL: ' + url);
}

function updateComments(ident, refer) {
console.log(ident);
console.log(refer);

iFrame = document.getElementById('cmtx_iframe');

console.log('IFRAME from UPDATE: ' + iFrame);

url = wl_start + '/commentics/iframe.php?identifier=' + encodeURIComponent(ident) + '&reference=' + encodeURIComponent(refer) + '&url=' + wl_address + '%3Fb%3Darticles%26f%3D%26s%3D%26d%3D' + encodeURIComponent(ident);

iFrame.src = url;

console.log('updated IDENTIFIER: ' + ident + ' | updated REFERENCE: ' + refer);

localStorage.setItem('defaultArticle', ident);

}

Here are the links to load/update articles and comments:

<ul id="links">
<li><a href="#" onclick="loadNewArticle('yoga');setTimeout(function(){updateComments('yoga','Yoga');},1200);">Yoga</a></li>
<li><a href="#" onclick="loadNewArticle('egoic-mind');setTimeout(function(){updateComments('egoic-mind','Egoic Mind');},1200);">Egoic Mind</a></li>
<li><a href="#" onclick="loadNewArticle('awakening');setTimeout(function(){updateComments('awakening','Awakening');},1200)">Awakening</a></li>
</ul>

<div id="commentics"></div>


You may check this page on my site: yimind.org/comtest.html
Note that I have updated the url to reflect the href of the main page.

Again, this works amazingly well locally, I have no idea why it shouldn’t also work remotely (btw, I have check the php requirements on the remote site: php v7.3.2 I believe);

Please help me figuring out what I’m doing wrong or missing.

Thank you.

[Steven]

If there are no comments when there should be, it likely means that you're not using the same identifier as when you posted the comment. Use the Network tab in your web browser's 'Dev Tools' to verify that the iFrame is using the same identifier in both cases (page refresh and clicking a link to change the page).

[Renault]

Hello Steve.
Glad you are still there.
BTW: Is this where I'm supposed to reply each time? I don't se any way to format or attach anything.
Anyway.
The setup of the page where articles are loaded is exactly the same locally and remotely.
I have used window.location to make that possible.
Yes, of course, I have made sure that the identifier and reference are correct in the dev tools. And they definitely are.
But just to make sure, I have deleted those 2 articles and reposted them.

Now, when I refresh the page or click on a link I get the iframe for a first comment, so far so good.
So I enter a comment for two articles only: Awakening and Egoic Mind; I leave the article “Yoga” without comments.
Each time I get an email saying that I have successfully posted a comment.

At the Back end:
There are two articles posted:
1. Awakening: identifier: awakening; reference: Awakening; url: https://yimind.org/comtest.html#awakening; (form enabled; all permissions ok, approved)
2. Egoic Mind: identifier: egoic-mind; reference: Egoic Mind; url: https://yimind.org/comtest.html#egoic-mind; (form enabled; all permissions ok, approved)

To me, this all seems very good.
Yet, whether I refresh the page or load a different article, no iframe, except when there are no comments (in this case for the article “Yoga”).
Again, locally, this all works fine.

Would you please go to: yimind.org/comtest.html and check that out for yourself. I am probably missing something but I just can’t figure it out. I have written some logs to produce each time the identifier and reference.
By the way, I have tried the same code for one of my official commented pages, and the exact same issue is repeated there as well: works locally, not remotely.

Here is my code (slightly altered since the last time).

======================================

<script>

var defaultArticle = localStorage.getItem('defaultArticle');

defaultArticle = defaultArticle === null || defaultArticle === '' || defaultArticle === 'undefined' ? 'egoic-mind' : defaultArticle;

$('#textContainer').load('text/articles/' + defaultArticle + '.htm', function() {
loadComments();
});

/* ************************** */

// NOTE: load article from clicking on link
function loadNewArticle(ident) {
$('#textContainer').load('text/articles/' + ident + '.htm');
$('#commentics iframe').hide();
}

/* ************************** */

var wl_protocol = window.location.protocol;
var wl_host = window.location.host;
var wl_path = window.location.pathname;
var wl_address = wl_protocol + '//' + wl_host + wl_path;
var wl_localfolder = wl_host.match('^localhost') ? '/YIMind-dev' : '';
var wl_start = wl_protocol + '//' + wl_host + wl_localfolder;
var ident, refer, url, iFrame;

// NOTE: load comments based on default article in localStorage
//function loadComments() {
var loadComments = function() {
ident = $('#post_id').val();
refer = $('#post_id').attr('title');

iFrame = document.getElementById('cmtx_iframe');

url = wl_start + '/commentics/iframe.php?identifier=' + encodeURIComponent(ident) + '&reference=' + encodeURIComponent(refer) + '&url=' + wl_address + '#' + encodeURIComponent(ident);// + '%3Fb%3Darticles%26f%3D%26s%3D%26d%3D' + encodeURIComponent(ident);

console.log('loading IDENTIFIER: ' + ident + ' | loading REFERENCE: ' + refer);

console.log('URL: ' + url);

iFrame.src = url;

$('#commentics iframe').delay(300).fadeIn(600);
};

function updateComments(ident, refer) {

iFrame = document.getElementById('cmtx_iframe');

console.log('>>> IFRAME from UPDATE: ' + iFrame);

url = wl_start + '/commentics/iframe.php?identifier=' + encodeURIComponent(ident) + '&reference=' + encodeURIComponent(refer) + '&url=' + wl_address + '#' + encodeURIComponent(ident);// + '%3Fb%3Darticles%26f%3D%26s%3D%26d%3D' + encodeURIComponent(ident);

console.log('URL: ' + url);

iFrame.src = url;

$('#commentics iframe').delay(300).fadeIn(600);

console.log('>>> updated (link) IDENTIFIER: ' + ident + ' | updated (link) REFERENCE: ' + refer);

// NOTE: update default article in localStorage
localStorage.setItem('defaultArticle', ident);

}

</script>

Thank you.