How to bind a Javascript function to dynamically loaded HTML

Question

I am using the s3_direct_upload component. Normally, you enable it by binding your element to a function in the ready or load event like so:

$(function() {
  $('#s3-uploader').S3Uploader(
    {
        remove_completed_progress_bar: false,
        progress_bar_target: $('#uploads_container'),
    }
  );
  error handling
    $('#s3-uploader').bind('s3_upload_failed', function(e, content) {
      return alert(content.filename + ' failed to upload : ' + content.error_thrown + '.');
  });
});

What I am having trouble with is how to bind this to the #s3-uploader element when that is dynamically loaded. I am loading the page through a Rails partial so there is no load event fired.

I've looked at the JQuery 'on' method but it requires an event and I'm not sure what event to tie it to.

You need event delegation, learn.jquery.com/events/event-delegation — Adil
– Adil, Commented Jul 18, 2014 at 3:13

Arun P Johny · Accepted Answer · 2014-07-18 03:14:40Z

3

You can use event delegation to add event handlers to dynamically added elements to

$(document).on('s3_upload_failed', '#s3-uploader', function(e, content) {
    return alert(content.filename + ' failed to upload : ' + content.error_thrown + '.');
});

But you will have to initialize the S3Uploader plugin only after the element is loaded to the dom. So the below part need to get executed after the element is loaded to the dom

$('#s3-uploader').S3Uploader({
    remove_completed_progress_bar: false,
    progress_bar_target: $('#uploads_container'),
});

You might have to look at the code that is loading the dynamic elements and add a callback handler to it where you can execute this.

answered Jul 18, 2014 at 3:14

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ken Joyner Over a year ago

I ended up doing what you suggested and adding the S3Uploader call as part of the page refreshing. I had view.js.erb that loaded a partial and replaced a DOM element on the existing page. I added the S3Uploader call to the view.js.erb file after replacing the element. Is this the best way to do it? It's not very unobtrusive; though, not sure that matters.

Richard Peck · Accepted Answer · 2014-07-18 07:04:17Z

Turbolinks

Further to Arun P Johny's post, you need to also consider the use of an anonymous function in your JQuery.

When using Turbolinks, you cannot rely on the anonymous function running at page load, as the JS may persist between page reloads (turbolinks just refreshes the <body> tag of your page, not the <head> tag, to save on request time / space).

Instead, you need to use the Turbolinks Event hooks, to handle various page events with your application:

#app/assets/application.js
var your_function = function() {
    $('#s3-uploader').S3Uploader({
        remove_completed_progress_bar: false,
        progress_bar_target: $('#uploads_container'),
    });
}

$(document).on("page:load ready", your_function);

Essentially, if you can delegate the event like Arun P Johny was suggesting, use that method. If you cannot delegate from the document element, you should use the turbolinks events as alluded to here

Collectives™ on Stack Overflow

How to bind a Javascript function to dynamically loaded HTML

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related