У меня есть загрузочный поповер с функциональностью, аналогичной x-editable
Идея состоит в том, чтобы получить поповер с текстовой областью, чтобы редактировать намного меньшую ячейку в таблице.
Я динамически добавляю строки в таблицу, и у них нет идентификаторов.Как добавить поповер к вызывающему элементу с параметром контейнера.
т.е. container: self (для всего, что удовлетворяет селектору, rel = "popover")
// add listeners for buttons in popovers
$('body').on('click', '.popover button', function() {
if (this.id == "popover_save") {
var text = $('.popover #editable_popover_content_textarea').val();
//$(this).closest('._popover_editable').find('input').val(text);
};
$('._popover_editable').popover('hide');
});
// add listeners to _popover_editable popovers
$("body").popover({
toggle: 'popover',
placement: 'right',
title: 'Edit content',
html: true,
// How do I attach the popover to the calling element ._popover_editable
// container: this,
selector: '[rel="popover"]',
content: function() {
text = $(this).closest('._popover_editable').find('input').val()
$('#editable_popover_content_textarea').text(text)
$('._popover_editable').not(this).popover('hide');
return $('#editable_popover_content_wrapper').html();
},
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<td>
<div class='_popover_editable' rel="popover">
<input type="text" class="description form-control _table-input" value="someting" readonly></input>
</div>
</td>
<div id="editable_popover_content_wrapper" style="display: none">
<textarea id=editable_popover_content_textarea></textarea>
</br>
<button type="button" id='popover_save' class="btn btn-outline-primary btn-action _popover-save">Ok</button>
<button type="button" id='popover_close' class="btn btn-outline-primary btn-action _popover-cancel">Cancel</button>
</div>