Trigger Bootstrap JS behavior for dynamically loaded HTML content

Question

I am dynamically loading HTML templates containing Bootstrap markup. However, none of the Bootstrap Javascript behavior is being applied to the loaded content. For example, if the loaded content contained markup for the Bootstrap modal the modal doesn't behave correctly.

Is there a way I can trigger Bootstrap to refresh or apply it's Javascript to the newly loaded content?

Which method are you using to dynamically load the partials? Could you paste your code to a Fiddle so that we can better assist? I know that it is possible to dynamically load the partials and still have Bootstrap render properly (I have done it myself) - but your implementation could be problematic. — Korgrue
– Korgrue, Commented Jan 14, 2016 at 21:23
The trick is that I'm updating the content on the page after the bootstrap JS has fired. So without being able to load the content dynamically I don't think a Fiddle makes sense. To your point, I feel this is a common use case so the solution is out there somewhere. Just can't seem to find it. — rohit_wason
– rohit_wason, Commented Jan 14, 2016 at 21:25
It is a common use case. Usually, if you update the DOM via JS, Bootstrap should make the necessary adjustments. The only case where I typically see issues with dynamic content is if you use the raw bootstraps modals. I personally use this library when managing dynamic modal content in Bootstrap: bootboxjs.com — Korgrue
– Korgrue, Commented Jan 14, 2016 at 21:32
bootstrap should behave correctly with dynmically loaded html templates check below fiddle to simulate dynamic loaded html jsfiddle.net/mfarouk/qks32e8a you need to paste some code to check what is wrong wiz it — mfarouk
– mfarouk, Commented Jan 14, 2016 at 22:02

Ryan · Accepted Answer · 2016-01-14 22:04:30Z

1

you'll need to initialize the modal in the callback of whatever function/request object is loading the dynamic content

it's hard to say without seeing your code but something like this

require(['!text/myDynamicTemplate.html'], function(template){
   //logic to render the template and/or insert it into the dom here

   $('#myModal').modal(options)
})

Edit:

Bootstrap defines its javascript plugins individually. There is no global bootstrap object

Here's the plugin definition for tooltip

  function Plugin(option) {
    return this.each(function () {
      var $this   = $(this)
      var data    = $this.data('bs.tooltip')
      var options = typeof option == 'object' && option

      if (!data && /destroy|hide/.test(option)) return
      if (!data) $this.data('bs.tooltip', (data = new Tooltip(this, options)))
      if (typeof option == 'string') data[option]()
    })
  }

  var old = $.fn.tooltip

  $.fn.tooltip             = Plugin
  $.fn.tooltip.Constructor = Tooltip


  // TOOLTIP NO CONFLICT
  // ===================

  $.fn.tooltip.noConflict = function () {
    $.fn.tooltip = old
    return this
  }

}(jQuery);

Thus the only thing you get access to via $('#myID').tooltip is the constructor and initializer

the best you can do without modifying the bootstrap code

$('[data-toggle=tooltip]').tooltip()

edited Jan 14, 2016 at 22:04

answered Jan 14, 2016 at 21:25

Ryan

8279 silver badges26 bronze badges

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

1 Comment

rohit_wason Over a year ago

While this may be the hard truth, it seems like there has to be a better way. What if my markup contained other components like alerts, tooltips, and modals. Would I need to recreate all of them in JS? Seems there should be a bootstrap.refresh('#content') or something.

Ruben Vincenten · Accepted Answer · 2016-01-14 22:17:21Z

1

Alert close buttons and model open buttons by default are already delegated. If there's a data-toggle attribute, it's delegated, except for tooltips and popovers. Tooltips and popovers are opt-in. Every other bootstrap js component may have a refresh method, for example the scrollspy script.

I usually add a function in which I apply the needed javascript like bootstrap (or WYSIWIG editors) to any scope.

There is also bootbox which might be helpful to you: http://bootboxjs.com/

As for bootstrap model loading via ajax, http://jschr.github.io/bootstrap-modal/ might be helpfull to you.

answered Jan 14, 2016 at 22:17

Ruben Vincenten

9074 silver badges7 bronze badges

Comments

badboy · Accepted Answer · 2016-01-15 03:48:23Z

1

It's worth giving this a shot:

http://nakupanda.github.io/bootstrap3-dialog/#loading-remote-page

See more discussions:

https://github.com/nakupanda/bootstrap3-dialog/issues/217

https://github.com/nakupanda/bootstrap3-dialog/issues/189

https://github.com/nakupanda/bootstrap3-dialog/issues/185

https://github.com/nakupanda/bootstrap3-dialog/issues/119

https://github.com/nakupanda/bootstrap3-dialog/issues/44

edited Jan 15, 2016 at 3:48

answered Jan 15, 2016 at 3:42

badboy

1062 bronze badges

Collectives™ on Stack Overflow

Trigger Bootstrap JS behavior for dynamically loaded HTML content

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related