I have an application using the Facebook JavaScript SDK, there is a simple modal that has its content dynamically created. It's important to note that the code is working properly, except for the Like button on facebook.
Modal part in HTML code:
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" id="modal-body"></div>
<div class="modal-footer" id="modal-footer"></div>
</div>
<!-- / Modal content -->
</div>
</div>
<!-- / Modal -->
Javascript:
function showModal(aux) {
var title;
var message;
var footer;
switch (aux) {
(...)
case (2): // Like
title = 'Erro';
message = '<p>Você ainda não curte nossa página, clique em "Like" e depois em continuar.<div class="fb-like" data-href="ENDERECO-PAGINA" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div></p>';
footer = '<button type="button" class="btn btn-default" data-dismiss="modal" onClick="checkLike()">Continuar</button><button type="button" class="btn btn-default" data-dismiss="modal" onClick="showModal(4)">Cancelar</button>';
break;
(...)
}
$('#myModal').find('.modal-header').html(title);
$('#myModal').find('.modal-body').html(message);
$('#myModal').find('.modal-footer').html(footer);
$('#myModal').modal();
}
The button does not appear in the modal. Any suggestions?