Can't display number in a textbox

Hi,
I got the number of records found in a search, and am trying to display it in a textbox, which has placeholder text in it. But I keep getting the error “The text parameter that is passed to the text method cannot be set to a value of 2623. It must be of type string.” Here is the code:

export function page1_viewportEnter(event) {
let count = $w(“#dataset1”).getTotalCount();
console.log(count);
$w(“#txtRecCount”).text = count;
}

If I put a .text after count, I get this error: “The text parameter of “txtRecCount” that is passed to the text method cannot be set to null or undefined.”

export function page1_viewportEnter(event) {
let count = $w(“#dataset1”).getTotalCount();
console.log(count);
$w(“#txtRecCount”).text = count.text;
}
The variable count does have value, and it is output to the console as expected.

I couldn’t find any other way of converting a number to a string. What am I doing wrong?

Thanks!

Hello Ron,

In javascript there is a function that turns numbers to strings called .toString(), it works like this:

var num = 15;
var n = num.toString();
console.log(typeof num, typeof n); //output: number, string

Hopefully this helps,
Majd

Thanks Majd. I tried the toString() function, but got the same error “The text parameter of “txtRecCount” that is passed to the text method cannot be set to null or undefined.”

Ron Carran:

If you provide a published link to the page causing problems then we can check the problem out in the developer tools and give you more informed feedback.

Cheers
Steve

Hi Steve,
Here’s the link. Go to the page Freedom Library/Library Books Available. The number of books found should display just above the list. Please let me know as soon as you look at this because I want to hide that page again. It’s not ready for publication yet.
Thanks,
Ron

Steve,
Sorry, here’s the link: mlkwestchester.org
Ron

Steve,
The page Library Books Available is hidden, but you can get to it in the editor.
Ron

Ron
You would have to make me an admin to see the page in the editor. You can ‘hide’ the published page by clicking the hide page option:


It will allow you to publish the page but not include it on your menu. Then I can try to load the page using
https://www.mlkwestchester.org/freedom-library/library-books-available

Steve,
I really can’t make you an administrator. I’m sorry, but I’ll have to call WIX about the problem. Thanks for offering.
Ron

Hi Ron:

I understand, but you can still publish the page in a hidden mode as I mentioned above which will prevent it from showing up on your menu but bve available for review.

Anyway, hoe you figure this out.

Steve

Hello Ron,

.getTotalItems() returns a promise not an actual value so to get the count:

export function page1_viewportEnter(event) {
$w("#dataset1").getTotalCount()
    .then((count) => {
     console.log(count); 
     $w("#txtRecCount").text = count.toString();
});
}

.then() is used to resolve the promise and get the value returned from that promise.

Read more about promises here.

Best,
Majd

Hi Majd:

No it doesn’t it returns a number :wink:

1 Like

HI Ron:

It looks like you solved your problem as the page is now published. The code you have used is:

export function page1_viewportEnter(event) {
	let count = $w("#dataset1").getTotalCount();
	count = count.toString();
	$w("#txtRecCount").text = "There were " + count + " books found";
}

Just for clarity it is probably better if you don’t rewrite the type of your count variable. It works in this instance but in future code as your skills build you may confuse others trying to read your code. So a suggestion would be to do one of two things either:

export function page1_viewportEnter(event) {
    // Get the total count and convert it to a string for display
    let count = $w("#dataset1").getTotalCount().toString();
    $w("#txtRecCount").text = "There were " + count + " books found";
}

or

export function page1_viewportEnter(event) {
    // Get the totalCount. This is a number which will need converting for display
    let count = $w("#dataset1").getTotalCount();
    // Insert count into display string making sure to convert number to string
    $w("#txtRecCount").text = "There were " + count.toString() + " books found";
 }

Glad you got the problem sorted.
Steve

Thanks Steve,

I’ll make that change. Just one more thing. When I set up a filter, the getTotalCount() doesn’t return the correct count until you run the filter again. I think that’s happening because the dataset hasn’t finished loading completely. I think I need to use onReady(), but I can’t figure out how or where to use it. Any suggestions?

Thanks,
Ron

Hi Ron:

The generally speaking you would put the dataset.onReady function inside the $w.onReady() function.

Think of the onReady as a call back from an asynch function (which is sort of what it is). These are handler functions that get called independently of other functions on the page. Most handlers don’t work well until the page has finished loading which is what the $w.onReady function essentially tells you. This will get called any time there is a page refresh.

So put the dataset onready function call there to be sure that the page is ready to handle any output from the dataset loading. Generally speaking the totalCount will always be the same unless you have added or deleted records or set a filter using setFilter().

// Wait for the page to load
$w.onReady(() => {
   // Wait for the dataset to load
    $w('#dataset').onReady(() => {
        // Do things with the data set data
    });

});

Hope this helps.
Steve

Hi Steve,

Thanks for this. It works fine when the page opens, but I can’t get it to work after I do a search. I put the onReady() in the routine where I do the search. It still takes a second search to show the correct count.

Any more ideas?

Thanks,
Ron

Hi Ron:

OK - so I should have asked before - what are you trying to do and why isn’t it working? The problem is that you have targeted us at a narrow problem - which isn’t your real problem :slight_smile:

You need to understand how data collections work and how these handlers do what they do.

When you set a filter on a dataset it creates a Promise for you. Think of the Promise as an egg timer which goes off at some point when your eggs are cooked. In this instance the Promise takes a function that gets called when the setFilter activity is complete.

This is where you need to do your count updates like this:

$w('#dataset1').setFilter( wixData.filter().contains(srchFld,v))
    .then(() => {
        let count = $w("#dataset1").getTotalCount();
        // Insert count into display string making sure to convert number to string
        $w("#txtRecCount").text = "There were " + count.toString() + " books found";
    })
    .catch((error) => {
        console.log(error);
    });
			

Now having had a look at your code you may want to consider some refactoring to simplify the way you have written your code and make it easier to manage and debug.

  1. Consider using a switch statement in your search function instead of if-then-elseif-elseif-else-endif,
  2. In your conditional statements consider only building up the filters by combining wixData.filters into a common filter variable.
  3. With a completed common filter variable you only need to make a single setFilter call which will mean you only have to perform the getTotalCount in one place.
  4. Since you probably want to set the total count on page load as well as when you perform a search you probably want to create an updateDatasetCount() function or similar to perform the element value update. Then you just call it when you need it, on dataset ready and after a filter event or any event that changes the dataset collection.

So

if (srchFld === "pages" || srchFld === "copies") {
		v = Number(v);
		$w('#dataset1').setFilter( wixData.filter()
			.eq(srchFld,v));
	}
	else if (srchFld === "author") {
		let Auth1 = wixData.filter().contains("author",v);
		let Auth2 = wixData.filter().contains("author2",v);
		let Auth3 = wixData.filter().contains("author3",v);
		let Auth4 = wixData.filter().contains("author4",v);
		let Auth5 = wixData.filter().contains("author5",v);
		let Auth6 = wixData.filter().contains("author6",v);
		$w("#dataset1").setFilter(Auth1.or(Auth2).or(Auth3).or(Auth4).or(Auth5).or(Auth6));
	}
	else if (srchFld === "category") {
		let Cat1 = wixData.filter().contains("cat1",v);
		let Cat2 = wixData.filter().contains("cat2",v);
		let Cat3 = wixData.filter().contains("cat3",v);
		$w("#dataset1").setFilter(Cat1.or(Cat2).or(Cat3));
	}
	else {
		$w('#dataset1').setFilter( wixData.filter()
			.contains(srchFld,v));	
	}
	$w('#dataset1').onReady(() => { 
		let count = $w("#dataset1").getTotalCount().toString();
		$w("#txtRecCount").text = "There were " + count + " books found";
	});	

Can become [typos permitting ;-)]…

export function btnSearch_click(event, $w) {
    let v = $w('#txtSearchTerm').value;
    let srchFld = $w("#ddSearchField").value;
    // Master filter variable
    let masterFilter = null;

    switch(srchFld) {

        case "pages":
        case "copies":
            {
		v = Number(v);
		// Configure the filter 
		masterFilter = wixData.filter()
			.eq(srchFld,v);
	    }
	    break;
        case "author": 
            {
		let Auth1 = wixData.filter().contains("author",v);
		let Auth2 = wixData.filter().contains("author2",v);
		let Auth3 = wixData.filter().contains("author3",v);
		let Auth4 = wixData.filter().contains("author4",v);
		let Auth5 = wixData.filter().contains("author5",v);
		let Auth6 = wixData.filter().contains("author6",v);
		// Configure the filter 
		masterFilter = Auth1
				.or(Auth2)
				.or(Auth3)
				.or(Auth4)
				.or(Auth5)
				.or(Auth6);
	    }
	    break;
        case "category":
	    {
		let Cat1 = wixData.filter().contains("cat1",v);
		let Cat2 = wixData.filter().contains("cat2",v);
		let Cat3 = wixData.filter().contains("cat3",v);
		// Configure the filter 
		masterFilter = Cat1.or(Cat2).or(Cat3);
	    }
	    break;
        default:
	    {
		// Configure the filter 
		masterFilter = wixData.filter()
			.contains(srchFld,v));	
	    }
	    break;
	
    }
    // Execute the filter and set up post processing in the Promise
    $w('#dataset1').setFilter(masterFilter)
    .then(() => { 
	updateDatasetCounter();
    })
    .catch((error) +. {
        console.log(error);
    });
}

// Function to set the value of the number of items in the current dataset
function updateDatasetCounter() {
    let count = $w("#dataset1").getTotalCount().toString();     
    $w("#txtRecCount").text = "There were " + count + " books found";
}		

Hope this helps!

Steve

Hi Steve,
Thanks so much. Works like a charm. I appreciate your help.
Ron