HI guys, I want to display two images depending on the boolean being ticked or not. My code shows no errors but just won't work. It is an accommodation site and I wish to show grey icons if no amenities or black if there is. The field is a boolean in my databse and called pool.
ANy ideas?
import wixData from 'wix-data';
$w.onReady( () => {
$w("#dataset1").onReady( () => {
let items = $w("#dataset1").getCurrentItem().pool;
if (items==='true'){
$w("#shape4").show();
}
else{
$w("#shape5").show();
}
} );
});
Site/page is http://tailoredwebdesign.wixsite.com/book-the-best/queensland
Appreciate your help as I need to get this sorted asap.
Cheers
Okay, I've taken a look at your site and now I have the full picture.
You are using a repeater to show your data, which is great, but complicates things a bit. Basically, because you are connecting data to the repeater using a dataset and you want to modify how the repeated items look using code you need a bit of a hack.
This is what you need to do (let me know if you want information about why you need to do all of this):
Add a text element to your repeated items.
Connect the text element to the pool field using the dataset already on the page.
Change the ID of the text element you just added to hasPool using the Properties panel.
Hide the text element you just added using the Properties panel.
Change your page code to the following:
$w.onReady(() => { $w("#dataset1").onReady(() => { $w("#repeater1").forEachItem(($w, itemData, index) => { if($w("#hasPool").text === 'true') { $w("#shape4").show(); } else { $w("#shape5").show(); } }); }); });
How to write two conditions in if statement.
my code is like
let minsize = 3000000;
let maxsize = 10000000;
let files = $w("#uploadButton1").value;
let fileSize = files[0].size;
if(fileSize >= minsize && fileSize < maxsize){
console.log("Valid Size");
} else{
console.log('Invalid Size')
}
It's not worked for me.
And please let me know how to throw an error in else condition and how to display it.
Please help.
Thanks.
Try this:
if (Series) { $w('#button8').expand() } else { $w('#button8').collapse() } });
What if I have to check if the field is empty. I want to collapse a button if the field connected to that button is empty. I have used this code
const Series = $w("#dynamicDataset").getCurrentItem().series; if (Series.null) { $w('#button8').collapse() } else { $w('#button8').expand() } });
It gives an error " TypeError: Cannot read property 'null' of undefined "
I have Two fields
meetingDate scopeOfWorks
1/5/2018 Site Meeting
I just simply want to display a new item.appSlot with a date included, if the user enters a date.
if (item.meetingDate !== null) {
item.appSlot = item.meetingDate + " " + item.scopeOfWorks;
} else {
item.appSlot = item.scopeOfWorks;
}
return item;
When there is no date - I want to see just the scopeOfWorks information
but it doesn't work.
I keep getting this ...
undefined Site Meeting
Thanks, but i'm still lost on how to check if the current user(_id) has filled out the Name field, any ideas?
I know it's a basic question but i can't find how to do it.
Indeed, Hannah, you shouldn't need the text field anymore. At the time of the original posting there was a bug that we were working around by adding a text field. It is my understanding that the bug was fixed quite some time ago.
Hi Sam,
I was wondering if you could explain why the text element needs to be added to a repeater item in order to show/hide an element?
I was able to apply the code explained above to my situation & worked perfectly but just to help with my understanding :)
Thank you so much in advance :)
Thanks so much Sam, that is perfect.
A few issues:
You're using the wrong dataset
Make sure pool is lowercase
I would suggest show and hiding (otherwise you have to be careful as to which image is on top)
So:
$w.onReady(() => { $w("#dynamicDataset").onReady(() => { let items = $w("#dynamicDataset").getCurrentItem().pool; if (items === true) { $w("#shape4").show(); $w("#shape5").hide(); } else { $w("#shape5").show(); $w("#shape4").hide(); } }); });
Thanks Sam. No repeater this time just a single item dynamic page. How would this be coded?
My page is dynamic page 'Queensland (Title)' on tailoredwebdesign.wixsite.com/book-the-best
TIA!
The fact that the page is a dynamic page shouldn't make any difference as long as its set up the same (i.e. repeater connected to dataset).
Your first snippet is good, but the forEachItem function needs to be called on the repeater and not on the dataset.
Sam could you please help?
Ok that looks like a great idea. I'll try in the morning. Thankyou for your help!!
Worked perfectly. THANK YOU!
So last problem now, how do I also do this on my dynamic page?
I tried this, but no luck:
$w.onReady(() => {
$w("#dynamicDataset").onReady(() => {
$w("#dynamicDataset").forEachItem(($w, itemData, index) => {
if($w("#hasPool").text === 'true') {
$w("#shape4").show();
} else {
$w("#shape5").show();
}
});
});
});
and this:
import wixData from 'wix-data';
$w.onReady( () => {
$w("#dynamicDataset").onReady( () => {
let items = $w("#dynamicDataset").getCurrentItem().pool;
if (items===true){
$w("#shape4").show();
}
else{
$w("#shape5").show();
}
} );
});
I feel like this shouldn't be this hard. Is there any other solutions?
hmm I have no idea how to do that and reading the articles looks out of my depth, is it possible for you to inspect my site to see if there is some easy fix?
My browser errors:
[blocked] The page at https://tailoredwebdesign.wixsite.com/book-the-best/queensland was not allowed to display insecure content from http://2fc90f32-5282-4409-a358-bd23f71ffe63.static.pub.wix-code.com/static/v2/0e6a521e-5c8c-4808-b6b4-92a501a09105/2fc90f32-5282-4409-a358-bd23f71ffe63/pages/xai88.js.map?empty-if-missing=true&exclude=wix-&module-name=xai88.
https://static.parastorage.com/services/santa/1.2635.12/node_modules/mobx/lib/lib/mobx.umd.min.js.mapFailed to load resource: the server responded with a status of 404 (HTTP/2.0 404)
You definitely need to use the key, so pool is the right way to go.
If it's still not working for you, you'll need to do some more serious debugging. You can start by adding some console.log() lines to your code to see if the information you're retrieving from the dataset is what you expect. If you're a little more familiar with debugging, you can use your browser's debugger to get even more information.
ok, I just wasn't sure as it is named Pool but key is pool.
However it still doesn't work?
Yes and no. Looks like you changed pool to Pool which will affect what happens.
Thanks Sam! SO:
import wixData from 'wix-data';
$w.onReady( () => {
$w("#dataset1").onReady( () => {
let items = $w("#dataset1").getCurrentItem().Pool;
if (items===true){
$w("#shape4").show();
}
else{
$w("#shape5").show();
}
} );
});
? That not working either.....