sIFR not working with prototype AJAX page load.

Question

I have a website with two pages. A and B. When you click on a link in page A, it will uses the Prototype Ajax.Updater() to load the link page (page B) into a div on the page (Page A).

When page B loads into page A, the sIFR replacements are not working and the tag inner text is not even showing.

I have tried doing a sIFR.redraw() when the page has loaded into the div, with no success.

When i view page B in the browser by itself, it works perfectly.

Is it possible to insert HTML into a DIV tag on a page using AJAX and have the sIFR display properly?

Answer 1

I would imagine that you probably need to re-initialise sIFR within the onComplete callback of Ajax.Updater

Answer 2

This is the way I ended up doing this

new Ajax.Updater('content', url, {
  onComplete:function(){
     sIFR.replace(font, {
        selector: '#content h2'
     });
  }
});

Answer 3

You could put this snippet in your html code:

<script type="text/javascript">
    function pageLoad(sender, args) {
       sIFR.replace(font, { selector: '#content h2' });
    }
</script>

It will run the sIFR replacements each time the page reloads. This is on normal PostBack and Ajax postbacks. Make sure you have included a ScriptManager instance on your page.

Answer 4

mathijsuitmegen: Your solution worked perfectly on an application I'm using where the ScriptManager was already in use.

Infact, The function was simply slotted into my sifr-config.js file and worked perfectly meaning my HTML wasn't cluttered.

I thank you, Sir!