Solved

Displaying twitter feeds using javascript

Posted on 2013-11-01
9
279 Views
Last Modified: 2013-11-30
Hi

I want to display twitter data of the users in twitter format. I have an api which returns twitter html's. I make an ajax call in javascript to the api and get the HTML data. But when i set the div innerHTML to the html data it does not display in twitter format. It displays in raw format. If have the same data written in the html directly under the div it displays in  twitter format. I am attaching two files stream_old.html and test.html. In test.html i have copied that html data and it displays in twitter format.

In case of stream_old.html, i have made and ajax call and get the data and then set in the div, but it does not displays in twitter format. In both the files i have included the script <script async src="http://platform.twitter.com/widgets.js" charset="utf-8"></script>

stream_old.html hits an api https://stream.alphamaven.com/markets/lse/indices/ftse_100/cashtag_stream/oembed?uid=825060248, this is a continous stream of data. I have another API which returns fixed 3 tweets, even in that it is not displayed in twitter format.

Also attaching the a.js file required for stream_old.html


thanks
bharat
stream-old.html
test.html
a.js
0
Comment
Question by:fbharat
  • 4
  • 3
9 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39618754
At first glance I would say that the CSS from twitter is either not being acquired, or is not being applied.  Without the live page there is no way to determine which case is most likely.

All you are going to get is speculation and guess without a link, and most Experts are going to ignore the question because there is not enough information to work with.

Cd&
0
 

Author Comment

by:fbharat
ID: 39618771
Hi

Can you please let me know what information is required for this. I have send all the files . if you run stream_old.html and test.html you will see the difference and i am sure it will help you decide the exact issue. Please let me know if any more information is required.

thanks
bharat
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39618817
That is not a live page or even a valid page.  All I can confirm from that is what I already know.  You don't have the CSS being applied.

Cd&
0
Enterprise Mobility and BYOD For Dummies

Like “For Dummies” books, you can read this in whatever order you choose and learn about mobility and BYOD; and how to put a competitive mobile infrastructure in place. Developed for SMBs and large enterprises alike, you will find helpful use cases, planning, and implementation.

 

Author Comment

by:fbharat
ID: 39618852
Is there a way we can apply CSS or Js using innerHTML

thanks
bharat
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39618886
Of course not. The styles need to be declared in the head of a valid page.  There are multiple rules the have to be applied to the elements within each tweet.

All you have presented so far is a lot of hacked code.  You are never going to get this sort of thing tp work without valid stable markup.  

If you want further help, then I need a link to the page where you are trying to implement; not hacked fragments.

Cd&
0
 

Accepted Solution

by:
fbharat earned 0 total points
ID: 39618933
Thanks but i found the solution. I just included the JS before updating the innerHTML and it worked for me.  Just changed the below line and it worked

a.unshift(b + "<script src='http://platform.twitter.com/widgets.js' charset='utf-8'><\/script>");
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39619279
Then the styling is being generated dynamically from script.  Also a hack, but when you rely on external code that is sometimes all that is available.

Cd&
0

Featured Post

ScreenConnect 6.0 Free Trial

Want empowering updates? You're in the right place! Discover new features in ScreenConnect 6.0, based on partner feedback, to keep you business operating smoothly and optimally (the way it should be). Explore all of the extras and enhancements for yourself!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question