0

I am new to stack overflow and this is my first question. Pardon me for any mistakes. This question is more generic but i tried to search for an answer but could not find it.

Say i have a page and i am using jquery ui button() widget for all the button. What happens is i have a specific class defined for all the buttons on my page. So i can just specify $('.myButtonClass').button(); but whenever i render partial views which has button again i have to do the same thing in the partial views. Is there any way i can globally specify a transition for button or any element for that matter.

Here is a sample Fiddle which adds buttons on click. But the added buttons are not transitions as button widgets(I do not want to use clone).

http://jsfiddle.net/wjxn8/

$('.clsTest').button().click(function(){
    $(this).after('<input type="button" value="Added" class="clsTest"/>');
});

Is this possible without:- 1) Adding the css classes for a button widget manually for all the buttons created. 2) Tracking DOM Changes using Javascript and perform transitions for all the button elements.

Thanks for your help!!!

James Montagne
  • 77,516
  • 14
  • 110
  • 130
user2253634
  • 76
  • 7
  • 2
    if you add a button, you need to invoke the `button` plugin on it. you could technically find out when the DOM has changed or even poll for new elements with the `clsTest` class, but if you are already writing code to add new buttons, you might as well invoke the `button` plugin there. – lbstr Apr 13 '13 at 04:07
  • Thanks. But thats what i want to try to avoid. I should be able to freely define buttons in my htmls across applicaiton and not worry about using the instantiation in multiple places. SO that if i want to go with some other button widget later on change would be of less impact. – user2253634 Apr 13 '13 at 04:12
  • you could have a function called `initButtons` that you call every time you add new buttons. Then, if you decide to use a different button widget later on, you would just have to update one thing: `initButtons`. – lbstr Apr 13 '13 at 04:17
  • But then i would have to write initbuttons for every view. I would like to have this invoked automatically whnever a new button is added to the DOM. – user2253634 Apr 13 '13 at 04:19
  • can you clarify how new buttons are added to the DOM? Is it just like your fiddle, or is that just an example? – lbstr Apr 13 '13 at 04:20
  • It would be a part of a partial view (of many) that is rendered on to the page via ajax call. So right now i need to do something to have these buttons transitioned to jquery widget. Fiddle is just an example to replicate similar problem but not my real case. There is no way i could do it like the way we can bind any event for future using $.live... – user2253634 Apr 13 '13 at 04:25
  • not really... I'll put an example of polling as an answer and you can decide if you like it or not... – lbstr Apr 13 '13 at 04:28

2 Answers2

3

Since you were looking for something else, why not trigger a custom event when you load partials or whatever:

$('.clsTest').button().click(function(){
    $(this).after('<input type="button" value="Added" class="clsTest"/>').trigger('addButtonUI');
});
$(document).bind('addButtonUI',function(){
    $('.clsTest').button();
});

http://jsfiddle.net/wJXN8/3/

If you trigger your event and have the document listening for it, then you can do whatever you would like. I could have put in there the ability to add more buttons as well, but this should get the point across.

What you are asking for, some event when a button is added.... you would need to come up with that yourself and trigger it when a button is added. There is this: How to detect new element creation in jQuery? which talks about a specific event that is triggered when new elements are added to the DOM. Haven't tested it, and it looks like it may not work on IE.

Community
  • 1
  • 1
Tim Withers
  • 12,072
  • 5
  • 43
  • 67
1

I'm not a huge fan of this, but you could poll for new buttons. Check out my fork of your fiddle (that sounds funny):

http://jsfiddle.net/lbstr/Hq97H/

Using your example, this would look like:

setInterval(function(){
    $('.clsTest').not('.ui-button').button();
}, 1000);

As I said, I'm not a huge fan of this. I understand the desire for something like $.live here, but I still think its better to initialize your new content when you add it. If you are making an ajax call for new content, just initialize it when you add it to the DOM.

My silly polling code and $.live (which is now deprecated) might be convenient, but they perform terribly. Just my two cents. You know your code better than I do!

lbstr
  • 2,822
  • 18
  • 29
  • @lsbtr Thanks a lot. But this could be a performance drainer... Let me check if i can get any more suggestions. – user2253634 Apr 13 '13 at 04:35
  • ya, I definitely agree. The best option performance-wise, is to initialize the plugin right when you add new content. – lbstr Apr 13 '13 at 04:44