Weird behavior with multiple "dropdown with pictures" menu's

[Erikbernhart]

Hi, i seem to be having a problem with the sort of dropdown menu to select an option: when there is a single dropdown box like this:

this still works, but if i add a second one, where i replace all "flp" parts with for instance NEW_trigger etc. the menu's still let me make a selection, bot doesnt output the choice i made.

So it appears they are somehow interfering with eachother,... changing the p id type to smth other than "type" seems to break the code.

Any suggestions? or workarounds?

[Erikbernhart]

And when trying to build a new file with just two dropdown menu's to demonstrate the behavior, it throws me out of calcpad when trying to run it.

[Proektsoftbg]

Hi, @Erikbernhart!

Can you please post the code with the second one that does not work? We do not need all of it, only the basic structure. You can even put some sample text inside options instead of the actual code. Just to see how it (does) not work(s).

[Erikbernhart]

It looks I got kicked out of GitHub or smth for adding a WeTransfer link to the .cpd file.

Bit of a beginner here, but copying code to a comment looked bad, even with ''' at beginning and end. Will try again tmr

Verzonden vanaf Outlook voor Androidhttps://aka.ms/AAb9ysg

---

From: Ned Ganchovski @.> Sent: Friday, November 3, 2023 4:55:01 PM To: Proektsoftbg/Calcpad @.> Cc: Erikb @.>; Mention @.> Subject: Re: [Proektsoftbg/Calcpad] Weird behavior with multiple "dropdown with pictures" menu's (Issue #232)

Hi, @Erikbernharthttps://github.com/Erikbernhart!

Can you please post the code with the second one that does not work? We do not need all of it, only the basic structure. You can even put some sample text instead of the actual code. Jus to see how it (does) not work(s).

— Reply to this email directly, view it on GitHubhttps://github.com/Proektsoftbg/Calcpad/issues/232#issuecomment-1792694611, or unsubscribehttps://github.com/notifications/unsubscribe-auth/A6X52ESODTIVWYD23X6CQTLYCUHVLAVCNFSM6AAAAAA64ORJJ6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOJSGY4TINRRGE. You are receiving this because you were mentioned.Message ID: @.***>

[Erikbernhart]

https://github.com/Erikbernhart/calcpadexamplefile/blob/f692032916d4b98f174c37286429d4607ad16b08/multipledropdownboxes#L1C1-L183C194

hope this link to just added repo works for the example file

[Proektsoftbg]

Hi!

I checked your code and found two problems:

1. The first "type" target on line 37 is in #post section and does not appear initially. Put #show before it.
2. Use different ids and variables for both selections, say "type1" and "type2". Using type for both can create mismatch.

Bellow is the correct code. Now it is working fine. I only removed the "display:none" style from target paragraphs to see how they changes values. You can restore it back. Also, I fixed the alt attributes of images, because I do not have the images and cannot see what changes.

'<style>.w80 input[type=text] {width:60pt;}</style>
"Invoergegevens"
'oppervlak afvoergebied'A = ? {144}m^2
'aantal noodafvoeren'n = ? {1}
'<p>referentieperiode: 
'<input name="target2" type="radio" id="opt1" value="0.0000215"/>
'<label for="opt1">1 jaar</label>
'<input name="target2" type="radio" id="opt2" value="0.0000406"/>
'<label for="opt2">15 jaar</label>
'<input name="target2" type="radio" id="opt2" value="0.00005"/>
'<label for="opt3">50 jaar</label>
'<p id="target2" p class="w80"style="display:none">regenintensiteit'I_r = ? {0.00005}m/s'</p >
#show
#post
I_r
'debiet'Q_hi = A*I_r/n
#show
"rechte vrije overlaat"
' hoogte noodafvoer boven dakrand'h_nd = ? {50}mm
'breedte noodafvoer'b_i = ? {200}mm
'hoogte afvoer'h_i = ? {120}mm
#hide
Q_hi = Q_hi*s/m^3
b_i = b_i/mm
'waterhoogte boven afvoer'D_ndi = (0.7*((Q_hi/b_i))^(2/3))*10^5*mm
'waterhoogte boven dak'd_hw = D_ndi + h_nd
#post
'hoogte capaciteit'h_cap = h_nd + h_i
#if d_hw + 30mm < h_cap
'waterhoogte boven afvoer'D_ndi = (0.7*((Q_hi/b_i))^(2/3))*10^5*mm
'waterhoogte boven dak'd_hw = D_ndi + h_nd
#else 
'waterhoogte boven afvoer'D_ndi = (0.7*((Q_hi/b_i))^(2/3))*10^5*mm
'waterhoogte boven dak'd_hw = D_ndi + h_nd
'<p class ="err">Te weinig hoogte,'d_hw + 30mm' > 'h_cap' </p >
#end if
#show
'<p id="type1" class="flp_base">'type1 = ? {4}'</p>
#pre
'<p><select data-target="type1" class="flp_trigger"> 
'<option value="1">ligger</option>
'<option value="2">ligger met zeeg</option>
'<option value="3">ligger met afschot <dhw</option>
'<option value="4">ligger met  afschot en zeeg</option>
'<option value="5">ligger met afschot >dhw </option>
'<option value="6">ligger met  afschot en zeeg >dhw</option>
'</select></p>
#hide
#if type1 ≡ 1
#show
'<img class="side flp flp_1" src="G:\Mijn Drive\calcpad files\Images\ligger1.jpg" alt="ligger1.jpg" style="width:300pt;">
#post
'ligger met vlak dak'
d = d_hw
#hide
#else if type1 ≡ 2
#show
'<img class="side flp flp_2" src="G:\Mijn Drive\calcpad files\Images\ligger2.jpg" alt="ligger2.jpg" style="width:300pt;">
#show
'<pre class="flp flp_2">'z = ? {30}mm' </pre>
#post
'ligger met zeeg
d = d_hw - 0.8*z
#hide
#else if type1 ≡ 3
#show
'<img class="side flp flp_3" src="G:\Mijn Drive\calcpad files\Images\ligger3.jpg" alt="ligger3.jpg" style="width:300pt;">
#show
'<pre class="flp flp_3">'al = ? {30}mm' </pre>
#post
'ligger met afschot <dhw
d = d_hw - 0.5*al
#hide
#else if type1 ≡ 4
#show
'<img class="side flp flp_4" src="G:\Mijn Drive\calcpad files\Images\ligger4.jpg" alt="ligger4.jpg" style="width:300pt;">
#show
'<pre class="flp flp_4">'z = ? {20}mm''al = ? {180}mm' </pre>
#post
'ligger met afschot en zeeg
d = d_hw - 0.8*z - 0.5*al
#hide
#else if type1 ≡ 5
#show
'<img class="side flp flp_5" src="G:\Mijn Drive\calcpad files\Images\ligger5.jpg" alt="ligger5.jpg" style="width:300pt;">
#show
'<pre class="flp flp_5">'al = ? {0}mm' </pre>
#post
'ligger met afschot >dhw
x = 1 - ((d_hw - 0.8*z)/al)
c = 0.5 - 0.3*x^2 - 0.2*x^3
d = d_hw - c*al
#hide
#else if type1 ≡ 6
#show
'<img class="side flp flp_6" src="G:\Mijn Drive\calcpad files\Images\ligger6.jpg" alt="deflection-beam-force.png" style="width:300pt;">
#show
'<pre class="flp flp_6">'z = ? {20}mm''al = ? {180}mm'</pre>
#post
'ligger met  afschot en zeeg >dhw
x = 1 - ((d_hw - 0.8*z)/al)
c = 0.5 - 0.3*x^2 - 0.2*x^3
d = d_hw - 0.8*z - 0.5*c*al
#hide
#end if
#pre
'<script>if(window.jQuery){$(".flp_trigger").change(function(){$(".flp").hide();$(".flp_"+$(this).val()).show();});$(".flp").hide();$(".flp_"+$(".flp_base input").val()).show();}</script>
I_y = 1
E = 1000
'E-modulus'E_mod = 210000
#show
#post
'volumiek gewicht water:'y_rep = 10kN/m^3
'equivalente vlakbelasting:'P_erep = d*y_rep|kN/m^2
#show
'onderlinge afstand ligger:'hoh = ? {6}m
'overspanning ligger:'l = ? {12}m
#post
'traagheidsmoment'I = I_y
'modelfactor'ym = 1.3
#show
'<p id="type2" class="flip_base">'type2 = ? {1}'</p>
#pre
'<p><select data-target="type2" class="flip_trigger"> 
'<option value="1">ligger zonder inklemmingen</option>
'<option value="2">ligger met verende inklemming</option>
'<option value="3">ligger met volledige inklemming</option>
'<option value="4">ligger met  twee verende inklemmingen</option>
'<option value="5">ligger met  twee volle inklemmingen</option>
'</select></p>
#hide
y_rep = y_rep*m^3/kN
hoh = hoh*1/m
l = l*1/m
#hide
#if type2 ≡ 1
#show
'<img class="side flip flip_1" src="G:\Mijn Drive\calcpad files\Images\gevala.jpg" alt="gevala.jpg" style="width:200pt;">
#post
'ligger zonder inklemmingen'
'kritische stijfheid'EI_cr = y_rep*hoh*l^4/(π^4)*10^9
#hide
#else if type2 ≡ 2
#show
'<img class="side flip flip_2" src="G:\Mijn Drive\calcpad files\Images\gevalb.jpg" alt="gevalb.jpg" style="width:200pt;">
#post
'ligger met verende inklemming'
'kritische stijfheid'EI_cr = 0.7*y_rep*hoh*l^4/(π^4)*10^9
#hide
#else if type2 ≡ 3
#show
'<img class="side flip flip_3" src="G:\Mijn Drive\calcpad files\Images\gevalc.jpg" alt="gevalc.jpg" style="width:200pt;">
#post
'ligger met volledige inklemming'
'kritische stijfheid'EI_cr = 0.4*y_rep*hoh*l^4/(π^4)*10^9
#hide
#else if type2 ≡ 4
#show
'<img class="side flip flip_4" src="G:\Mijn Drive\calcpad files\Images\gevald.jpg" alt="gevald.jpg" style="width:200pt;">
#post
'ligger met  twee verende inklemmingen'
'kritische stijfheid'EI_cr = 0.4*y_rep*hoh*l^4/(π^4)*10^9
#hide
#else if type2 ≡ 5
#show
'<img class="side flip flip_5" src="G:\Mijn Drive\calcpad files\Images\gevale.jpg" alt="gevale.jpg" style="width:200pt;">
#post
'ligger met  twee volle inklemmingen
'kritische stijfheid'EI_cr = 0.2*y_rep*hoh*l^4/(π^4)*10^9
#hide
#end if
#post
#if (E*I)/(ym*EI_cr) < 1
n = 1
#else 
n = (E*I)/(ym*EI_cr)
#end if
#hide
hoh = hoh*m
#post
'vergrotingsfactor'N = n/(n - 1)
'te rekenen lijnlast regenwater'Q_repw = N*P_erep*hoh
#pre
'<script>if(window.jQuery){$(".flip_trigger").change(function(){$(".flip").hide();$(".flip_"+$(this).val()).show();});$(".flip").hide();$(".flip_"+$(".flip_base input").val()).show();}</script>

[Erikbernhart]

HI Ned, thanks you very much, this works. I think I did try changing the ids and variables, but without success. the #post #show part on line 37 i totally missed.

thanks again.

kind regards Erik.