Get hidden input value and view in popovers JavaScript - javascript

Did read data from hidden and view in a modal window - it worked. Changed from modal to popovers - stopped working. I do not know how to correct. Help please, tried a lot of things. http://jsfiddle.net/popovers
<div id="myPopoverContent">
.....
<span id="ip_view">no ip</span>
</div>
<a tabindex='0' class='btn btn-danger' role='button' id='pop' data-toggle='popover' data-trigger='focus'>
Check
<input id='ip_id' type='hidden' value='94.45.43.42'>
</a>
<a tabindex='0' class='btn btn-danger' role='button' id='pop' data-toggle='popover' data-trigger='focus'>
Check
<input id='ip_id' type='hidden' value='83.218.164.204'>
</a>
<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle=popover]').popover({
content: $('#myPopoverContent').html(),
placement: 'bottom',
html: true
}).click(function() {
var ip = this.firstElementChild.value;
document.getElementById('ip_view').innerHTML = ip;
$(this).popover('show');
});
});
</script>
I do not understand why is not working. In modal or alert - work http://jsfiddle.net/modal

The content of the popup is set on create, so even though you update the value inside myPopoverContent, the content was set to the original html of the div when the document was ready (which is <span id="ip_view">no ip</span>). Here's a better and cleaner way of getting the content when the popup is opened.
Code
Fiddle
$('[data-toggle=popover]').popover({
content: function(){return $(this).children("#ip_id").val();},
placement: 'bottom'
});
Edit: Had the wrong fiddle link

Related

Button in bootstrap popover loses attributes

