onclick event on BUTTON element in domplate

108 views
Skip to first unread message

Prasanna Bale

unread,
Mar 30, 2012, 4:09:49 PM3/30/12
to fir...@googlegroups.com
Hi,

I have written a template for preferences to set for my tool. It does have a FORM, RADIO buttons, CHECKBOX and the BUTTON.

1. The button has to save the changes made to the form and update the form. but some how onclick event is not fired when I click on the button. I did pasted my template on domplate Runner to debug, but I see the same behavior.
2. Also Can I trigger any onclick/onchange event when the radio button is selected ?

Please find my template below. 


var ruleset_data = {
  ruleset_description: "rule description",
  ruleset_author: "rule author"
}
var template = domplate(
{
    tag:
        DIV({class:'rulesets'},
           DIV({class: 'ai-ruleset'}, "Select Ruleset"),         
         TABLE({class: 'ai-ruleset-table', cellspacing: 0, cellpadding: 0, border:1},
           TBODY(
             TR(TD({onclick:"highlight", id: "IITAA20", _index: '0'}, "IITAA2.0 (0.5 beta)")),
             TR(TD({onclick:"highlight", id: "WCAG20T", _index: '1'}, "WCAG2.0 ARIA Transitional (0.5 beta)")),
             TR(TD({onclick:"highlight", id: "WCAG20S", _index: '2'}, "WCAG2.0 ARIA Strict (0.5 beta)"))
           )//end TBODY
         ),
         BR(),
         DIV('Description'),
         TEXTAREA({class: 'textar'},
           "$ruleset_data.ruleset_description"
         ),
         BR(),
         DIV('Author'),
         TEXTAREA({class: 'textara'}, "$ruleset_data.ruleset_author"),
         BR(),
         H3('Select 2.0 Success Criteria Level'),
         
         FORM({},
           INPUT({ type: 'radio'}, "Level A, AA and AAA (highest level of accessibility)"),
           BR(),
           INPUT({ type: 'radio'}, "Level A and AA"),
           BR(),
           INPUT({ type: 'radio'}, "Level A (lowest level of accessibility)")
         ),
         BR(),
         H3('Other Options'),
         FORM({},
           INPUT({class: 'formElements', type: 'checkbox'}, "Enable checking for broken links"),
           BR(),
           INPUT({class: 'formElements', type: 'checkbox'}, "Show 'Accessibility' menu in main menu")
         ),
         BR(),
         BUTTON({class: 'button', checked: "true", type: "checkbox", onclick: "$onRulesetChange"},
                   "Save Changes"
         ),
         BUTTON({class: 'button', checked: "true", type: "checkbox", onclick: "$onRulesetChange"},
                   "Restore Default Preferences"
         )
         ),

  
  onRulesetChange : function(event){
     alert("alert");
  }

    
});


And I am using Firebug1.10.a5

Thanks,
Prasanna 




Jan Honza Odvarko

unread,
Mar 31, 2012, 3:17:08 AM3/31/12
to Firebug

add #1: There is a bug in domplate it generates <br></br> for the BR()
tag.
If you remove BRs from your template it'll work
If you file a bug I'll fix it.

add #2: Use shared click handler for your radio buttons

var template = domplate(
{
tag:
DIV({class:'rulesets', onclick:"$onClick"},
INPUT({ type:'radio'}, "Level A, AA and AAA (highest level
of accessibility)"),
INPUT({ type:'radio'}, "Level A and AA"),
INPUT({ type:'radio'}, "Level A (lowest level of
accessibility)"),
INPUT({ type:'radio'}, "Level A"),
),

onClick: function(event)
{
// event.target is clicked radio button
console.log("onclick " + event.target);
}
});

Honza
>            *INPUT*({ type: '*radio*'}, "Level A, AA and AAA (highest level
> of accessibility)"),
>            BR(),
>            *INPUT*({ type: '*radio*'}, "Level A and AA"),
>            BR(),
>            *INPUT*({ type: '*radio*'}, "Level A (lowest level of
> accessibility)")
>          ),
>          BR(),
>          H3('Other Options'),
>          FORM({},
>            INPUT({class: 'formElements', type: 'checkbox'}, "Enable
> checking for broken links"),
>            BR(),
>            INPUT({class: 'formElements', type: 'checkbox'}, "Show
> 'Accessibility' menu in main menu")
>          ),
>          BR(),
>          *BUTTON*({class: 'button', checked: "true", type: "checkbox", *
> onclick*: "$onRulesetChange"},
>                    "Save Changes"
>          ),
>          *BUTTON*({class: 'button', checked: "true", type: "checkbox", *
> onclick*: "$onRulesetChange"},

Prasanna Bale

unread,
Apr 2, 2012, 5:16:08 PM4/2/12
to fir...@googlegroups.com
Hello Honza,

I posted the bug onto the firebug forums. Here is the link to the issue track .

http://code.google.com/p/fbug/issues/detail?id=5360&thanks=5360&ts=1333401287

Thanks,
Prasanna


--
You received this message because you are subscribed to the Google
Groups "Firebug" group.
To post to this group, send email to fir...@googlegroups.com
To unsubscribe from this group, send email to
firebug+u...@googlegroups.com
For more options, visit this group at
https://groups.google.com/forum/#!forum/firebug



--
Prasu



Jan Honza Odvarko

unread,
Apr 3, 2012, 2:29:39 AM4/3/12
to Firebug
On Apr 2, 11:16 pm, Prasanna Bale <bale.prasa...@gmail.com> wrote:
> Hello Honza,
>
> I posted the bug onto the firebug forums. Here is the link to the issue
> track .
>
> http://code.google.com/p/fbug/issues/detail?id=5360&thanks=5360&ts=13...

Thanks, patch committed, will be in Firebug 1.10a7
Honza

Prasanna Bale

unread,
Apr 3, 2012, 11:48:51 AM4/3/12
to fir...@googlegroups.com
Thank you Honza. 

I really appreciate the quick responses & fixing the issues.

Thanks,
Prasanna


--
You received this message because you are subscribed to the Google
Groups "Firebug" group.
To post to this group, send email to fir...@googlegroups.com
To unsubscribe from this group, send email to
firebug+u...@googlegroups.com
For more options, visit this group at
https://groups.google.com/forum/#!forum/firebug



--
Prasu



Reply all
Reply to author
Forward
0 new messages