Contain form within a bootstrap popover?
JavascriptJqueryTwitter BootstrapTwitter Bootstrap-3PopoverJavascript Problem Overview
<div class="container">
<div class="row" style="padding-top: 240px;">
<a href="#" class="btn btn-large btn-primary" rel="popover"
data-content="<form><input type="text"/></form>"
data-placement="top" data-original-title="Fill in form">Open form</a>
</div>
</div>
I'm guessing that I would store the form contents within a javascript function...
How do I contain a form within a bootstrap popover?
Javascript Solutions
Solution 1 - Javascript
I would put my form into the markup and not into some data tag. This is how it could work:
JS Code:
$('#popover').popover({
html : true,
title: function() {
return $("#popover-head").html();
},
content: function() {
return $("#popover-content").html();
}
});
HTML Markup:
<a href="#" id="popover">the popover link</a>
<div id="popover-head" class="hide">
some title
</div>
<div id="popover-content" class="hide">
<!-- MyForm -->
</div>
Alternative Approaches:
X-Editable
You might want to take a look at X-Editable. A library that allows you to create editable elements on your page based on popovers.
Webcomponents
Mike Costello has released Bootstrap Web Components. This nifty library has a Popovers Component that lets you embed the form as markup:
<button id="popover-target" data-original-title="MyTitle" title="">Popover</button>
<bs-popover title="Popover with Title" for="popover-target">
<!-- MyForm -->
</bs-popover>
Solution 2 - Javascript
Either replace double quotes around type="text"
within single quotes, Like:
"<form><input type='text'/></form>"
OR
Replace Double quotes wrapping data-content
with single quote, Like:
data-content='<form><input type="text"/></form>'
Solution 3 - Javascript
<a data-title="A Title" data-placement="top" data-html="true" data-content="<form><input type='text'/></form>" data-trigger="hover" rel="popover" class="btn btn-primary" id="test">Top popover</a>
> just state data-html="true"
Solution 4 - Javascript
like this Working demo http://jsfiddle.net/7e2XU/21/show/#
-
Update: http://jsfiddle.net/kz5kjmbt/
Solution 5 - Javascript
You can load the form from a hidden div
element with the Bootstrap-provided hidden
class.
<button class="btn btn-default" id="form-popover">Form popover</button>
<div class="hidden">
<form id="form">
<input type="text" class="form-control" />
</form>
</div>
JavaScript:
$('#form-popover').popover({
content: $('#form').parent().html(),
html: true,
});
Solution 6 - Javascript
Or try this one
Second one including second hidden div content to hold the form working and test on fiddle http://jsfiddle.net/7e2XU/21/
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
<div id="popover-content" style="display: none" >
<div class="container" style="margin: 25px; ">
<div class="row" style="padding-top: 240px;">
<label id="sample">
<form id="mainForm" name="mainForm" method="post" action="">
<p>
<label>Name :</label>
<input type="text" id="txtName" name="txtName" />
</p>
<p>
<label>Address 1 :</label>
<input type="text" id="txtAddress" name="txtAddress" />
</p>
<p>
<label>City :</label>
<input type="text" id="txtCity" name="txtCity" />
</p>
<p>
<input type="submit" name="Submit" value="Submit" />
</p>
</form>
</label>
</div>
</div>
</div>
<a href="#" style="margin: 40px 40px;" class="btn btn-large btn-primary" rel="popover" data-content='' data-placement="left" data-original-title="Fill in form">Open form</a>
<script>
$('a[rel=popover]').popover({
html: 'true',
placement: 'right',
content : function() {
return $('#popover-content').html();
}
})
</script>
Solution 7 - Javascript
A complete solution for anyone that might need it, I've used this with good results so far
JS:
$(".btn-popover-container").each(function() {
var btn = $(this).children(".popover-btn");
var titleContainer = $(this).children(".btn-popover-title");
var contentContainer = $(this).children(".btn-popover-content");
var title = $(titleContainer).html();
var content = $(contentContainer).html();
$(btn).popover({
html: true,
title: title,
content: content,
placement: 'right'
});
});
HTML:
<div class="btn-popover-container">
<button type="button" class="btn btn-link popover-btn">Button Name</button>
<div class="btn-popover-title">
Popover Title
</div>
<div class="btn-popover-content">
<form>
Or Other content..
</form>
</div>
</div>
CSS:
.btn-popover-container {
display: inline-block;
}
.btn-popover-container .btn-popover-title, .btn-popover-container .btn-popover-content {
display: none;
}
Solution 8 - Javascript
I work in WordPress a lot so use PHP.
My method is to contain my HTML in a PHP Variable, and then echo the variable in data-content
.
$my-data-content = '<form><input type="text"/></form>';
along with
data-content='<?php echo $my-data-content; ?>'