I am building an input form and the Dropin JS script works great. When I try and load that input form via ajax, the chooser does not show up and I cannot get the magic to happen. Is there any script I need to load after rendering the input form or something that is happening out of order?
When the input form renders, the "Choose a Dropbox File" button does not render at all.
======Element On Form Loaded via AJAX===========
<input type="dropbox-chooser" name="selected-file" id="db-chooser" />
======JQuery Script that Loads the form=========
function addContent(lesson) {
$.ajax({
type: 'GET',
url: "/Content/CreateModal",
data: {
'lesson': lesson
},
success: function (response) {
$('#lesson' + lesson).html(response);
document.getElementById("db-chooser").addEventListener("DbxChooserSuccess",
function (e) {
$("#DropboxUrl").val(e.files[0].link);
}, false);
}
});
}
Per @smarx it was answered on the DB Forum.
I used the new Dropbox.choose() function and replaced the with
<a href="#" onclick="Dropbox.choose({ success: function (files) { $('#Url').val(files[0].link); } });">
<img src="@Url.Content("~/img/dropbox35.png")" style="width:20px" />
</a>
And it works beautifully.