CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap-3
rohit_wason
rohit_wason

Reputation: 177

Trigger Bootstrap JS behavior for dynamically loaded HTML content

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?

Upvotes: 5

Views: 1587

Answers (3)

badboy
badboy

Reputation: 106

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

Upvotes: 1

Ruben Vincenten
Ruben Vincenten

Reputation: 907

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.

Upvotes: 1

Ryan
Ryan

Reputation: 827

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()

Upvotes: 1

Related Questions