Search code examples
jqueryajaxdropbox

Dropbox Drop-in file chooser not loading within AjaxForm


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);
         }
     });
}

Solution

  • 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.