How to toggle/add/remove select box attribute(s) existance with checkbox

#1

is it some how possible to
have a checkbox widget
add and remove an attribute (or two)
from a select widget ?

specifically “multiple” and "size=‘8’ " attributes

TiddlyWiki Bare-Bones User Interface
#2

multiple is tricky, since it’s presence already activates it. So we are not able to say “multiple=no”. It will still be present and “no” will be ignored by the browser according to HTML specification.

So in this case you will need to create a conditional shortcut, depending on the checkbox state and use 2 different select widget calls.

One with and the other one without those parameters. Since the conditional shortcut is easy to read, it should be OK to maintain a bit of code duplication.

#3

thanks! :100: %
…

almost as trick as dual char terms!..

*yes* this was exactly the link i was looking for thanks++
but frustratingly and two-character terms
eg “IF”
are apparently to short to search!

#4

I suspect the minimum search length was set to 3 characters a) to improve performance by cutting down on the number of refreshes needed when you start typing into the search bar, and b) because a single character or two-character combination will return so many matches as to be largely useless. However, this is a hidden setting that you can change either in your own wikis or (temporarily) on TW-com, so you can set a lower minimum if you prefer.

Alternately, as a quick work-around, add a space before or after your two-character string.

#5

Yes – IF<space> does the trick :wink: but it returns 700+ matches :confused:

So %if has only 6 matches – Still imo nobody guesses that one right.

What have been your other search terms. … So we may include them in the text to make it easier to find next time.

1 Like
#6

I think @pmario’s answer is simpler in this case, but note that you can also do this with the Genesis Widget

<$checkbox field="multi" checked="multiple"> Multi?</$checkbox>

<$checkbox field="size" checked="size"> Size = 8?</$checkbox>

<$genesis 
  $type="$select" 
  field="planets" 
  $names={{{ [{!!multi}] [{!!size}] +[join[ ]] }}}  
  $values={{{ [{!!multi}] [{!!size}then[8]] +[join[ ]] }}}
>
  <option>Mercury</option>
  <option>Venus</option>
  <option>Earth</option>
  <option>Mars</option>
  <option>Jupiter</option>
  <option>Saturn</option>
  <option>Uranus</option>
  <option>Neptune</option>
  <option>Pluto</option>
</$genesis>
(Hey, Pluto was considered a planet when I was a kid, and I see no reason for the downgrade!)

The important thing here is ensuring that the $names and $values are aligned.

You can try this by downloading the following and dragging the resulting file onto any tiddlywiki: Dynamic drop-down with Genesis Widget.json (767 Bytes)

5 Likes
Pluto the underdog
#7

That’s a nice one. I did not think about it. I personally think the $genesis widget is super abstract. But for this usecase it actually makes sense. Not sure if I remember it :wink:

1 Like
#8

I’ve never actually used it, although I’ve read the docs. I’ve always handled these situations the same way you suggested. But when I saw the question, I said, “I wonder if…” It turned out to be relatively easy. But I don’t like having to carefully align $names and $values. That makes it much more uncomfortable than I would prefer. But so too is the duplication in conditional rendering. I would love to see us come up with an approach that works more simply. But I don’t have any good ideas at the moment.

#9

:beers:

i was just reading them https://tiddlywiki.com/#GenesisWidget
wandering if that was the situation

$names="one two" $values="1 2"

unusual but i guess if it works it works !

all very strange from a .appendNode() perspective
…&tbh i think about crocford's supplant() a lot these days
if any one recalls it

#10

@wiki_user

I expect to share a great solution shortly, watch this space

Yes, this fact has always made me curious, I wonder how could it be different?

  • Perhaps we could start a new topic on this?

This is also similar when trying to make an effective version of the <details> tag as the open parameter behaves like the multiple attribute.

  • I actualy think of this as a HTML weakness, and wonder if we could introduce a feature to TiddlyWiki to over come it, such that the parser know how to parametise it. eg open=nul just don’t render open, or some other method.
  • I have I belive solved this, I will share back soon.
#11

I have created an Action widget to toggle an attribute on any html using any CSS Selector.

So answering the original question can be achived as follows;

<$button actions=`<$action-toggleattr selector=".myselect" attr="multiple"/>`>🔄 Single/multiple selection</$button><br>
<$select class="myselect" tiddler=<<qualify 'select-demo'>> default='HelloThere'>
<$list filter='[all[shadows+tiddlers]tags[]sort[title]]'>
<option value=<<currentTiddler>>><$view field='title'/></option>
</$list>
</$select>

With the instalation of the new action widget “action-toggleattr” I have developed, and tested

  • I declare with with the assistence of ChatGPT

It also works for the details widget;

<$button class="tc-btn-invisible" tag=div>
<$action-toggleattr selector=".wrapping" attr="open"/>

<details class="wrapping" open><summary>More</summary>Showing even more...</details>
</$button>

In both cases you just code the html with the default you want. The toggle reverses it.

I am hoping to improve this before I release it.

Ask if you want the current working version to play with

JS widgets or macros to set content in HTML