AddThis.com - ScriptManager

I am trying to register a JS file after postback from the update panel. I am trying to get AddThis.com to work after the postback. It works if I set multiview.activeviewindex to 1. However, if I switch from view 1 to view 2, this will 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 tried registering the start of the script in the scriptmanager.

Does anyone know how to do this?

Thanks!

+4
source share
1 answer

It seems that AddThis only works when loading a window or document, and therefore a little trick is required here. Basically, the idea is that you should render the AddThis div in the first view, than capture it in the javascript field, and not show inside the div presented in the second view.

First of all, you need to change the server-side code, because you would like to include the whole file, not the script block. You should also do this only during the PageLoad method (I use C #, so you need to rewrite the 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 (like you) and get rid of the ScriptManager call, which is not needed in this case. Than you need to slightly change the contents of your multivisor

 <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> 

For this, I wrote a simple javascript module that processes 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); } (); 

Note that PageModules only plays the role of a namespace to avoid messy work with the global scope. The AddThis module is self-initialized and is a kind of singleton. You will also need to reference jQuery or rework the body of internal methods. I wrapped your addThis div with an additional "hidden" div so as not to show it to the user. The add_load method is launched after loading all scripts and after creating all objects according to the msdn link

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

We need to takeAddThis to run only once to cancel this method after the first call. An additional timeout shifts our logic to the end of the queue, which ensures the correct implementation of this AddThis logic (I could also use $ (document) .ready from jQuery here, however I wanted to stay consistent.

+3
source

Source: https://habr.com/ru/post/1338502/


All Articles