Opened 10 years ago
Closed 10 years ago
#13284 closed defect (invalid)
dojox.dtl.DomTemplated Rendering does not update the DOM node attribute
Reported by: | dimps | Owned by: | Neil Roberts |
---|---|---|---|
Priority: | high | Milestone: | tbd |
Component: | DojoX DTL | Version: | 1.5 |
Keywords: | Cc: | ||
Blocked By: | Blocking: |
Description (last modified by )
I have created a custom Widget extending dijit._Widget, dojox.dtl._DomTemplated. I use this to dynamically create a form with standard HTML parameters, based on a user's choice of radio buttons I hide/unhide further form controls. The issue is that when I update the radio button more than once the selection does not get updated in the DOM - albeit the corresponding HTML(i.e. my template) shows the radio button to be checked. Actions I defined on this radio click do take place correctly - but the DOM is not in sync with the current selection (or the html). My dojox.dtl template uses the following code to update the "checked" attribute of the radio button based on the value in the "content" variable.
<!--{% ifequal rptCtrl.ctrlType "RDO" %}--> <!--{% ifequal valueSelectedOption rptCtrl.ctrlVal %}--> <input class="radio" "navparentid="{{ rptCtrl.ctrlNavParentId }}" id="{{ rptCtrl.ctrlId }}" type="radio" dojoAttachEvent="onclick: _onClick" value="{{ rptCtrl.ctrlVal }}" name="{{ rptCtrl.ctrlName }}" ie6name="{{ rptCtrl.ctrlName }}" checked="true"> <!--{% else %}--> <input class="radio" navparentid="{{ rptCtrl.ctrlNavParentId }}" id="{{ rptCtrl.ctrlId }}" type="radio" dojoAttachEvent="onclick: _onClick" value="{{ rptCtrl.ctrlVal }}" name="{{ rptCtrl.ctrlName }}" ie6name="{{ rptCtrl.ctrlName }}"> <!--{% endifequal %}--> <!--{% endifequal %}-->
Within the widget onClick of the radio button I set the value of the context variable - hide/unhide controls and then call render.
Could you let me know of a fix for this.
Change History (4)
comment:1 Changed 10 years ago by
Description: | modified (diff) |
---|
comment:2 Changed 10 years ago by
comment:3 Changed 10 years ago by
Thank you much for the clarification - I will take that approach..
comment:4 Changed 10 years ago by
Resolution: | → invalid |
---|---|
Status: | new → closed |
i'll close this ticket and you can reopen if you happen to find a bug
i think this is the issue... you can consider that dtl will basically cache the state of the actual DOM element you use in both branches of your
if
statement. if the radio button from yourelse
branch is currently showing, then when the user clicks on it, it becomes checked. the next time you show the radio button in theelse
branch it will be in that same state - it will be checked. this is because even though your original markup shows that the radio button is not checked, it became checked via user interaction and then there is no tag to tell dtl that it should do something to change it to be not be checked. i find it best to consider that the current state of the element is cached - not the original markup. the only way that the state is changed is if a dtl tag exists to apply logic to change the state.here's the rub, there's no way to specify in markup that a radio button needs to be unchecked (apart from not specifying the checked attribute) and so then there's no way that i know of to add a dtl tag to change the checked state. i would probably add some code to your onclick handler that appropriately updates the
checked
property of the radio button. you may find that you can also just use a single radio button without the need for the inner if block since you'll apply that logic in the onclick handler.