I have a bootstrap popover for my django website that opens when a button is clicked. Inside this popover is another button. I am currently doing this by putting HTML in the 'data-content' of the popover, seen below:
<a tabindex="0" id="{{prod.title}}" value="{{prod.id}}" type="button"
class="btn btn-secondary btn-light mt-3 mb-0"
data-toggle="popover"data-trigger="focus" data-html="true" data-content="
<div class='btn-group-vertical'>
<a type='button' data-show-value='{{prod.id}}' id='{{prod.id}}'
class='btn btn-secondary btn-pop wish'>Add to Wishlist</a>
</div>"
>More Options</a>
I need to get the 'data-show-value' in jQuery, and I am currently using the following which triggers when this button is clicked:
$(document).on('click', '.wish', function () {
var thisButton = $(this)[0]
console.log(thisButton);
var prodID = $(this).data("show-value");
}
However, all this does is return 'undefined'.
I used console.log(thisButton) to see what the button code is displaying as, and it is this:
<a id=10 class='btn btn-secondary btn-pop wish'>Add to Wishlist</a>
This explains why the 'data-show-value' is returning as undefined, as the attribute itself is not rendering on the web page.
Why is this?
.wish is a class and there may be a lot of elements that has this class you need to specify an id instead:
$(document).on('click', '.wish', function () {
var thisId = $(this).attr('id');
console.log(thisId); //check if this is the id of the element you want to trigger
var prodID = $('#'+thisId).data("show-value");
}

select attribute of an element inside data-content of a popover

I was using Bootstrap 4 popover and suddenly got stuck with this issue. The problem is I can not select the attribute inside data-content of a popover. Here is the code:
HTML
<a data-toggle='popover' data-placement='left' tabindex='0' data-trigger='focus' data-html='true' data-content="<div class='pop-div'>Options
If you look closely, data-content attribute has two <a> tag inside it. I am using JQuery to select the attribute (data-id) of this inner <a> tag. I've tried $(this).attr('data-id'); which returns undefined. So, my question is, how to get the attribute of this <a> [To be clear, the <a> which has a class .edit_web_ac].
I've tried these solutions, But none of these fully match with my situation.
How to select Element Id inside attribute tag with jQuery?
How to select an element based on the property of an object inside a data attribute?
Any suggestion is highly appreciated.
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<a data-toggle='popover' data-placement='left' tabindex='0' data-trigger='focus' data-html='true' data-content="<div class='pop-div'>Options
<script>
$(document).ready(function(){
$("[data-toggle='popover']").popover({
delay: 100
});
$('body').on('click', '.edit_web_ac', function (e) {
e.preventDefault();
var content = $(this).attr('data-id');
alert(content); //returns 'undefined'
})
})
</script>
</body>
</html>
Try changing the data-content with seperate div and call the id through jquery content
<a href = '#' data-toggle='popover' data-placement='left' tabindex='0' data-trigger='focus'>Options</a>
Remove data-content from your anchor tag and place it as separate div
<div class='pop-div' style = 'display:none;'><a href='#' class='text-center edit_web_ac' data-id='{$row['id']}' data-table='web_accounts'>Edit</a><br><a href='#' class='text-center del_web_ac'>Delete</a></div>
and in the jquery add
$(function () {
$('[data-toggle="popover"]').popover({
toggle: 'popover',
placement: 'right',
title: 'Options',
html: true,
content: function () {
return $('.pop-div').html();
},
});
});
Hope it works!
I would suggest to put the HTML content in a separate div with an ID:
<a data-toggle='popover' data-placement='left' tabindex='0' data-trigger='focus' data-html='true' data-content="YOURID">Options</a>
<div id="YOURID">
<div class='pop-div'>
<a href='#' class='text-center edit_web_ac' data-id='{$row['id']}' data-table='web_accounts'>Edit</a><br><a href='#' class='text-center del_web_ac'>Delete</a>
</div>
</div>
In JavaScript / jQuery something like this:
var content = $('#YOURID .edit_web_ac').data('id);

Can't display html in Bootstrap 3 popover

I have a web page to test out a Bootstrap 3 popover and need to display html in the body.
Here is the html for the button that displays the popover and a hidden div that I use as a template for the popover body.
<button class="btn btn-default" id="status-add" type="button" data-toggle="popover">Add</button>
<div id="popover-content" class="hidden">
<form method="post">
<div class="form-group">
<label class="control-label">Room Status</label>
<input class="form-control" type="text">
</div>
<button class="btn btn-default btn-xs" type="submit">Submit</button>
</form>
</div>
Here is the javascript to display the popover. My apologies for the bad formatting, pasting it in as code doesn't work for some reason.
$(function () {
$('[data-toggle="popover"]').popover()
})
$('#status-add').popover({
trigger: 'click',
html: true,
title: "Add new room status",
content: function() {
var html=$("#popover-content").html()
console.log(html)
return html
},
placement: 'right'
});
The popover is displayed with the correct title but the body is empty. I can see from the console log that the html variable has the correct html in it. I also tried setting the popover html setting to false which makes the html appear in the body as plain text.
Any ideas?
I found the answer to this, it's a bootstrap bug documented at https://github.com/twbs/bootstrap/issues/28290. The solution is to include sanitize: false in the popover settings array.

Jquery "before" add close tag of button

i have following HTML element:-
<a href="http://localhost/wordpress/post-2/#more-4" class="more-link">
I tried to add a button before span (put span between button) with jQuery before function:
<script>
$(document).ready(function() {
$("a.more-link").before("<button class=\"btn btn-default\">");
});
</script>
The output is:
<button class="btn btn-default"></button>
<a href="http://localhost/wordpress/post-2/#more-4" class="more-link">
<span aria-label="Continue reading post 2">(more…)</span>
</a>
The following </button> tag is added automatically! Why? Can I not add a span between button tags? How can I prevent that or is there any way to add span between button tags?
$(document).ready(function() {
$("a.more-link").before("<button class=\"btn btn-default\">");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-default"></button>
<a href="http://localhost/wordpress/post-2/#more-4" class="more-link">
<span aria-label="Continue reading post 2">(more…)</span>
</a>
You can't open a tag without close it that not a valid HTML, so the browser will always validate your HTML code by adding the closed tag.
If you want to wrap your span by button you could add it in your js using the jQuery method wrap() :
$( "a.more-link" ).wrap("<button class='btn btn-default'>");
NOTE : If you do so your HTML isn't valid since you shouldn't put an anchor a inside a button tag.
(PLEASE TAKE A LOOK TO Nesting <a> inside <button> doesn't work in Firefox).
Hope this helps.
$( "a.more-link" ).wrap("<button class='btn btn-default'/>");
console.log ( $('button')[0].outerHTML );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
My link
$(document).ready(function(){
$( "a.more-link" ).before( "<button class=\"btn btn-default\"><span>I'm a span</span></button>" );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://localhost/wordpress/post-2/#more-4" class="more-link">
zakaria is right you can't open a tag without closing it, wrap span within button, use this
$( "a.more-link span" ).wrap("<button class='btn btn-default'>");
Use jquery wrap function.
<script>
$(document).ready(function(){
$( "a.more-link" ).wrap( "<button class=\"btn btn-default\">" );
});
</script>
I'm not sure what you exactly need, but try if wrap function is what you are looking for:
$( "a.more-link" ).wrap( "<button class=\"btn btn-default\">" )

How to enable bootstrap popover to open and close multiple times?

I want a popover using bootstrap that can be closed through clicking on a button within the popup. But I after closing, I have to click twice on the button to open the popover again.
I currently have the following implementation:
HTML:
<button type="button" id="example" class="btn btn-primary">example</button>
JAVASCRIPT:
$(document).ready(function() {
$("#example").popover({
placement: 'bottom',
html: 'true',
title : '<span class="text-info"><strong>Title</strong></span>'+
'<button type="button" id="close" class="close"
onclick="$("#example").popover("hide");
">×</button>',
content : 'Content'
});
});
How can I implement a close-button in the popover without having to click twice on the button to re-open the popover?
You can fix this by adding click() event.
$(document).ready(function() {
$("#example").popover({
placement: 'bottom',
html: 'true',
title : '<span class="text-info"><strong>Title</strong></span>'+
'<button type="button" id="close" class="close"
onclick="$("#example").popover("hide").click();
">×</button>',
content : 'Content'
});
});

Categories