my html
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
