update sIFR text after ajax update.

Question

I am using sIFR version 3 in my site. I am updating the text in a div with id 'points' from an ajax request. I want to update the text and apply the sIFR to that div after the text is changed.

Please suggest a solution.

here is my update code

new Ajax.Request('score.php', {
    onSuccess: function(response) {
       $('points').update(response.responseText);
    }
    });

Answer 1

Step one, replace sIFR's parseSelector with jQuery which works for Prototype as well when you write the following instead:

var parseSelector = $$; // prototypes querySelectorAll implementation.

This gives you more selector power in sIFR, because it's default implementation is rather limited.

Read 'sIFR3 documentation' how to use sIFR3.

You should now have all jQuery selectors available in your sIFR instance, so next is to be creative.

new Ajax.Request('score.php', {
    onSuccess: function(response) {
        $('points').update(response.responseText);
        sIFR.replace({src:'yourFont.swf'}, { 
            selector: '#points h1' // any selector you want.
        });
    }
});

Answer 2

Something like this:

new Ajax.Request('score.php', {
    onSuccess: function(response) {
       $('points').update(response.responseText);
       sIFR.replace(font, {
          selector: '#points'
       });
    }
});

Answer 3

Thanks for your comments . I figured out a way to use sIFR after Ajax update.

new Ajax.Request('score.php', {
        onSuccess: function(response) {
           $('points').update(response.responseText);
           $('points').removeClassName('sIFR-replaced');
           applySIFR();
        }
        });

the applySIFR(); function apply all the sIFR replacements once again.I think removing the class 'sIFR-replaced' from the element is the key to make it work.