Jinntec
fx-items errors when additional textnodes are present for label
Example: /demo/fx-control.html
<fx-control ref="selected" update-event="input">
<fx-items ref="instance('list')?*" class="widget">
<template>
<span class="fx-checkbox">
<input id="check" name="option" type="checkbox" value="{value}"/>
--> <label>foo {name}</label>
</span>
</template>
</fx-items>
</fx-control>
The additional 'foo' textnode will cause an error when evaluating the expression. Also lets the code run into a syntax error and throws browser out-of-state - need to completely reload in a private window to make Chrome behave again.
Hi, Could this also be the cause of an issue I’m having with radio button controls when placed in groups on the same page?
I’m trying to implement a multiple choice questionnaire form with single selection choice questions. I’m not able to put a variable in the name attribute if the input tag in order to provide a unique name for a group of controls.
Hi Jake, could you provide an example page that shows your problem? Thanks
Jake Bourne @.***> schrieb am Sa., 14. Sept. 2024, 10:03:
Hi, Could this also be the cause of an issue I’m having with radio button controls when placed in groups on the same page?
I’m trying to implement a multiple choice questionnaire form with single selection choice questions. I’m not able to put a variable in the name attribute if the input tag in order to provide a unique name for a group of controls.
— Reply to this email directly, view it on GitHub https://github.com/Jinntec/Fore/issues/246#issuecomment-2350902460, or unsubscribe https://github.com/notifications/unsubscribe-auth/AADWFW5S6IYAGTM7ZSX7SPLZWPUVFAVCNFSM6AAAAABDNJAMZGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGNJQHEYDENBWGA . You are receiving this because you authored the thread.Message ID: @.***>
Hi Joern,
Absolutely - here is the page which show the problem with radio button groups. I have replaced the 'data' instance with some example inline data.
As the fx-control is being shown within a fx-repeat, I am trying to set the @name attribute of the input[type='radio'] to something like "q{$qno}" so it will be be unique across iterations of each question.
Thanks, Jake.
<fx-fore>
<fx-model>
<fx-instance>
<data>
<answers>
<answer qno="1"></answer>
<answer qno="2"></answer>
<answer qno="3"></answer>
<answer qno="4"></answer>
<answer qno="5"></answer>
</answers>
</data>
</fx-instance>
<fx-instance id="quiz-data">
<quiz id="quiz-1">
<questions>
<question qno="1">
<text>Question 1.)</text>
<options>
<item id="A">Option A</item>
<item id="B">Option B</item>
<item id="C">Option C</item>
<item id="D">Option D</item>
</options>
<answer>B</answer>
</question>
<question qno="2">
<text>Question 2.)</text>
<options>
<item id="A">Option A</item>
<item id="B">Option B</item>
<item id="C">Option C</item>
<item id="D">Option D</item>
</options>
<answer>B</answer>
</question>
</questions>
</quiz>
</fx-instance>
<fx-instance id="response">
<data></data>
</fx-instance>
<fx-submission id="quiz_submission" url="#echo" method="post" replace="instance" instance="response">
</fx-submission>
</fx-model>
<h1>Quiz</h1>
<fx-repeat ref="//answer">
<template>
<fx-var name="qno" value="@qno"></fx-var>
<fx-var name="qtext" value="instance('quiz-data')//question[@qno=$qno]//text"></fx-var>
<h2>Question {$qno}</h2>
<fx-control ref="." update-event="change">
<label>{$qtext}</label>
<div>
<fx-items ref="instance('quiz-data')//question[@qno=$qno]//item" class="widget">
<template>
<span class="fx-radio">
<input id="radio" name="option" type="radio" value="{@id}">
<label>{.}</label>
</span>
</template>
</fx-items>
</div>
</fx-control>
</template>
</fx-repeat>
<fx-trigger>
<button>Send</button>
<fx-send submission="quiz_submission"></fx-send>
</fx-trigger>
</fx-fore>
@coloneltravis investigated a bit on it - surprisingly leaving the @name away completely gives better results. At least now the value is being set correctly for the respective answer. However this reveals another issue - you need to click at least twice to select a radio. This has to do with repeat index setting i guess - the index should be set immetiately.
However the way you tried should actually work but isn't. We'll dive a bit deeper tomorrow to fix this.
@JoernT yes removing @name allows each radio button to be toggled as though they were checkboxes in a multiple-select list. However, typical radio list behaviour should be single-select.
Thank you for your time looking at this issue and hope it helps the project.
Hey,
We looked into this, there are multiple issues going on:
- A click in a repeat requires updates: the
indexfunction might be used somewhere, so template expressions (and all XPath for that matter) is invalidated and should be reran. - This causes a rerender of the
fx-items, even of the inputs. None of the existing items seem to be reused. This can be improved. - The inputs rerender, but the template expressions in it are not correctly updated. This can be fixed in Fore: just do the same as in a repeat: after the refresh is done, scan for new template expressions
- These inputs do not have a name set yet: it is still in a template: the name attribute is still
{$qno}when the 'checked' is set. Which causes all other radiobuttons with the same name to be cleared. Since they all have the same name, all is cleared. - the name cannot directly be updated because the input is not in the DOM yet.
Even with the template expressions updated after a refresh and setting checked in a timeout (after the name attribute is up to date) the main issue is the full refresh when a repeat is clicked.
I'm going to try to minimize that update: maybe make a property on all Fore elements of which XPaths they use. For a click in a repeat we know we can ignore all refreshing of all Fore elements that do nothing with the index function. This is a great performance improvement and prevents these kinds of bugs.
Thanks so much for bringing this up!
