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.

Do you have to use pie.js and not the .htc file? – Randy Hall Nov 01 '12 at 15:06 — Randy Hall, Nov 01 '12 at 15:06

score 1 · Answer 1 · answered Nov 01 '12 at 15:04

1

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.

answered Nov 01 '12 at 15:04

Shimu

1,137
11
25

I use wicket so ajax call came with wicket, I cannot add that on callback :| – RulerNature Nov 01 '12 at 15:57
I don't now wicket, but as long as the data comes from a server, there is always an JS callback to handle the data properly. At least if you set up a JS function to do so... . – Shimu Nov 01 '12 at 16:00
I would like to use something like onreadystatechange when ajax call is made :) – RulerNature Nov 01 '12 at 16:22

score 1 · Answer 2 · edited May 23 '17 at 12:18

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/

@burebistaruler's answer might give a better solution to your problem — Joram van den Boezem, Nov 07 '12 at 17:50

score 1 · Accepted Answer · answered Nov 07 '12 at 11:43

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);
    });
}

OnSubtreeModified add my function

3 Answers3