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);
Related
I'm very new to web development stuff so I'm having trouble googling the correct terms here.
The sidebar navigation is working, but the scripts are ugly and redundant.
Is there a way to clean this up? Like store the link id and html file location in an array and just have one script that does the lookup?
I don't need "code for me", just a nudge in the right direction.
Example:
<!DOCTYPE html>
<html>
<link href="./styles/main_style_sheet.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#navigation_link_1').click(function(){
$('#content_area').load('location_1.html');
});
});
</script>
<script>
$(document).ready(function () {
$('#navigation_link_2').click(function(){
$('#content_area').load('location_2.html');
});
});
</script>
<script>
$(document).ready(function () {
$('#navigation_link_3').click(function(){
$('#content_area').load('location_3.html');
});
});
</script>
<script>
$(document).ready(function () {
$('#navigation_link_4').click(function(){
$('#content_area').load('location_4.html');
});
});
</script>
<body>
<div class="container">
<div id="concept-sidebar"">
<h4 style="text-indent: 0px;"> <strong> My Sidebar </strong></h4>
<div class="container" style="width:100%">
<div class="list-group">
<a id="navigation_link_1"
class="list-group-item custom"
> First Item </a>
<a id="navigation_link_2"
class="list-group-item custom"> Slowly Changing Dimensions (SCD) </a>
<a id="navigation_link_3"
class="list-group-item custom"> Important System Fields
</a>
<a id="navigation_link_4"
class="list-group-item custom"> Reference Data
</a>
</div>
</div>
</div>
</div>
</body>
</html>
There are multiple ways to solve this (and since you asked for a direction and not a solution I'll give give you a general instruction for one of the solutions:):
Instead of settings the click-event-handler on each element - select all the relevant elements and have a click event on all of them:
$('.list-group-item').click(function(){ ... })
The selection here is on all items that have the class list-group-item, which in your case is the <a> elements you are looking for.
Extract the relevant id from the <a> you have (for you can use regex for that, for example). Another option - use the data-* attribute and get the number from that attribute (<a data-id="1"> and $(el).data('id')).
Load the content based on the id you just got:
$('#content_area').load('location_' + id + '.html');
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\">" )
<a href='#' class='lorem'>
foo <div class='ipsum'>bar</div>
</a>
In this code excerpt, I want to get only foo. But if I call $('.lorem').text(), I get div.ipsum also. (which I don't want it)
jQuery or Javascript, both are OK for me.
You are trying to get the text of the first child of the anchor so
var text = $('.lorem').contents().first().text();
snippet.log('text: ' + text)
<script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#' class='lorem'>
foo <div class='ipsum'>bar</div>
</a>
Use a span?
<a href='#' class='lorem'>
<span>foo</span> <div class='ipsum'>bar</div>
</a>
And then:
$('.lorem span').text()
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
This solution is ok for one button cases: Is it possible to use a div as content for Twitter's Popover
But in my page I have a bunch of popovers (say 50-100).
So I need to modify this solution.
This wa #jävi's solution:
$(document).ready(function(){
$('.danger').popover({
html : true,
content: function() {
return $('#popover_content_wrapper').html();
}
});
});
Each of my button has its own id.
<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a>
<div id="popover_div1" style="display: none">
<div>This is your div content</div>
</div>
<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a>
<div id="popover_div2" style="display: none">
<div>This is your div content</div>
</div>
So how can I rewrite this javascript code snippet to cover all my buttons?
Just fought with this myself. You need to put the id in the element that triggers the popover. Use a custom data attribute like so (called 'data-id'):
<a class='danger' data-id="popover_div1" data-placement='above' title="Popover Title" href='#'>Click</a>
Then you can modify your javascript slightly to grab the data-id attribute value programmatically:
$(document).ready(function(){
$('.danger').popover({
html : true,
content: function() {
return $($(this).attr('data-id')).html();
}
});
});
If you don't want to pollute your source element with another data-* attribute, here is a simple and generic way to use the data-content attribute as text or CSS selector:
$('[data-toggle="popover"]').popover({
html: true,
content: function() {
var content = $(this).data('content');
try { content = $(content).html() } catch(e) {/* Ignore */}
return content;
}
});
You can now use the data-content attribute with a text value:
<a data-toggle="popover" data-title="Popover Title" data-content="Text from data-content attribute!" class="btn btn-large" href="#">Click to toggle popover</a>
...or use the data-content attribute with a CSS selector value:
<a data-toggle="popover" data-title="Popover Title" data-content="#countdown-popup" class="btn btn-large" href="#">Click to toggle popover</a>
<div id="countdown-popup" class="hide">Text from <code>#countdown-popup</code> element!</div>
You can test this solution here: http://jsfiddle.net/almeidap/eX2qd/
...or here, if you are using Bootstrap 3.0: http://jsfiddle.net/almeidap/UvEQd/ (note the data-content-target attribute name!)
You can do it without additional button attributes like this:
http://jsfiddle.net/isherwood/E5Ly5/
.popper-content {
display: none;
}
<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content">My first popover content goes here.</div>
<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content">My second popover content goes here.</div>
<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content">My third popover content goes here.</div>
$('.popper').popover({
container: 'body',
html: true,
content: function () {
return $(this).next('.pop-content').html();
}
});
Store the id of the div containing the popover html inside the rel attribute of the a element
<a rel="popover_div2" ... >click</a>
And then get the rel of the click anchor inside your click listener (not sure how the popover method stores it, but I'm sure it does):
var myRel = $(this).attr(rel);
return $(myRel).html();
For me it has do be
data-id="#popover_div1"
in the HTML for the button (with a # for addressing the id of the div).