jQuery mobile with Twitter API -
i upgrading jquery mobile app work twitter api v1.1. app has embedded timelines in various different pages no longer work due twitter changes.
i have used twitter create widget feature produces code similar this;
<a class="twitter-timeline" href="https://twitter.com/twitterapi" data-widget-id="your-widget-id-here">tweets @twitterapi</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> i have embedded code on page , works great first time page displayed. on subsequent pages or returns same page embedded timeline not appear unless refresh browser forcing reload of page.
i suspect problem has way jqm uses ajax page loading. twitter javascript must hooking document ready event never called after first page load since subsequent pages loaded via ajax.
i have tried inserting twitter supplied javascript in pageinit event no success. example
$(document).on("pageinit", function( event ) { // inserted twitter js here }); any ideas on how twitter embedded timelines reliably appear within jquery mobile app (without using server code)?
i ended figuring out. twitter websites api adds window.twttr object , object has load method scan dom , install widgets. means can check if widget.js loaded , if call , if not load it. final code looks this;
$(document).bind('pageinit', function() { if (window.twttr) { twttr.widgets.load(); } else { // insert twitter supplied widget js here } });
Comments
Post a Comment