0

I am using Backbone View to render some widgets, and they are inserted into the DOM after being rendered as a standalone element. While some plugins/widgets work when the element is still 'in the mid air', others require the element to be part of DOM to function properly. For instance, in the backbone view's render method, I need to call:

$("#images").slimScroll(); //slimScroll is a jquery plugin that add custom scrollbar

But this doesn't work. It works only after the Backbone View element is in the DOM, now my workaround is to call the plugin method after inserting widget to DOM, but this is very inflexible. So I need an event when an element is rendered in the DOM, something like document.ready but triggered when the element is ready in document. Is there such an event? Or what is the best way to deal with such situation?

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
NeoWang
  • 17,361
  • 24
  • 78
  • 126
  • possible duplicate of [Detect changes in the DOM](http://stackoverflow.com/questions/3219758/detect-changes-in-the-dom) – Felix Kling Sep 09 '13 at 09:14
  • 1
    possible duplicate of [calling javascript on rendering views in BackBone js. post-render callback?](http://stackoverflow.com/questions/9145680/calling-javascript-on-rendering-views-in-backbone-js-post-render-callback) (at least the "only works after the view is in the DOM" part) – mu is too short Sep 09 '13 at 16:02

3 Answers3

1

Nothing about Ajax will intrinsically cause DOM updates.

If there is a DOM update as a result of some Ajax stuff, it is because an event handler function has modified the DOM.

Just put your code after the DOM modification code in that event handler.

That said, you can watch for changes to the DOM with a mutation observer in supported browsers.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Yes, I just noticed that, I have edited the question. The mutation observer is exactly what I want, except that old browsers don't support it. Is there a js library that watches DOM changes and generates events? – NeoWang Sep 09 '13 at 09:15
1

You have to find elements in the scope of your view. Like this:

this.$("#images").slimScroll();

But I guess it wouldn't work because plugin requires element to be added to the DOM to calculate width, height, offset etc.

Vitalii Petrychuk
  • 14,035
  • 8
  • 51
  • 55
  • Probably it should be a comment, sorry. – Vitalii Petrychuk Sep 09 '13 at 08:53
  • Yeah, my careless mistake! $("#images", this.el).slimScroll() works even before the element is in DOM. Thanks! But you are right, some other plugins may still require the target element in DOM, so this is still a valid question. – NeoWang Sep 09 '13 at 09:02
0

You can use ajaxStart which will be fired when an Ajax request is made.

Darren
  • 68,902
  • 24
  • 138
  • 144
  • No, what I need is an event when an element is inserted into DOM and shows up in the page. On second thought, this has nothing to do with Ajax, javascript can render something like form and append to a div in DOM. I need to rephrase the question. – NeoWang Sep 09 '13 at 09:06