Кнопка Facebook Like & Google +1 исчезает при частичной обратной передаче

Question

У меня есть кнопки facebook like и google + внутри веб-части, которая, в свою очередь, находится внутри панели обновлений. Проблема в том, что после выполнения асинхронной обратной передачи через панель обновления кнопки fb и g + исчезают.

У меня также есть кнопка «твиттер», с которой у меня раньше была похожая проблема. Теперь он работает после того, как я разместил twitter twitter javascript за пределами панели обновления:

<asp:updatepanel ID="UpdatePanel1" runat="server">
     <asp:WebPartManager ID="WebPartManager1" runat="server">
     </asp:WebPartManager>
     <script type="text/javascript">              
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequest);                
     </script>
     <asp:webpartzone ID="WebPartZone1" runat="server" PartChromeType="None" >
       <ZoneTemplate>
       .
       .
       .
        <a href="http://twitter.com/share" class="twitter-share-button" data-count="none">Tweet Profile</a><br />
        <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=181772605219534&amp;xfbml=1"></script><fb:like href="" send="false" layout="button_count" width="50" show_faces="false" font="trebuchet ms"></fb:like>
        <br/>
        <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
        <g:plusone size="medium" count="true"></g:plusone>
         .
         .
         </ZoneTemplate>
     </asp:webpartzone>
     <asp:webpartzone ID="WebPartZone2" runat="server" Width="100%" 
                            PartChromeType="None">
         .
         .
         .
     </asp:webpartzone>
</asp:updatepanel>

<script type="text/javascript">
    function pageLoad() {
        $.getScript("http://platform.twitter.com/widgets.js");
    }
</script>

Это перезагрузило сломанный javascript после частичной обратной отправки для твиттерной кнопки твиттера, и все работает нормально Но то же самое не происходит для кнопок facebook и google plus, когда я заменяю javascripts. Я использую ASP.NET 4 и C #. Как я могу это исправить ??

Answer 1

UpdatePanel обновляет свое содержимое, устанавливая свойство innerHTML.Это означает, что любое состояние DOM в элементе UpdatePanel теряется после асинхронной обратной передачи UpdatePanel.Все кнопки fb, g + и twitter работают с состоянием DOM вашей UpdatePanel div, которое сервер стирает, когда отправляет дельту innerHTML клиенту.

См. Мой ответ здесь: RegisterClientScriptCode не работает после частичной обратной передачи

Вам необходимо отключить асинхронную обратную передачу для веб-части или поместить сценарии в другое место.

Обновленный вопрос

Вы пробовали это?Удалите элементы <script> и вызовите их с помощью jquery:

<asp:updatepanel............>
     <asp:WebPartManager ID="WebPartManager1" runat="server" />
     <asp:webpartzone...........>
       .
       .
       .
        <a href="http://twitter.com/share" class="twitter-share-button" data-count="none">Tweet Profile</a><br />
        <div id="fb-root"></div><fb:like href="" send="false" layout="button_count" width="50" show_faces="false" font="trebuchet ms"></fb:like><br/>
        <g:plusone size="medium" count="true"></g:plusone>
     </asp:webpartzone>
</asp:updatepanel>

<script type="text/javascript">
    function pageLoad() {
        $.getScript("http://platform.twitter.com/widgets.js");
        $.getScript("http://connect.facebook.net/en_US/all.js#appId=181772605219534&amp;xfbml=1");
        $.getScript("https://apis.google.com/js/plusone.js");
    }
</script>

Если это не сработает, почему бы просто не разделить кнопки на статическую панель?Кнопки не используются для UpdatePanel.Примерно так:

<!-- webpartmanager does NOT need to enclose your webparts. 
     Just declare it. -->
<asp:webpartmanager ... /> 

<!-- asp:updatepanel contains the async webpart. -->
<asp:updatepanel ...> 
    <asp:WebPartZone id="WebPartZone1" runat="server">
      <ZoneTemplate>
        ...
      </ZoneTemplate>
    </asp:WebPartZone>
</asp:updatepanel>

<!-- another webpart holds the buttons, NOT contained by updatepanel. -->
<asp:WebPartZone id="WebPartZone2" runat="server">
  <ZoneTemplate>
    <a href="http://twitter.com/share" class="twitter-share-button" data-count="none">Tweet Profile</a><br />
    <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=181772605219534&amp;xfbml=1"></script><fb:like href="" send="false" layout="button_count" width="50" show_faces="false" font="trebuchet ms"></fb:like><br/>
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
    <g:plusone size="medium" count="true"></g:plusone>
  </ZoneTemplate>
</asp:WebPartZone>

Answer 2

Я всегда исключаю их из частичной обратной передачи. Все объявления, кнопки +1 и аналогичные кнопки исключены из панели обновления.

Answer 3

Это может показаться весьма необычным решением, но это сработало для chrome и firefox.

Это сработало, когда я сохранил ссылку javascript src для facebook как внутри панели обновлений, так и отменил панель обновлений (jqueryвызов).Для кнопок Twitter и Google + он должен вызываться только с помощью jquery вне панели обновления.Это работало, когда я использовал следующую комбинацию:

<asp:updatepanel............>
 <asp:WebPartManager ID="WebPartManager1" runat="server">
 </asp:WebPartManager>
 <asp:webpartzone...........>
   .
   .
   .
    <a href="http://twitter.com/share" class="twitter-share-button" data-count="none">Tweet Profile</a><br />
    <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=181772605219534&amp;xfbml=1"></script><fb:like href="" send="false" layout="button_count" width="50" show_faces="false" font="trebuchet ms"></fb:like>
    <br/>
    <g:plusone size="medium" count="true"></g:plusone>
     .
     .
 </asp:webpartzone>
 <asp:webpartzone ..........>
     .
     .
     .
 </asp:webpartzone>
</asp:updatepanel>
<script type="text/javascript">
  function pageLoad() {
    $.getScript("http://platform.twitter.com/widgets.js");          
    $.getScript("http://connect.facebook.net/en_US/all.js#appId=181772605219534&amp;xfbml=1");
    $.getScript("https://apis.google.com/js/plusone.js");
            }
</script>

ПРИМЕЧАНИЕ: Кнопка Google +1 по-прежнему не работает в Internet Explorer, но все 3 кнопки отлично работают в Chrome и Firefox.