OnSubtreeModified add my function

Question

I use pie.js (http://css3pie.com/) a library that allows me to have css3 on ie6+. I apply pie.js on document.ready :

 $(document).ready(function(){
        if (window.PIE) {
            $('.vexClass, #vexId').each(function(){
                PIE.attach(this);
            });
        }

    });

My problem is when the dom was modified the elements for which I have apply pie.js are not rendering well so I must load my function that apply pie.js to my elements when the dom is modified and only for section that was modified using OnSubtreeModified or another technique ... For example I have a panel that is displayed when dom was loaded, in that panel I have a button that is expanding another panel with buttons and other elements for which I want to apply pie.js, so for main panel all elements for which I have applied pie.js are rendered ok but the elements from expanded panel, pie.js is not applied :| So how can I inject that pie.js when dom is modified for expanded panel?

Thank's.

Answer 1

If you are using wicket the only way to do that is through Wicket.Ajax.registerPostCallHandler Add this in your project, every time when a ajax request is done your pie will be applied.

window.document.ready = function() {
    Wicket.Ajax.registerPostCallHandler(pieStarter);
}
function pieStarter() {

    if (window.PIE) {
        go();
    }
}
function go() {
    $(''.vexClass, #vexId'').each(function() {
        PIE.attach(this);
    });
}

Answer 2

Do you get your data from an Ajax call? If so, you need to add the pie in the callback. There is no possibility (at least afaik) to add anything on something that you don't have at a given time.
If you need to add the pie in the callback, you should make an separate function for that. You can give a dom node to the function and it checks for every child node if pie is applied, and if not it does so.

Answer 3

You can't use the DOMSubtreeModified event since older versions of IE - which you are targeting - don't support this. You can, however, work around this by using this answer Detect changes in the DOM together with this script:

$(document).ready(function () {

    function applyPIE() {
        if (window.PIE) {
            $('.vexClass, #vexId').not('[data-pie=attached]').each(function(){
                PIE.attach(this);
                $(this).attr('data-pie', 'attached');
            });
        }
    }

    onDomChange(function(){ 
        alert('document updated, applying PIE now');
        applyPIE();
    });

    $('#link').click(function () {           
        $('body').append('<h4>added content</h4>');
    });

    applyPIE();

});

It creates a local function applyPIE() which is called on document ready and every time the DOM changes - filtering out already processed elements. You may want to expand the .vexClass, #vexId set of selectors to match your needs.

JSFiddle: http://jsfiddle.net/hongaar/y3FaM/1/