Hello everybody ! I’m currently designing a website which displays hundreds of releases from a record music company. So I’m using dynamic pages and databases in order to create each page, which usually contains an image, a video, an audio, and of course, a text that describes the album, vinyl or whatever.
My problem is the following : on some texts (not all of them), the read more button doesn’t work + I get a little part of the code at the end of my text (see below)
The thing is, I already got help from a Corvid master to connect my database with the rich text editor and the read more button (https://www.wix.com/corvid/forum/community-discussion/connect-read-more-button-with-database-to-expand-collapse-rich-text?origin=member_posts_page) but it only works good, not well…
Any thoughts on that ?? I would really appreciate, this is like the last issue that I can’t resolve
Explain what you are trying to do, what works, and what doesn’t. Also, add any code in a code block as stated in the Forum Guidelines.
Are you setting the html property or the text property of the text field? It seems as if you are using the text property for rich text.
Thank you for your answer Yisrael ! Hopefully I can explain myself clearly.
For each release the record label has, I’d like to have the cover of the album / LP / whatever, and a short description just next to it. So I set up a database in which I uploaded all the informations. The thing is, I’d also like, when the text is too long, a read more button that allows the visitor to see the whole text, and then a “read less” button if he wants to retract it.
I couldn’t connect properly the button to the text at first as, I believe, I was using rich text in my database, so I could make different paragraphs, edit the fonts etc. So this is the code I now use, which works only in some cases, and in some others doesn’t.
let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text
$w.onReady( function () {
$w( “#dynamicDataset” ).onReady( function () {
// how many characters to include in the shortened version
const shortTextLength = 2000 ;
// set the fullText variable to be the text from the collection
fullText = $w( ‘#dynamicDataset’ ).getCurrentItem().biographie;
// if no text to display, collapse the text element and the button
if (!fullText) {
$w( ‘#text3’ ).collapse();
$w( ‘#button27’ ).collapse();
} else {
// if the text has fewer or the same number of characters as shortTextLength characters, display it as is and collapse the “Show More” button
if (fullText.length <= shortTextLength) {
$w( ‘#text3’ ).html = fullText;
$w( ‘#button27’ ).collapse();
} else {
// create the shortened version of the text and display it in the text element
shortText = fullText.substr( 0 , shortTextLength) + “…” ;
$w( ‘#text3’ ).html = shortText;
}
}
});
});
export function button27_click_1(event) {
// check the contents of the text element
if ($w( “#text3” ).html === shortText) {
// if currently displaying short text, display the full text
$w( “#text3” ).html = fullText;
$w( “#button27” ).label = “READ LESS” ;
} else {
// if currently displaying full text, display the short text
$w( “#text3” ).html = shortText;
$w( “#button27” ).label = “READ MORE” ;
}
}
Do you have any idea what the problem might be ?
The more/less is problematic when using rich text because the truncation of text doesn’t properly take into account the HTML tags and markups. You should be using plain text, or you could use two sets of text in the database - short and long.
But it is not possible to make separate paragraphs with plain text in a database right ?
Nevermind ! I just saw that it is now possible ! Thank you very much for your help !!
