Read more/read less button with rich text from database

Ask the community
,
1

Hi! Recently I tried to make an expandable textbox with formatted text but found out that the whole text inherits the first used style in that box, for example if only the first word was bold, then the whole text will be bold.

Is there any way that I can connect text areas on page with rich text from database and to create read more/read less button? I managed to create working button but the second time I press it, the text returns to original form, as if it never was connected to rich text from database.

Thanks in advance,
Nemanja

2

[@Nemanja Nišavić] Can you share the code that isn’t working and the page url?

3

let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text

// For full API documentation, including code examples, visit Velo API Reference - Wix.com

$w.onReady( function () {
// how many characters to include in the shortened version
const shortTextLength = 0;
// read the full text and store it in the fullText variable
fullText = $w(“#text58”).text;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortText = fullText.substr(0, shortTextLength) + “…”;
// set the contents of the text element to be the short text
$w(“#text58”).text = shortText;

//TODO: write your page related code here…

});

export function button1_click(event) {
// check the contents of the text element
if ($w(“#text58”).text === shortText) {
// if currently displaying short text, display the full text
$w(“#text58”).text = fullText;
$w(“#button1”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text58”).text = shortText;
$w(“#button1”).label = “Show more”;
}
//Add your code for this event here:
}

This is the code for Show more/Show less button.

933×440 67.5 KB

1021×254 36.9 KB

4

@nnishavic Rich text is enabled using the html property of the text element.

If you are storing rich text in the data collection then it will be an html string. So you should assign it to $w(‘#text58’).html - not text :wink:

Check out the API:

Cheers
Steve

5

Steve, thank you for your response. I tried it that way also, but the result is still the same. I have no idea what could be the problem.

6

Hi Nemanja

What is the URL of your page?

Steve

7

https://advancedgwt.wixsite.com/mysite/software-all-1

I tried to use rich text from database only on the first section, titled Module 1. In preview mode, the connected rich text is displayed but not in expandable form, while here the box which is connected to rich text from database is shown but with placeholder text instead.

I’m sorry if I’m being annoying but I’m new at this and I’m trying to learn something new, but it seems as if this isn’t for me

8

@nnishavic Hi there. OK the problem you have is that you are trying to retain the value of your text element before the dataset you are loading it from is ready. What this means is that when you read the .html or .text property you will get the placeholder text.

Whet you need to do is wait until the dataset is ready and then capture the text like this:

$w.onReady(function () {
    // Wait for the dataset to load!!
    $w('#dataset1').onReady(() => {
        // how many characters to include in the shortened version
        const shortTextLength = 0;
        // read the full text and store it in the fullText variable
        fullText = $w("#text112").html;
        // grab the number of characters defined in shortTextLength and store them in the shortText variable
        shortText = fullText.substr(0, shortTextLength);
        // set the contents of the text element to be the short text
        $w("#text112").html = shortText;
    });

});

Now you will also need to consider what to set your shortTextLength to because your text is rich. So just using a random length may end up with you truncating a style tag setting which will result in more unexpected text being displayed. One way to do this might be to retrieve the text version of the rich text into your shortText variable, truncate that, and then apply some rich text styling to the resulting truncated text…

let startStyle = '<p style="font-size:16px"><span style="color:#676767"><span style="font-size:16px"><span style="font-family:arial,ｍｓ ｐゴシック,ms pgothic,돋움,dotum,helvetica,sans-serif">';

let endStyle = '</span></span></span></p>';

shortText = startStyle+ $w("#text112").text.substring(0, 25)+'...'+endStyle;
// set the contents of the text element to be the short text
$w("#text112").html = shortText;

Now you will also see that I have chosen to use substring and NOT substr. MDN states that substr is a legacy function and suggests that you use substring instead.


Cheers
Steve