I would like to add jQuery UI button to all my input submits.
$('input:submit').button();
That works great for normal buttons but it doesn't work for buttons I create dynamically.
Anybody know how to do this?
-
2How are you creating the elements?Nick Craver– Nick Craver2010-09-14 23:21:27 +00:00Commented Sep 14, 2010 at 23:21
-
jQuery.tmpl I know I could initialize button on the elements when I add the template but was thinking of a more global approach.Pickels– Pickels2010-09-14 23:26:55 +00:00Commented Sep 14, 2010 at 23:26
Add a comment
|
2 Answers
The easiest thing would to add this line when creating the new buttons.
$(this).button();
for example
(jQuery to create button) function(){
$(this).button();
}
I believe you could also just call this again but it might be slower.
$('input:submit').button();
EDIT: after looking at what jQuery.tmpl is you might be able to do something like
$("#sometmpl")
.render( arrayOfDataObjects ) // Returns multiple LIs with data filled in
.appendTo("ul" function(){
$("#sometmpl input:submit").button();
)};
but don't hold me to it.
OR take a look at the jquery ui css and just add the classes you need to the submit buttons. Hover may not work though
class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only"
2 Comments
Pickels
Was afraid that I had to do it this way. Since I am using jQuery.tmpl I am checking if there is maybe a OnTemplateCreated event or something I could subscribe too. Thanks for your answer.
Pickels
Thanks for your edit Walter. That's what I was doing but since I have a lot of forms that get build from templates I didn't want to have to initialize the button each time. It seems there is no easy 'Do this to these elements and all future elements' way to solve this.
Thought it would be useful to show how I fixed it in my application. It's a concise version of my real code that I didn't test and there might be typos.
var app = (function(){
var general = (function(){
function init(){
init_jquery_ui();
};
function init_jquery_ui(){
//init stuff
$('body').bind('added_tmpl', function(){
//init stuff
});
};
function add_tmpl(tmpl_node, append_to_node, data){
tmpl_node.tmpl(data).appendTo(append_to_node);
append_to_node.trigger('added_tmpl');
};
return{
init: init,
add_tmpl: add_tmpl
};
})();
var somepage = (function(){
function init(){
load_some_form();
};
function load_some_form(){
var data = { name: 'hello', age: 15 };
general.add_tmpl($('#some_form_tmpl'), $('#some_form'), data);
};
return{
init: init
};
})();
return{
general: general,
somepage: somepage
};
})();
app.general.init();
if(page=='somepage'){
app.somepage.init();
};