I have been trying to add a 'show more' button to a text box within a repeater group that's connected to a dataset. All fields display fine without the javascript (it picks up the data element and displays it within the text box) but with the javascript added it displays nothing for the element.
Inspecting the element within the script reveals the code "getCurrentItem().textField" appears to return a null value even though without the code it has content that is displayed on the screen.
It seems that the code ;
fullText = $w('#dynamicDataset').getCurrentItem().textField;
isn't passing back a value.
Any ideas why it isn't returning the value of the textfield that displays without the "$w("#dynamicDataset").onReady(function)" code added?
I've noticed that when I run the above code, the $w('#dynamicDataset').getTotalCount() value is 0. It should be the number of rows in the dataset, shouldn't it? It appears to retrieve nothing through the $w('#dynamicDataset') object, yet the data displays correctly if the javascript is removed
Lol, Heath H-M replied at same time! Anyway you should be sorted now
I see the problem, it is because the field key should be 'longDescription' and not 'textField' as you wrote! If you just swap out 'textField' for 'longDescription' it will work
Screenshot below. The dataset textfield field key appears OK to me.
I'm at a loss why the
fullText = $w('#dynamicDataset').getCurrentItem().textField;
command returns null and there are no error messages. If I replace the command with
fullText = "test text"
the test text displays on the page as it should.
So it has to be something to do with the getCurrentItem method.
Ok, so I've just tested your code...and for me, it worked! They only thing that I can think of is that 'textField' does not match the Field Key...I know you say you've checked, but just to be double sure...
(Sorry to be patronising, but just to be sure...)
On the left hand side SITE STRUCTURE expand DATABASE, then click on the actual database in question. The on the column LONG DESCRIPTION click the 3 dots to the right of it, then MANAGE FIELD. The Field Key should be shown there.
I can't think of anything else! As I say it worked for me, I created a dataset called #dynamicDataset which pulls from a database with field Long Description (with field key 'textField') put in some sample text data, and used your code above, and the console shows the sample text data...
Here is the code;
// For full API documentation, including code examples, visit https://wix.to/94BuAAs let fullText; // variable to hold the full text let shortText; // variable to hold the short version of the text $w.onReady(function () { //TODO: write your page related code here... $w("#dynamicDataset").onReady(function () { // how many characters to include in the shortened version const shortTextLength = 10; // set the fullText variable to be the text from the collection let currentItemData = $w('#dynamicDataset').getCurrentItem() let testfullText = currentItemData['textField'] console.log("hello - data item is;") console.log(testfullText) console.log(" - end of data item.") // debug code //fullText = "debug = text inserted by code" // end debug code // if no text to display, collapse the text element and the button if (!fullText) { $w('#longDescription').collapse(); $w('#button1').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('#longDescription').text = fullText; $w('#button1').collapse(); } else { // create the shortened version of the text and display it in the text element shortText = fullText.substr(0, shortTextLength) + "..."; $w('#longDescription').text = shortText; } } }); }); export function button1_dblClick(event) { // display the full text // check the contents of the text element if ($w("#longDescription").text === shortText) { // if currently displaying short text, display the full text $w("#longDescription").text = fullText; $w("#button1").label = "Show less"; } else { // if currently displaying full text, display the short text $w("#longDescription").text = shortText; $w("#button1").label = "Show more"; } //Add your code for this event here: }
I have checked the field names and haven't spotted anything wrong. See screenshot of the text box and button below;
Thanks for your help.
The code:
let currentItemData = $w('#dynamicDataset').getCurrentItem() let fullText = currentItemData['textField'] console.log(fullText)
results in the value of fullText showing on the console as "undefined" which, I assume, means getCurrentItem is returning a null value.
Thanks Daniel - I tried your suggestion but the result is the same.
I think it should be:
let currentItemData = $w('#dynamicDataset').getCurrentItem() let fullText = currentItemData['textField']