Embedded twitter widget is not working on the future div dom element


#1

my html

....... /* twitter*/

when my html loads, it works fine.
then, a user clicked a tab, the js calls for a php file via ajax, then the php sends back “…/twitter/” via responseText,
tthen, the js create a dynamic twitter dom to replace the old one inside of div content.

the twitter is not rendering, instead it only tells me a link of "Tweets about “#NY”, it seems like twitter is not working for future created dom.

anyway to work around?

many thanks
index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="tempelate"/>
<meta name="description" content="tempelate"/>
<title>Tempelate</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/ajaxtab.css">
</head>
<body>
<ul id="tabmenu" > 
<li ><a class="" id="tab1">Perth Tab</a></li> 
<li ><a class="" id="tab2">RFI Tab</a></li> 
<li ><a class="" id="tab3">VOA Tab</a></li> 
</ul> 
<div id="content">
<a class="twitter-timeline" data-border-color="#fff" data-chrome="noscrollbar noheader nofooter" href="https://twitter.com/search?q=%23perth" data-widget-id="399112528757673984">Tweets about "#perth"</a>
</div>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/ajaxtab.js"></script>
<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";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</body>
</html>

ajaxtab.php

<php>
<?php
require_once 'error_handler.php';
error_reporting(E_ALL);
ini_set('display_errors', 1);
//get content
if ((isset($_GET['content'])) && (strlen(trim($_GET['content'])) > 0)) {
	$content = stripslashes(strip_tags($_GET['content']));
} else {$content = 'No content';}
ob_start();

//send content
if($content == 1)
{
$response = '<a class="twitter-timeline" data-chrome="noscrollbar noheader nofooter" href="https://twitter.com/search?q=%23shanghai" data-widget-id="399115779032895489">Tweets about "#shanghai"</a>';
}
if($content == 2)
{
$response = '<a class="twitter-timeline" data-chrome="noscrollbar noheader nofooter" href="https://twitter.com/RFI_Chine" data-widget-id="399117097856274432">Tweets by @RFI_Chine</a>';
}
if($content == 3)
{
$response = '<a class="twitter-timeline" data-chrome="noscrollbar noheader nofooter" href="https://twitter.com/voachina" data-widget-id="399116787217743872">Tweets by @voachina</a>';
}
echo $response;
exit;
?>

ajaxtab.js
$(document).on("click", "li", function(e){ e.preventDefault(); document.getElementById("tab1").className = ""; document.getElementById("tab2").className = ""; document.getElementById("tab3").className = ""; var str = e.target.id; console.log(str); document.getElementById(e.target.id).className = "active"; ajaxSubmit(str.charAt(3));

});

function ajaxSubmit(tab)
{
console.log(tab);
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}

xmlhttp.onreadystatechange=function()
  {
	  if (xmlhttp.readyState==4 && xmlhttp.status==200)
	   {
	   document.getElementById("content").innerHTML = "";
	   	var msg=xmlhttp.responseText;
	    $("#content").append(msg);
	   }
  }
//Send Parameters;
document.getElementById("content").innerHTML = "Loading contents...";
xmlhttp.open("GET","php/ajaxtab.php?content="+tab,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send();

}


ajaxtab.css

#tabmenu {
color: #000;
border-bottom: 1px solid bisque;
margin: 0px;
padding: 5px;
z-index: 1;
padding-left: 0px;
width:309px;/menu width/
}

#tabmenu li {
display: inline; /tab one by one inline/
}

#tabmenu a, a.active { /tab property/
color: #c0c0c0; /tab color/
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-size:13px;
border: 1px solid bisque;
border-bottom: 1px solid bisque;
padding:5px 7px 5px 5px; /top right bottom left :distance between text and side/
margin:5px 8px 0 8px; /top right bottom left :distance between sides/
text-decoration: none;
cursor:hand;}

#tabmenu a.active { /active tab/
border-bottom: 1px solid #fff;
color:black;
}

#tabmenu a:hover { /* hover tab*/
color: black;
background-color:bisque;}

#tabmenu a:visited {
color: #E8E9BE; }

#tabmenu a.active:hover { /active hover tab/
background-color:bisque;
}

#content {
font-family:Verdana, Geneva, Tahoma, sans-serif;
background-color:white;
text-align: justify;
padding: 0px;
border: 1px solid bisque;
border-top: none;
z-index: 2;
width:312px;/content width/
height:360px}

#content a {
text-decoration: none;
font-size:12px;
}

#content a:hover {
color: blue;}



thanks! the content of tab is loaded dynamically via ajax php js

#2

Try calling twttr.widgets.load() after the content of the tab is loaded and in the DOM.
More documentation here: https://dev.twitter.com/docs/intents/events#init


#3

#4

#5

#6