javascripttwitter-bootstrappopover
selected value on textbox using javascript issue
Im try to use my popover selected list item display text box, its not display , what about this issue? please help me to fix this issue, im try to do it but not fix this,look code this is structure ,you can understand it
My code part Html
$(document).ready(function() {
$('.popr').popr();
});
$(document).on('click', '#feugait', function () {
alert('Feugait');
});
$(document).ready(function() {
$('[data-toggle="popover"]').popover();
$('[data-toggle="popover"]').on("click",function(){
$("#messageTextBox").val($(this).find("div").text());
});
});
(function($) {
$.fn.popr = function(options) {
var set = $.extend( {
'speed' : 200,
'mode' : 'bottom'
}, options);
return this.each(function() {
var popr_cont = '.popr_container_' + set.mode;
var popr_show = true;
$(this).click(function(event)
{
$('.popr_container_top').remove();
$('.popr_container_bottom').remove();
if (popr_show)
{
event.stopPropagation();
popr_show = false;
}
else
{
popr_show = true;
}
var d_m = set.mode;
if ($(this).attr('data-mode'))
{
d_m = $(this).attr('data-mode')
popr_cont = '.popr_container_' + d_m;
}
var out = '<div class="popr_container_' + d_m + '"><div class="popr_point_' + d_m + '"><div class="popr_content">' + $('div[data-box-id="' + $(this).attr('data-id') + '"]').html() + '</div></div></div>';
$(this).append(out);
var w_t = $(popr_cont).outerWidth();
var w_e = $(this).width();
var m_l = (w_e / 2) - (w_t / 2);
$(popr_cont).css('margin-left', m_l + 'px');
$(this).removeAttr('title alt');
if (d_m == 'top')
{
var w_h = $(popr_cont).outerHeight() + 39;
$(popr_cont).css('margin-top', '-' + w_h + 'px');
}
$(popr_cont).fadeIn(set.speed);
});
$('html').click(function()
{
$('.popr_container_top').remove();
$('.popr_container_bottom').remove();
popr_show = true;
});
});
};
})(jQuery);.popr
{
cursor: pointer;
}
.popr a
{
color: #333;
text-decoration: none;
border: 0;
}
.popr-box
{
display: none;
}
.popr_content
{
background-color: #fff;
padding: 7px 0;
margin: 0;width: 200px;
height: auto;
}
.popr-item
{
font-family: sans-serif;
color: #333; text-align: center;
font-size: 16px;
padding: 4px 29px 5px 29px; border-bottom: solid 1px #fbeeee;
}
.popr-item:hover
{
color: #333;
background-color: #dcdcdc;
}
.popr_container_bottom
{
display: none;
position: absolute;
margin-top: 10px;
box-shadow: 2px 2px 5px #f9f9f9;
z-index: 1000;
}
.popr_container_top
{
display: none;
position: absolute;
box-shadow: 2px 2px 5px #f9f9f9;
z-index: 1000;
}
.popr_point_top
{
position: relative;
background: #fff;
border: 1px solid #dcdcdc;
}
.popr_point_top, .popr_point_bottom {
position: relative;
background: #fff;
border-radius: 12px;
}
.popr_point_top:after, .popr_point_top:before
{
position: absolute;
pointer-events: none;
border: solid transparent;
top: 100%;
content: "";
height: 0;
width: 0;
}
.popr_point_top:after
{
border-top-color: #fff;
border-width: 8px;
left: 50%;
margin-left: -8px;
}
.popr_point_top:before
{
border-top-color: #dcdcdc;
border-width: 9px;
left: 50%;
margin-left: -9px;
}
.popr_point_bottom:after, .popr_point_bottom:before
{
position: absolute;
pointer-events: none;
border: solid transparent;
bottom: 100%;
content: "";
height: 0;
width: 0;
}
.popr_point_bottom:after
{
border-bottom-color: #fff;
border-width: 8px;
left: 50%;
margin-left: -8px;
}
.popr_point_bottom:before
{
border-bottom-color: #dcdcdc;
border-width: 9px;
left: 50%;
margin-left: -9px;
}
.popover-title {
text-align: center; color: red;
}
.custom-popover li {
border: none!important;
text-align: center;
}
.custom-popover li:nth-child(2) {
border-top: 1px solid #ccc!important;
}
.custom-popover li:last-child {
border-top: 1px solid #ccc!important;
}
#title-pop {font-size: 12px; color: #b89981;}<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class=" popr form-group" data-id="1">
<a href="#" data-placement="bottom" title="Bill Category"><input class="form-control input-sm" id="messageTextBox" type="text" placeholder="Select category">
</a>
</div>
<div class="form-group">
<input class="form-control input-sm" id="Description" type="text" placeholder="Description">
</div>
<div class="form-group">
<input class="form-control input-sm" id="Date" type="text" placeholder="Date">
</div>
<div class="form-group">
<input class="form-control input-sm" id="Amount" type="text" placeholder="Amount">
</div>
<!-- loaded popover content -->
<div id="popover-section selectBox">
<div class="selectBox" class="popr-box" data-box-id="1">
<div id="title-pop" class=" popr-item">Bill category
</div>
<a href="#" title="Menu" data-toggle="popover" data-trigger="hover"><div class="popr-item">Staff Payment
</div></a>
<a href="#" title="Menu" data-toggle="popover" data-trigger="hover"><div class="popr-item">Food and Beverage
</div></a>
<a href="#" title="Menu" data-toggle="popover" data-trigger="hover"><div class="popr-item">Car rent
</div></a>
</div>
</div>Solution
what you need to know, element id can be only one on page but you can have many class, you call jQuery plugin .popr() without it being defined, call it after.
(function($) {
$.fn.popr = function(options) {
var set = $.extend({
'speed': 200,
'mode': 'bottom'
}, options);
return this.each(function() {
var popr_cont = '.popr_container_' + set.mode;
var popr_show = true;
$(this).click(function(event) {
$('.popr_container_top').remove();
$('.popr_container_bottom').remove();
if(popr_show) {
event.stopPropagation();
popr_show = false;
}
else {
popr_show = true;
}
var d_m = set.mode;
if($(this).attr('data-mode')) {
d_m = $(this).attr('data-mode')
popr_cont = '.popr_container_' + d_m;
}
var out = '<div class="popr_container_' + d_m + '"><div class="popr_point_' + d_m + '"><div class="popr_content">' + $('div[data-box-id="' + $(this).attr('data-id') + '"]').html() + '</div></div></div>';
$(this).append(out);
var w_t = $(popr_cont).outerWidth();
var w_e = $(this).width();
var m_l = (w_e / 2) - (w_t / 2);
$(popr_cont).css('margin-left', m_l + 'px');
$(this).removeAttr('title alt');
if(d_m == 'top') {
var w_h = $(popr_cont).outerHeight() + 39;
$(popr_cont).css('margin-top', '-' + w_h + 'px');
}
$(popr_cont).fadeIn(set.speed);
});
$('html').click(function() {
$('.popr_container_top').remove();
$('.popr_container_bottom').remove();
popr_show = true;
});
});
};
})(jQuery);
$(document).ready(function() {
$('.popr').popr();
$('[data-toggle="popover"]').popover();
$(document).on("click", '[data-toggle="popover"]', function() {
$("#messageTextBox").val($(this).text());
});
$(document).on('click', '#feugait', function() {
alert('Feugait');
});
});.popover-section{display:none}
.popr {
cursor: pointer;
}
.popr a {
color: #333;
text-decoration: none;
border: 0;
}
.popr-box {
display: none;
}
.popr_content {
background-color: #fff;
padding: 7px 0;
margin: 0;
width: 200px;
height: auto;
box-shadow: 1px 2px 2px #e4acac;
border:1px solid #eee
}
.popr-item {
font-family: sans-serif;
color: #333;
text-align: center;
font-size: 16px;
padding: 4px 29px 5px 29px;
border-bottom: solid 1px #fbeeee;
}
.popr-item:hover {
color: #333;
background-color: #dcdcdc;
}
.popr_container_bottom {
display: none;
position: absolute;
margin-top: 10px;
box-shadow: 2px 2px 5px #f9f9f9;
z-index: 1000;
}
.popr_container_top {
display: none;
position: absolute;
box-shadow: 2px 2px 5px #f9f9f9;
z-index: 1000;
}
.popr_point_top {
position: relative;
background: #fff;
border: 1px solid #dcdcdc;
}
.popr_point_top,
.popr_point_bottom {
position: relative;
background: #fff;
border-radius: 12px;
}
.popr_point_top:after,
.popr_point_top:before {
position: absolute;
pointer-events: none;
border: solid transparent;
top: 100%;
content: "";
height: 0;
width: 0;
}
.popr_point_top:after {
border-top-color: #fff;
border-width: 8px;
left: 50%;
margin-left: -8px;
}
.popr_point_top:before {
border-top-color: #dcdcdc;
border-width: 9px;
left: 50%;
margin-left: -9px;
}
.popr_point_bottom:after,
.popr_point_bottom:before {
position: absolute;
pointer-events: none;
border: solid transparent;
bottom: 100%;
content: "";
height: 0;
width: 0;
}
.popr_point_bottom:after {
border-bottom-color: #fff;
border-width: 8px;
left: 50%;
margin-left: -8px;
}
.popr_point_bottom:before {
border-bottom-color: #dcdcdc;
border-width: 9px;
left: 50%;
margin-left: -9px;
}
.popover-title {
text-align: center;
color: red;
}
.custom-popover li {
border: none!important;
text-align: center;
}
.custom-popover li:nth-child(2) {
border-top: 1px solid #ccc!important;
}
.custom-popover li:last-child {
border-top: 1px solid #ccc!important;
}
#title-pop {
font-size: 12px;
color: #b89981;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class=" popr form-group" data-id="1">
<a href="#" data-placement="bottom" title="Bill Category">
<input class="form-control input-sm" id="messageTextBox" type="text" placeholder="Select category">
</a>
</div>
<div class="form-group">
<input class="form-control input-sm" id="Description" type="text" placeholder="Description">
</div>
<div class="form-group">
<input class="form-control input-sm" id="Date" type="text" placeholder="Date">
</div>
<div class="form-group">
<input class="form-control input-sm" id="Amount" type="text" placeholder="Amount">
</div>
<!-- loaded popover content -->
<div class="popover-section selectBox">
<div class="selectBox" class="popr-box" data-box-id="1">
<div id="title-pop" class=" popr-item">Bill category
</div>
<a href="#" title="Menu" data-toggle="popover" data-trigger="hover">
<div class="popr-item">Staff Payment
</div>
</a>
<a href="#" title="Menu" data-toggle="popover" data-trigger="hover">
<div class="popr-item">Food and Beverage
</div>
</a>
<a href="#" title="Menu" data-toggle="popover" data-trigger="hover">
<div class="popr-item">Car rent
</div>
</a>
</div>
</div>- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices