I am uploading a file to facebook using dropzone js script. File uploads successfully. As response I am returning some html which includes the code to show facebook video:
JavaScript
x
<div class="fb-video"
data-href="https://www.facebook.com/facebook/videos/<?= $video->youtube_id; ?>/"
data-width="auto" data-show-text="true">
</div>
The code which triggers the upload using Dropzone is:
JavaScript
$(document).ready(function() {
Dropzone.options.myVideoDropzone = {
acceptedFiles: 'video/*',
processing: function(obj, resp) {
$('.upload-feedback').removeClass('error');
$('.upload-feedback').removeClass('success');
$('.upload-feedback').html('Uploading ...');
},
error: function(obj, resp) {
$('.upload-feedback').addClass('error');
$('.upload-feedback').html('Upload error. Please try again.');
},
success: function(obj, resp) {
try {
var response = JSON.parse(resp);
if (response.status) {
$('.upload-feedback').addClass('success');
$('#list_videos').append(response.html);
$('#addvideo').closeModal();
}
} catch (e) {
$('.upload-feedback').addClass('error');
$('.upload-feedback').html('Error: ' + e);
}
this.removeAllFiles();
}
};
});
I see the item appended but iframe does not load the video. My guess is that the html response is not being parsed. any suggestions?
Advertisement
Answer
I was missing to parse code prepend using:
JavaScript
FB.XFBML.parse();
Code looks like:
JavaScript
try {
var response = JSON.parse(resp);
if (response.status) {
$('.upload-feedback').addClass('success');
$('#list_videos').append(response.html);
FB.XFBML.parse();
$('#addvideo').closeModal();
}
} catch (e) {
$('.upload-feedback').addClass('error');
$('.upload-feedback').html('Error: ' + e);
}