Opened 8 years ago

Closed 8 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 ben hockey)

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 8 years ago by ben hockey

Description: modified (diff)

comment:2 Changed 8 years ago by ben hockey

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 your else branch is currently showing, then when the user clicks on it, it becomes checked. the next time you show the radio button in the else 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.

comment:3 Changed 8 years ago by dimps

Thank you much for the clarification - I will take that approach..

comment:4 Changed 8 years ago by ben hockey

Resolution: invalid
Status: newclosed

i'll close this ticket and you can reopen if you happen to find a bug

Note: See TracTickets for help on using tickets.