AddThis.com - ScriptManager

Question

AddThis.com - ScriptManager

1.2k views Asked by Jeff At 04 February 2011 at 21:50

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!

Original Q&A

There are 1 answers

**Damian** · Answer 1 · 2011-06-15 15:23:02

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.

TechQA.

AddThis.com - ScriptManager

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in ASP.NET

Related Questions in UPDATEPANEL

Related Questions in SCRIPTMANAGER

Popular Questions

Popular Tags

Trending Questions