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 think it should be:
let currentItemData = $w('#dynamicDataset').getCurrentItem()
let fullText = currentItemData['textField']
Thanks Daniel - I tried your suggestion but the result is the same.
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.
Can you copy the full code please.
Is the above contained inside the on ready as follows:
$w(‘#datasetFeatured’).onReady(() => { //in here })
Have you double checked that “textField” is exactly the Field Key in the database (including case).
Here is the code;
// For full API documentation, including code examples, visit Velo API Reference - Wix.com
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.
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…
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.
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
Lol, Heath H-M replied at same time! Anyway you should be sorted now
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
Great! Thanks for that.
I wasn’t sure what currentItemData['textField '] did, so didn’t appreciate why ‘textField’ needed to be replaced with ‘longDescription’. And why it is longDescription and not #longDescription!
Also, I’m curious - the tutorial “creating a show-more link” has example code
// set the fullText variable to be the text from the collection
fullText = $w('#dynamicDataset').getCurrentItem().textField;
so why use
// set the fullText variable to be the text from the collection
let currentItemData = $w('#dynamicDataset').getCurrentItem()
fullText = currentItemData['longDescription']
?
Thanks again for solving my problem
@deleteduser Thanks for the links to the database info. It’s useful when “translating” between Wix and SQL.
@adrianwalby They are essentially both the same, but I tend to use the array method since it avoids lots of method calls to the database (assuming that you might need to read other fields than just ‘longDescription’). So then you can just have one call and all the fields are read to the variable, and then can be accessed ‘statically’ at will further down the line without further dynamic calls to the database…so just best practice maybe? (although I don’t actually know how the interpreter/compiler implements in practice, but certainly I remember using C or PHP and mySQL in the past it was always better/faster/lower-resource to try and make as few DB calls as possible)…
It depends on how you setup the dataset in the editor, what filters did you apply, number of results to display etc. Also make sure it isn’t linked to an empty collection or isn’t write only etc. In the editor just click on the dataset icon then settings to mod all of this.
Check that out first, but then also good idea to clear any filters etc in code before getting the count (since this method only returns the number of FILTERED rows in the dataset, as opposed to the TOTAL number of rows in the collection…) You can clear out filters by running an empty query or a filter that would be true for every row. Look at:
https://www.wix.com/corvid/reference/wix-dataset.Dataset.html#getTotalCount
To clear filters you could do something like this:
$w("#dynamicDataset").setFilter(wixData.filter())
Have a look at https://www.wix.com/corvid/forum/community-discussion/resetting-table-upon-empty-search-query
P.S. Use google to search this forum as well as the corvid API as you’ll probably find that most things unless really complex or unusual have been answered before somewhere (just can take a little digging!)