AddThis.com - ScriptManager - PullRequest
Новая
       9

AddThis.com - ScriptManager

4 голосов
/ 05 февраля 2011

Я пытаюсь зарегистрировать файл JS после обратной передачи с панели обновления.Я пытаюсь заставить AddThis.com работать после обратной передачи.Это работает, если я устанавливаю multiview.activeviewindex равным 1. Однако, если я перехожу из представления 1 в представление 2, это не работает.

Вот код серверной части проекта.

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

Вот код ASPX: 

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

Я попытался зарегистрировать сценарий запуска в диспетчере сценариев.

Кто-нибудь знает, как заставить это работать?

Спасибо!

1 Ответ

3 голосов
/ 15 июня 2011

Похоже, что AddThis работает только во время загрузки окна или документа, поэтому здесь требуется небольшая хитрость.По сути, идея заключается в том, что вы должны визуализировать AddThis div в первом представлении, а затем захватить его в поле javascript и затем показать внутри div, представленного во втором представлении.

Прежде всего вам нужно изменить код на стороне сервера, потому чтоВы хотели бы включить весь файл, а не блок скрипта.Вы также должны делать это только во время метода PageLoad (я использую c #, поэтому вам нужно переписать вызов ниже). 

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

Вы также можете просто поместить его в заголовок html (как вы это сделали) иизбавиться от вызова ScriptManager, который в этом случае не нужен.Чем вам нужно немного изменить содержимое вашего мультивью 

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

. Для этого я написал простой модуль javascript, который обрабатывает задачу. 

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);
} ();

Обратите внимание, что PageModules воспроизводит толькоРоль пространства имен, чтобы избежать путаницы с глобальной областью действия.Модуль AddThis инициализируется самостоятельно и является своего рода одиночным.Также вам необходимо ссылаться на jQuery или переделывать тело внутренних методов.Я обернул ваш AddThis div дополнительным «скрытым» div, чтобы не показывать его пользователю.Метод add_load запускается после загрузки всех сценариев и после того, как все объекты созданы в соответствии со ссылкой msdn

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

Нам нужно, чтобы takeAddThis запускался только один раз, чтобы я сначала связал этот методвызов.Дополнительное время ожидания сдвигает нашу логику до конца очереди, что гарантирует, что логика AddThis будет правильно выполнена (я мог бы использовать $ (document). Здесь также из jQuery, однако я хотел остаться последовательным.

...