HelpBallon.js in ASP.NET UpdatePanel

Question

Does someone know, how to get the HelpBallon.js (http://www.beauscott.com/2008/03/02/helpballoonjs-version-20/) work in an ASP.NET UpdatePanel? After a postback all images are lost.

Answer 1

I do not know this plugin, but the general idea is that you need to make update of the javascript after the Panel is loaded.

I check the code of HeloBallon plugin and see that is capture the onload, and run the registerClassLinks function.

To run it again when the panel is updated you can use this javascript code on your page.

var prm = Sys.WebForms.PageRequestManager.getInstance();    
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);

function InitializeRequest(sender, args) {      
}

function EndRequest(sender, args) {
    HelpBalloon.registerClassLinks();
}

Now you need to check if this works, or you need to make some small changes, but this is the idea.

Answer 2

Here is my working solution:

Define a container where to place the image:

<span id="myContainer"></span>

and then add the following code:

 <script type="text/javascript">
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_pageLoaded(Page_Loaded);

    function Page_Loaded(sender, args) {
      var hb1 = new HelpBalloon({ returnElement: true, title: 'title', content: 'text.' });
      $get('myContainer').appendChild(hb1.icon);
    }

    }
  </script>