2012-04-17 5 views
1

У меня есть div, который я хочу загрузить с помощью кнопки совместного доступа twitter через jQuery. Работы, когда скрипт выполняется при загрузке страницы. Но после этого, когда я делаю это вручную, скрипт, похоже, не загружается.Невозможно загрузить ссылку на щебетать через Javascript

Оригинальная кнопка:

<a href="https://twitter.com/share" class="twitter-share-button" data-via="givestreamuk">Tweet</a> 
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 

Я пытался просто загружая кнопку целого (ссылка плюс скрипт) с помощью JQuery, но это не сработало, я только что получил ссылку. Вместо этого я попытался придать скрипт в DOM, как это:

Вот мои JS:

var twitter = '<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://customer-url" data-via="givestreamuk" data-hashtags="socialgiving">Tweet</a>'; 
jQuery('#twitter_share').html(twitter); 

var jstext = '!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");'; 

var script = document.createElement("script"); 
script.type = "text/javascript"; 
script.text = jstext; 
jQuery('#twitter_share').append(script); 

Мой ДИВ кнопка получает помещается в:

<div id="twitter_share"></div> 

Это работает, когда сценарий выполняется при загрузке страницы, но затем вручную, после чего в div появляется только ссылка.

Может ли кто-нибудь предложить, как я могу вручную загрузить эту кнопку в DIV и выполнить скрипт так, чтобы кнопка была сгенерирована?

+0

в случае, если кто спрашивает, почему я хочу, чтобы это сделать. Мне нужно изменить '' data-url = "http: // customer-url" '' 'каждый раз, когда он загружается ... – iamjonesy

+0

Просто запустил этот код в JSFiddle. Это работает для меня: http://jsfiddle.net/qtkdH/ –

+0

@ Джонни Бургер, ты прав. хмм. Что-то должно мешать где-то – iamjonesy

ответ

2

Вы используете Turbolinks, PJAX или другие подобные драгоценные камни в своем проекте? Если это так, обратитесь к этой теме:

https://github.com/rails/turbolinks/issues/25 

И эти решения:

http://www.blackfishweb.com/blog/asynchronously-loading-twitter-google-facebook-and-linkedin-buttons-and-widgets-ajax-bonus 

http://reed.github.com/turbolinks-compatibility/facebook.html 
0

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

Для новых кнопок Twitter тег сценария с ID twitter-wjs уже существует, и if(!d.getElementById(id)) вернет false.

Просто добавьте else заявление, что if для того, чтобы заставить объект Twitter Widget для обнаружения новых элементов:

<script> 
!function(d,s,id) 
{ 
    var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https'; 

    if(!d.getElementById(id)) 
    { 
     js=d.createElement(s); 
     js.id=id; 
     js.src=p+'://platform.twitter.com/widgets.js'; 
     js.parentNode.insertBefore(js,fjs); 
    } 
    else 
    { 
     twttr.widgets.load(); 
    } 
}(document, 'script', 'twitter-wjs'); 
</script> 

Источник: https://dev.twitter.com/web/javascript/initialization

Смежные вопросы