Hello,
I am currently trying to set up a comments box within my dynamic page which has content pulled in from a data set. I’ve tried following guides here on wix code forum and tutorials online but non seem to work. I’ve previously set up comments that pull in data from a comments dataset sheet but these were not unique to each page. The site is https://www.checkpointplanet.com/
I’m planning to have a simple name/ comments and submit setup and need line of code to make this work…
Thanks.
Hi Craig
If you are asking how you can determine which comments to pull from your comments data collection, assuming you have saved comments from the page concerned, then you simply need use the $w(‘#dataset1’).getCurrentItem() function to load the item that is being used for the dynamic page bindings.
When you save a comment, if you use a reference field to record the page that the comment is posted on, then you should be able to use the same reference field to read all saved comments.
The reference documentation you should take a look at is here:
So for example. Let’s say a comment is left on a dynamic page. The text input field is called ‘commentText’ and the submit button used to save the comment is called ‘submitCommentButton’. Additionally lets say we have a comments data collection with two columns:
-
comments
-
blogPageReference
Our dataset might look like this:
Now your page code would save the comment like this:
import wixData from 'wix-data';
let dynamicPageItem; // Used to store the item for this page
$w.onReady(() => {
// Disable the comment button until the page has loaded its dataset
$w('#submitCommentButton').disable();
$w('#dataset1').onReady(() => {
// Get the item for use later
dynamicPageItem = $w('#dataset1').getCurrentItem();
// Data set loaded so we can enable the comments button
$w('#submitCommentButton').enable();
});
// Register the comment button click handler
$w('#submitCommentButton').onClick(saveComment);
});
function saveComment(event) {
// Make sure we have a comment and save it
if ($w('#commentText').value.length > 0) {
// We have a comment create a comment record and save it in our dataset
let newCommentRecord = {
'comments': $w('#commentText').value,
'blogPageReference': dynamicPageItem
}
wixData.save('Comments', newCommentRecord)
.then((savedRecord) => {
// Do something to show the record save succeeded
})
.catch((error) => {
console.log(error.stack);
});
}
}
Now if you want to get all of the comments for this page from the Comments data collection you can use the wix-data.queryReference() function and simply do something like this:
wixData.queryReference('Comments', dynamicPageItem, 'blogPageReference')
.then((results) => {
let comments = results;
// Do something with the retrieved items
comments.forEach((commentRecord) => {
console.log(commentRecord.comments);
});
});
This should get you started.
Steve
Hi Steve,
Thanks so much for getting back to me about this.
I have go so far but I still cant seem to separate different comments that are unique to different pages.
I’m seeing a reference in the comments dataset but I’m still getting all comments on all pages. As well as this I’m getting duplicate comments. One with the name text and one without name text.
@craigharbour Hey there. OK On your Travel Blog (Title) page you have a couple of errors.
One is that you haven’t told the page that you are using the wixData API.
If you look at my post above you will see this line at the top of the page:
import wixData from 'wix-data';
If you don’t do this the script fails when it tries to execute any wixData. call.
Also I have noticed that you are calling onReady() a lot!..
$w.onReady(function () {
$w("#dynamicDataset").onReady(() => {
if ($w("#dynamicDataset").getCurrentItem().paragraph1) {
$w("#paragraph1").expand();
}
});
});
$w.onReady(function () {
$w("#dynamicDataset").onReady(() => {
if ($w("#dynamicDataset").getCurrentItem().image1) {
$w("#image1").expand();
}
});
});
$w.onReady(function () {
$w("#dynamicDataset").onReady(() => {
if ($w("#dynamicDataset").getCurrentItem().gallery1) {
$w("#gallery1").expand();
}
});
});
$w.onReady(function () {
$w("#dynamicDataset").onReady(() => {
if ($w("#dynamicDataset").getCurrentItem().paragraph2) {
$w("#paragraph2").expand();
}
});
});
This is unnecessary and could lead to unintended consequences. The onReady() call registers a handler that is called when the page loads. You only need one of them. So using the snippet above you would consolidate your code like this…
$w.onReady(function () {
$w("#dynamicDataset").onReady(() => {
let currentItem = $w("#dynamicDataset").getCurrentItem();
if (currentItem.paragraph1) {
$w("#paragraph1").expand();
}
if (currentItem.image1) {
$w("#image1").expand();
}
if (currentItem.gallery1) {
$w("#gallery1").expand();
}
if (currentItem.paragraph2) {
$w("#paragraph2").expand();
}
});
});
In addition you have this call:
wixData.queryReference('Comments', dynamicPageItem, 'blogPageReference')...
in the main body of the page code. when this is called (almost immediately) the dynamicPageItem is most likely to be null. You don’t set it until the dataset1 has loaded…
I would call the queryReference function in the dataset onReady call after you have set the dynamicPageItem.
@stevendc Assume I know little about coding as i’m still struggling to get my head around this. I’ve amended it slightly but I seem to be getting duplicate comments now.
I really appreciate your help.
@craigharbour you are getting duplicate comments across dynamic pages, or in just the intended page?
If it’s on the same page, it might be useful to have a separate dataset to read comments with an .onReady() calll and add a debounceTimer to your submit button!
let debounceTimer;
export function submitButton_click(event) {
$w('#commentBox').value = null;
if (debounceTimer);{
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
$w("#commentsRead").refresh()
}, 200);
}
Hope this helps!
@craigharbour Hi Craig:
One of the challenges you have is dealing with datasets as they can be manipulated either from code OR by the bindings added in the editor. You use both methods so it causes some problems.
When you bind a dataset to the elements and buttons in the editor they will read and write data at the same time (more or less) as the code on the page. The problem is it is hard to know when the changes are made.
Let me try to summarise the problems that needed to be corrected:
- On your page things are complicated a little more by having duplicate datasets in addition to having the data bindings on the page.
The Travel-Blog Item dataset is pre-filtered because it is set up by the dynamic page. The dataset named Travel-Blog dataset is not pre filtered so when you access its current item you will get the first item in the dataset not the one related to the dynamic page. So the code you have that sets the dynamicPageItem used to set ‘blogPageReference’ will assign the wrong data, or no data, to Comments data collection in your $w(‘#submitCommentButton’).
To fix this move the dynamicPageItem declaration to the top of the page and assign it from the dynamicDataset in the $w(‘#dynamicDataset’).onReady() function.
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
import wixData from 'wix-data';
let dynamicPageItem; // Used to store the item for this page
$w.onReady(function () {
// Disable the comment button until the page has loaded its dataset
$w('#submitCommentButton').disable();
$w('#text204').hide();
$w("#dynamicDataset").onReady(() => {
let currentItem = $w("#dynamicDataset").getCurrentItem();
dynamicPageItem = currentItem;
...
- You still have two $w.onReady() functions in the code. It is best to consolidate the second onReady() function handler code into the first one…
DELETE: $w.onReady(() => {
// Disable the comment button until the page has loaded its dataset
***** Move this code to the first onReady (see above)
vvvv
MOVE $w('#submitCommentButton').disable();
DELETE: $w('#dataset1').onReady(() => {
// Get the item for use later
***** Move this code to the dynamicDataset onReady (see above)
|||| use the dynamicDataset getCurrentItem
vvvv vvvv
REPLACE: dynamicPageItem = $w('#dataset1').getCurrentItem();
// Data set loaded so we can enable the comments button
***** Move this code to end of the dynamicDataset onReady
vvvv
MOVE: $w('#submitCommentButton').enable();
DELETE: });
***** Move this code to end of the first $w.onReady function
vvvv
// Register the comment button click handler
MOVE: $w('#submitCommentButton').onClick(saveComment);
DELETE: });
- You are adding two records to the comments dataset because you have used data binding to connect the submitButton to the comments dataset. So when you click the submit button the data bindings will save the bound records AND so will the onClick handler function.
You need to include the reference for the dynamic page in the comment record which means you need to do this in code.
So you need to remove the dataset bindings from the Editor elements ($w(#nameText’), $w(#commentText’), $w(#submitCommentButton’)). We can also use the comments dataset $w(‘#dataset3’) to add comment records so we modify the onClick function to look like this:
function saveComment(event) {
// Make sure we have a comment and save it
if ($w('#commentText').value.length > 0) {
// We have a comment create a comment record and
// save it in our dataset
let newCommentRecord = {
'title': $w('#nameText').value, // Include the name
'comments': $w('#commentText').value,
'blogPageReference': dynamicPageItem
}
// Add new fields to the comments dataset
$w('#dataset3').setFieldValues(newCommentRecord);
$w('#dataset3').save()
.then((savedRecord) => {
// Refresh the dataset that is used by the comment
// repeater
$w('#dataset4').refresh();
})
.catch((error) => {
console.log(error.stack);
});
}
}
- Lastly the comment repeater dataset needs to be filtered by the blogPageReference equal to the current page item. This can be done in the repeater dataset which is currently $w(‘#dataset4’);
With this change the refresh() call in the above saveComment code can be used to force the repeater to update when the Comments dataset $w(‘#dataset3’) is updates with save().
This should (did ) sort it.
Steve
@stevendc I can’t thank enough for all your help with this. I have been learning as I’ve been going and so you can imagine I was a bit overwhelmed wheb I tried to do this all from scratch.
The comments feature now works perfectly and I am slowly understanding all the steps you made to achieve this. Now I see what you have done it does make sense.
Thank you again for spending your time on this, I really appreciate it and look forward to have the new site feature working for a long time.
Craig
hi i am having some issue with my comment box. i manage to make it work on the editor section, but when i try in it on the publish website, the comment box disappear and nothing is shown.
can someone please help me ^^’
Have you synchronized your sandbox data to the live site?
i did
@lostsoulscomic66 what is the page url?
@stevendc found my error. i created a form database not a content database. which is why i couldn’t see it publish but see it in editor mode. silly me ^^’