Viktor
Posts: 0
Joined: Mon Jun 01, 2015 7:48 am

Show/Hide element

I know this goes beyond appery support, but would appreciate the help from anyone!
I have a list from database which shows numbers, but if there is no number I want that element hidden.

The Javascript should be something like: (But obviously wrong since it doesn't work)

if(value === null) {
Apperyio('label_tel').hide();
} else {
return "Tel: " + value;
}

Pavel Zarudniy
Posts: 0
Joined: Mon Jul 06, 2015 8:56 am

Show/Hide element

Hi Viktor,
Please try to use:
code
if(typeof(value) == 'undefined'){
// hide
...
/code

Jack Bua
Posts: 0
Joined: Sun Jun 28, 2015 10:16 pm

Show/Hide element

Another way just to check for a value is:
if (value)
{CODE IF VALUE HAS SOMETHING
} else { CODE IF VALUE IS FALSEY
}
CODE THAT WILL RUN REGARDLESS.

Looks like you might have this code in a mapping. If so, may be easier to instead check for no value, like this:

if(!value) {
Apperyio('label_tel').hide();
}
return "Tel: " + value;

The mapping will always pass "Tel: " + value, but the label will be hidden if value is falsey.

Blair Cox
Posts: 0
Joined: Thu Jun 04, 2015 2:29 pm

Show/Hide element

So when I try this, it just hides it all the time. Changing to 'null' throws an error on the page.

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

Show/Hide element

Hello Blair,

Could you please clarify do you have any errors in a browser console when you use 'undefined'? Also please detail have you tried Jack's approach?

Blair Cox
Posts: 0
Joined: Thu Jun 04, 2015 2:29 pm

Show/Hide element

I'm not a programmer, I don't know how to write the proper code for Jack's example. I understand what needs to happen in terms of defining the logic, I just don't know the syntax.

I need:

If ('market_available')
{= "null"} then show nothing / be blank
else
Apperyio('market_available').hide();

-----

if(!value) {
Apperyio('market_available').hide();
}
return "Tel: " + value;

Jack Bua
Posts: 0
Joined: Sun Jun 28, 2015 10:16 pm

Show/Hide element

I'll help you get the syntax Blair, but I need a little more info.

What kind of page component is "market available"?

Is it obtaining it's value from a service? If so, when does it get that value?

Is there anything happening on the page that will change its value?

For the most part, when I show/hide something, I need to place the code in two places; once when the page is loaded or on the mapping(in order to initially set show or hide) and again whenever the user does something to change it's value (like on value change of a select menu).

If the component is getting its value by a mapping (like from a local storage or service) then I use this in its mapping:

if(!value){
Apperyio("market_available").hide();
}
return value;

That code is checking to see if the value being passed in the mapping is falsey, which null is considered. If so, it hides your page component. If not, it does nothing to the page component, and regardless, it passes its value through the mapping.

If you place the code on page load, then it would be like this:

var market = Apperyio("market_available").val();
if(market){
Apperyio("market_available").show();
} else {
Apperyio("market_available").hide();
}

That code is a bit unnecessary for the page load, but the good news is that is the same code that you can place on a value change event to show/hide it as the page is used.
It is basically checking to see if your component has a value, and if so, shows the component, but if not, hides it. It does this by grabbing the component's value and assigning that to a variable called "market", then doing its check on that variable.

That should get you there. If not, the answer to those questions I asked above will help, and so would a screenshot of the console log showing the error you get.

Blair Cox
Posts: 0
Joined: Thu Jun 04, 2015 2:29 pm

Show/Hide element

Well don't you just rock!! Thank you Jack!!! And thank you for the missing link - I was not adding the code to the individual mapped elements. I was adding a javascript to the mapping steps one level above. Cheers!

Jack Bua
Posts: 0
Joined: Sun Jun 28, 2015 10:16 pm

Show/Hide element

You can do that too, if you need to.

Lets say you have a storage item called whatever and in it is "foo" and "bar".
value.foo will return what you would expect it will if you are mapping from the parent of foo, AKA the "one level above". value.bar in the same JS mapping will return what it should too. Very handy if you want foo and bar to be put into a label, like:
return value.foo+ " " + value.bar;
I use that all the time for my lists

In that case, the mapping would go from the parent or the $ to both the label and the list "parent" as well.

http://puu.sh/kjiAO/cb186aa47b.png

I know that is not relevant for this, but it may help in the future.

Oh, and you are very welcome. Let me know if I can further help you.

Blair Cox
Posts: 0
Joined: Thu Jun 04, 2015 2:29 pm

Show/Hide element

Hi Jack - you saved the day for sure, most appreciated. Would you have a moment to check out another issue that has stopped me from releasing our app? My new comment to Yurii at the bottom of this thread...

https://getsatisfaction.com/apperyio/...

Return to “Issues”