My problem is as follow:
when i will load a facebook xml tag (see below) in a with Ajax loaded page will it not be shown.
The table2.php page will load by Ajax in the follow div: <div id="update_div"></div>, but it will not be shown.
This is the tag i will use for printing a like button etc: <fb:like href="http://website_url.nl" send="true" layout="button_count" width="450" show_faces="false"></fb:like>
I cant find any solution for this problem and hope that anyone can help whit tis problem.
My page is code ass follow:
index.php
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#" >
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script type="text/javascript" src="/js/jquery.js"></script>
<head>
<script type="text/javascript">
$.setDivContentAjax = function(){
var url = window.location.hash.replace( "#", "");
var paramaters = null;
try
{
var parameters = JSON.parse('{"' + decodeURI(url.replace(/&/g, "\",\"").replace(/=/g,"\":\"")) + '"}');
//console.log(parameters);
}
catch(error)
{
}
targetdiv = $('#update_div');
targetdiv.hide();
$('#loading-image').show();
$.ajax({
url: '/includes/table2.php',
context: targetdiv,
type: "GET",
timeout:18000,
data: parameters,
success: function(data) {
window.setTimeout(function() {$('#loading-image').hide(); targetdiv.html(data); targetdiv.show();} ,300);
}
});
}
$(document).ready(function ()
{
$.setDivContentAjax();
$(window).bind('hashchange', function() {
$.setDivContentAjax();
});
});
</script>
</head>
<body>
<div id="loading-image" style="display:none; padding: 50px 0 50px 0; text-align: center;"><img src="/img/ajax-loader-circle.gif"></div>
<div id="javascript" style="display:none;"></div>
<div id="update_div"></div>
</body>
</html>
table2.php
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/nl_NL/all.js#xfbml=1&appId=APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<fb:like href="http://website_url.nl" send="true" layout="button_count" width="450" show_faces="false"></fb:like>
This really pretty easy and well documented 🙂
Just use the FB.XFBML.parse method of the JS-SDK to re-parse the while document or certain parts of the DOM!
https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/