Я пытаюсь интегрировать JQM с Facebook Like и Twitter Tweet на моей второй странице. Вторая страница загружается первой страницей с использованием тега привязки, а затем используется запрос AJAX для второй страницы.
Проблема в том, что скрипты javascript Facebook и Twitter не загружаются при загрузке второй страницы.
Я могу отключить AJAX, но я не хочу, чтобы эта функция была компромиссом.
Есть ли способ перезагрузить js-скрипты на определенной странице после запроса AJAX на JQM? (Я думаю, что это должно работать подобно функции jQuery live).
Я использую Cakephp 2.0.4
Используете ли вы правильные стандарты? Вам нужно будет загрузить скрипты внутри элемента data-role="page" потому что это то, что среда JQM извлекает из запроса AJAX.
<div data-role="page"> <!-- Scripts here --> </div>
docs – http://jquerymobile.com/test/docs/pages/page-anatomy.html
В коде для вставки твит-кода существует инструкция if, проверяющая элемент с идентификатором 'twitter-wjs'. Удаление этого элемента перед загрузкой страницы приводит к тому, что кнопка твитта работает.
$(document).bind('pagebeforeload', function(){ $('#twitter-wjs').remove(); });
Это фиксирует кнопку facebook как кнопка. Я не совсем уверен, почему он работает, но он имеет какое-то отношение к API Facebook.
$(document).bind('pageshow', function() { try{ FB.XFBML.parse(); } catch(err){} });
У меня была та же проблема, и я решил это так:
1: в вашем html создайте тег или идентификатор на странице div
<div data-role="page" class="page-class" id="page-id">
2: получите код, предоставленный твиттером, и измените его на использование синтаксиса jquery
$( '.page-class' ).live( 'pageinit',function(event){ d = $(document)[0]; s = "script"; id = "twitter-wjs"; 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); } });
Я изменил код, предоставленный twitter, как минимум. Вероятно, есть лучший способ сделать то же самое.
Для Facebook я думаю, что такой же подход можно использовать.
Надеюсь, это поможет тем, кто сталкивается с одной и той же проблемой.
Я думаю, что есть два решения. Во-первых, отключить переходы страницы Ajax для связанных страниц, добавив в гиперссылку «data-ajax =» false ». Это может быть или не быть подходящим для вас в зависимости от того, хотите ли вы сохранить один и тот же контекст на кнопке «Назад» – вы обычно это делаете, чтобы вы могли попробовать второе решение.
Это тот, который я использую, когда у меня есть несколько кнопок Like на странице: когда ваша страница создана (подключайтесь к событию создания JQMobile, создайте событие), найдите все свои любимые кнопки и вызовите их обработку. Я не могу дать вам полный пример, но что-то вроде этого (обратите внимание, что я предполагаю, что вы используете формат XFBML «<fb: like … />»):
Запустите их, используя что-то вроде:
$('fb\\:like').each(function() { FB.XFBML.parse(this); });
Это приведет к тому, что все они будут расширены до полноты. Как кнопки.
Обратите внимание, что я не тестировал часть селектора этого, но бит XFBML.parse – это то, что я использую, и оно работает. Я не сделал то же самое для Twitter, но мне было бы интересно увидеть эквивалентный код.
Безопасно запускать этот код несколько раз, потому что после его анализа элемент fb: like больше не будет присутствовать в HTML.
Вот решение, во второй странице div создайте iframe. И src iframe будет страницей, которая отображает твиты и любит.
Таким образом, вам не нужно перезагружать js becoz, iframe перезагрузит код для симпатий и твитов.
Надеюсь, это решит вашу проблему.