AddThis.com - ScriptManager


I am trying to register a JS file after a postback from an Update Panel. I am trying to get AddThis.com to work after a postback. It works if I set the multiview.activeviewindex equal to 1. However If I go from view 1 to view 2 it does not work.

Here is the server side code for the project.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
'ScriptManager.RegisterStartupScript(Me, Me.GetType, "Test", "http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4d4c6a5604aba88b", False)
ScriptManager.RegisterClientScriptBlock(Me, Me.GetType, "Test1", "http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4d4c6a5604aba88b", True)

MultiView1.ActiveViewIndex = 0
End Sub

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click
    MultiView1.ActiveViewIndex = 1
End Sub

Here is the ASPX code:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="WebApplication6._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4d4c6a5604aba88b"></script>

</head>
<body>
    <form id="form1" runat="server">
    <div>

        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
                    <asp:View ID="View1" runat="server">
                        <asp:Button ID="Button1" runat="server" Text="Button" />
                    </asp:View>
                    <asp:View ID="View2" runat="server">
                    <!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
</div>

<!-- AddThis Button END -->

                    </asp:View>
                </asp:MultiView>
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
    </form>
</body>
</html>

I have tried registering the startup script on the scriptmanager.

Does anyone know how to get this working?

Thanks!

It looks like AddThis works only during window or document load and therefore a little trick is required here. Basically the idea is that you should render AddThis div on first view, than grab it into javascript field and than show inside a div provided in second view.

First of all you have to change your server side code, because you would like to include a whole file, not a script block. You should also do it during PageLoad method only (I'm using c# so that you have to rewrite call below).

ScriptManager.RegisterClientScriptInclude(this, GetType(), "Test", "http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4d4c6a5604aba88b");

You can also just put it in your html header (as you did) and get rid of ScriptManager call which is unnecessary in that case. Than you have to change a content of your multiview a bit

<asp:View ID="View1" runat="server">
    <asp:Button ID="Button1" runat="server" Text="Button" />
    <div style="left:-2000em; position:absolute;">
        <div class="addthis_toolbox addthis_default_style addthis_32x32_style" id="addThis">
            <a class="addthis_button_preferred_1"></a>
            <a class="addthis_button_preferred_2"></a>
            <a class="addthis_button_preferred_3"></a>
            <a class="addthis_button_preferred_4"></a>
            <a class="addthis_button_compact"></a>
        </div>
    </div>
</asp:View>
<asp:View ID="View2" runat="server">                                
    <div id='addHere'></div>
</asp:View>

To do this I wrote a simple javascript module which handle the task.

PageModules = {};
PageModules.AddThis = function ()
{
    var $addThis;

    function takeAddThis()
    {
        setTimeout(function ()
        {
            $addThis = $('#addThis');
            $addThis.remove();
        }, 100);
        Sys.Application.remove_load(takeAddThis);
    }

    function fixAddThis()
    {
        var $addHere = $('#addHere');
        if ($addHere.length)
        {
            $addHere.html($addThis);
        }
    }

    Sys.Application.add_load(fixAddThis);
    Sys.Application.add_load(takeAddThis);
} ();

Notice that PageModules plays only a namespace role to avoid messing up with a global scope. The AddThis module is self-initialized and it is a kind of singleton. Also you would need to reference jQuery or rework the body of inner methods. I have wrapped your AddThis div by additional "hidden" div to not show it to user. add_load method is fired after all scripts are loaded and after all objects are created according to msdn reference

http://msdn.microsoft.com/en-us/library/bb383829.aspx

We need takeAddThis to be fired only once so that I unbind this method after first call. Additional timeout shifts our logic to the end of queue which secure that AddThis logic would be properly executed (i could use $(document).ready from jQuery here as well, however I wanted to stay consistent.