CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-3
DN0300
DN0300

Reputation: 876

Execute JS inside of a Bootstrap popover

I am trying to place form inside of a bootstrap, all the html render into it just fine, but doesn't execute any of the JavaScript (date-picker).

This is the html code:

<button type="button" class="btn btn-lg btn-danger" data-html='true' data-toggle="popover" title="Popover title" data-content='

Html Form code

'>Click to toggle popover</button>

JS:

  $('[data-toggle="popover"]').popover()

Upvotes: 0

Views: 1613

Answers (2)

Fernando
Fernando

Reputation: 129

In bootstrap docs:

sanitize: Enable or disable the sanitization. If activated 'template', 'content' and 'title' options will be sanitized.

which means that all javascript will be removed.

In bootstrap.js > function setElementContent(...

   if (this.config.html) {
    if (this.config.sanitize) {
      content = sanitizeHtml(content, this.config.whiteList, this.config.sanitizeFn);
    }

    $element.html(content);
  } else {
    $element.text(content);
  }

The default value is true, therefore:

            $(SomeNodeElement).popover({
            html: true,
            sanitize: false,
            content: someElem.innerHMTL //or whatever
        })

Upvotes: 0

Juan Pablo
Juan Pablo

Reputation: 36

I recommend using selector in attributes

html:

<button type="button" class="btn btn-lg btn-danger" data-popover-content="#mypop" data-toggle="popover" data-trigger="focus">Popover Example</button>

<div class="hidden" id="mypop">
  <div class="popover-heading">
    This is the heading
  </div>
  <div class="popover-body">
    This is the body
  </div>
</div>

js:

$("[data-toggle=popover]").popover({
   html : true,
   content: function() {
      var content = $(this).attr("data-popover-content");
      setTimeout(function(){ console.log('execute'); },500);
      return $(content).children(".popover-body").html();
   },
   title: function() {
      var title = $(this).attr("data-popover-content");
      return $(title).children(".popover-heading").html();
   }
});

link demo: https://jsfiddle.net/xz45cnt4/

use class hidden in id mypop

Upvotes: 1

Related Questions