Can anyone explain how to use popover on a table element using Codeigniter?
<td> <span id="popover" data-toggle="popover" data-content="<?php echo $userData[$i]->name; ?>"></span><?php echo custom_echo($userData[$i]->name,15); ?></td>
And javascript code is
<script>
$(document).ready(function() {
$("#popover").popover({
html: true,
animation: false,
placement: "bottom"
});
});
</script>
What exactly is not working?
Using your code, I have guessed how output html would look like:
<table>
<tr>
<td><span id="popover" data-toggle="popover" data-content="user name in popover">user name in span</span></td>
</tr>
</table>
I have also added your script in onLoad event:
$("#popover").popover({
html: true,
animation: false,
placement: "bottom"
});
I have included some resources:
jQuery
bootstrap.min.js
bootstrap.min.css
And it all works fine, as you can see in this jsfiddle: http://jsfiddle.net/d2k8zzsw/1/
Related
Relatively new to javascript and jquery and I have a couple of questions on event listeners in jquery.
So I have an HTML form that dynamically generates a table.
The objective is to create an event such that when I hover over a certain cell, a popup will appear next to it.
I tried this:
HTML - The tag the JS is connected to
let td_inter = document.createElement('td')
td_inter.innerHTML = "test"
td_inter.classList = 'popover'
td_inter.setAttribute('data-html', 'test')
td_inter.setAttribute('data-position',"bottom left")
td_inter.setAttribute('data-variation',"very wide")
JS
$(document).on("mouseover", 'td.popover', function() {
$('td.popover')
.popup({
on: 'hover',
});
})
The reason why I tried this is that I have a previous static div above with the following code that worked.
HTML - The tag the JS is connected to
<div class='thirteen wide field'>
<div class='desc' id='test_desc' data-html="" data-position="bottom left" data-variation="very wide">
<label for="test">test label</label>
</div>
</div>
JS
$('div.desc')
.popup({
on: 'hover',
});
I realize I needed to use the .on to make it work for the dynamically generated table, but it seems not to be working. The event seems to work when I hover (I tried just to console.log) but I cant get the popup to show. Do I have to place it in a div?
additional background:
I am using semantic ui if that helps.
I also included these resources if this helps:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
can you just try below code in JS instead of using document.mouseover:
$('td.popover')
.popup({
on: 'hover',
});
To all those interested, I had to restructure my dynamic table to generate it into something like this:
HTML:
<table class="ui table">
<thead>
<tr>
<th class="one wide">Key</th>
<th class="two wide">Value</th>
</tr>
</thead>
<tbody>
<tr class="popover">
<td>1</td>
<td>Foo</td>
</tr>
<div class="ui popup mini transition hidden">Foo Longer</div>
</tbody>
</table>
JS:
$(document).on('mouseover', '.popover', function() {
$(this)
.popup({
popup: $('div.popup'),
inline:true,
on:'hover',
position: 'right center',
lastResort: 'right center',
}).popup('show');
});
div.popup is set to hidden and will become visible once the event is satisfied (mouseover in this case).
sample: https://jsfiddle.net/gr0e4cwt/11/
I have been trying to find a way to dynamically modify the content of a bootstrap popover using Javascript, however the method i have come across so far have not worked :
<!--object with the popover-->
<input id="popoverlist" type="text" name="poplist" placeholder="Enter data" data-html="true" data-content="" rel="popover" data-placement="bottom" data-original-title="pop list" >
$('#popoverlist').popover({
offset: 10,
trigger: 'manual',
animate: false,
html: true,
placement: 'left',
template: '<div class="popover" onmouseover="$(this).mouseleave(function() {$(this).hide(); });"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
}).click(function(e) {
e.preventDefault() ;
}).mouseenter(function(e) {
$(this).popover('show');
});
The methods i have been trying to use to set the html content are :
$('#popoverlist').data('bs.popover').html("<p>New content</p>");
//and using the inner HTML
document.getElementsByClassName("popover-content")[0].innerHTML = '<p>New content</p>';
However neither of those methods change the html data content. I would appreciate any help on this to point me in the correct direction :)
Your second idea works, but you need to invoke it after the popover-content has been created.
The popover isn't created until the first time it is shown, and is recreated after each call to show. Thus, you need to change the content after $(this).popover('show');.
I've included a snippet showing this in action:
$('#popoverlist').popover({
offset: 10,
trigger: 'manual',
animate: false,
html: true,
placement: 'bottom',
template: '<div class="popover" onmouseover="$(this).mouseleave(function() {$(this).hide(); });"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
}).click(function(e) {
e.preventDefault() ;
}).mouseenter(function(e) {
$(this).popover('show');
// dynamically change content after show
document.getElementsByClassName("popover-content")[0].innerHTML = '<p>New content</p>';
});
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<input id="popoverlist" type="text" name="poplist" placeholder="Enter data" data-html="true" data-content="" rel="popover" data-placement="bottom" data-original-title="pop list" >
I am using below code also find the code here .Could you please help on this.
<table>
<tbody>
<tr class="myrow1">
<td class="cpCode">
<span rel="replace">Need PopOver</span>
</td>
</tr>
jQuery(function($) {
$('[rel=replace]').popover({trigger: 'hover',
placement : 'top',
html: 'true',
content :'Hello'
});
});
I saw your fiddle, you missed bootstrap/jquery files, here is the same fiddle and it is working fine
$(document).ready(function(){
$('[rel="replace"]').popover({
trigger: 'hover',
placement : 'bottom',
html: 'true',
content :'Hello'
});
});
I am creating a user information edit dialog that fetches edit-user information using $.post but I'm unable to close this dialog since dialog wasn't initialized using any HTML element.
I am trying $('#editUser').dialog('close') but it won't work.
Here is the main body:
<div id='userInfo'>
<div class='user'>
<span class='userId'>1</span>
<span class='userName'>John</span>
</div>
<div class='user'>
<span class='userId'>2</span>
<span class='userName'>Jane</span>
</div>
and here is the script used to create the dialog:
$(function() {
$('.user').click(function() {
var uid = $(this).find('span.userId').html();
$post('/e-val/user/edit.php', {id: uid}, function(html) {
$(html).dialog();
});
});
$('body').on('click', '#closeEditDialog', function() {
$('#editUser').dialog('close')
});
});
The dialog opens up fine as expected but isn't closing as it should.
This is the HTML for the dialog as returned by the ajax script.
<div id='editUser'>
<table>
<tr>
<td>Username</td>
<td><?php echo $user['name'] ?></td>
</tr>
<tr>
<td>Email</td>
<td><?php echo $user['email'] ?></td>
</tr>
<tr>
<td colspan='2'>
<input type='button' id='closeEditDialog' value='close' />
</td>
</tr>
</table>
</div>
What can I do to close it? I can use $('#editUser').remove() to remove the dialog, but I need to close it not remove it.
var mydialog;
$(function() {
$('.user').click(function() {
var uid = $(this).find('span.userId').html();
$post('/e-val/user/edit.php', {id: uid}, function(html) {
mydialog = $(html);
mydialog.appendTo('body');
mydialog.dialog();
});
});
$('body').on('click', '#closeEditDialog', function() {
mydialog.dialog('close')
});
});
You might need to insert that html into your DOM before creating your dialog.
$("body").append(html);
$("#editUser").dialog();
Well at least if your dialog shows up this way, there is nothing preventing it from closing, you're using the same selector.
EDIT
Also, do not forget that .dialog() will initialize the widget, try not calling it more than once. Using .dialog("open") instead.
Best would be even to already add the dialog's div into your html, and then append your server side code in it to dynamically update the content of the dialog.
$('#editUser').dialog('close') won't work because you've never used $('#editUser') to initialize the dialog, so you cannot use it either to close it, You need to use the same handler that was used to create it.
As answered here by Gil & Trinh :
Just add the dialog content to the DOM first and then initialize the dialog:
$post('/e-val/user/edit.php', {id: uid}, function(html) {
$(html).appendTo('body');
$('#editUser').dialog( {autoOpen: false} );
});
autoOpen: false will prevent the dialog from opening by itself and it can be opened using $('#editUser').dialog('open') anytime.
I want to display tool-tips on my website, and I'm using this code: http://flowplayer.org/tools/demos/tooltip/table.html
I'm using a while loop to create table rows <tr>. Here is how my tool-tip <div> looks like:
<td class="maandgem">€ <?= round($monthavg, 2); ?></td>
<div id="tooltip" class="tooltip">
Shipping: <?= $row['price_shipping']; ?><br />
Price: <?= $row['price']; ?><br /><br />
Total: <?php echo $row['price'] + $row['price_shipping'] + ($row['abo_price'] * $row['abo_time']); ?>
</div>
And this works as planned, it calculates the total price for each <tr>. The problem I'm having is that when I hover over the <td class=maandgem> it always shows the same first tool-tip.
So, each <TD> shows only 1 tool-tip, the first one created. Instead of an unique tool-tip for each row. The PHP part works - there are unique <TD>'s being created. I'm using this code (its the default, I don't understand jQuery much)
$(document).ready(function() {
$(".maandgem").tooltip({
tip: '#tooltip',
position: 'bottom left',
delay: 0
});
});
I'm also including this .js, and I have a basic style sheet for the tool-tip.
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
I guess that's because you use an id for the tooltip, and an id have to be unique, therfore jquery only selects the first one.
Try use a class-attribute instead, and select on that.
Yes, If class will be used instead of ID then it will works on loop also.
I have tested it and working fine.
<link rel="stylesheet" href="jquery-ui-1.10.4.custom.css">
<script src="jquery-1.10.2.min.js"></script>
<script src="jquery-ui-1.10.4.custom.js"></script>
<script>
$(function() {
$( ".show-option" ).tooltip({
show:
{
effect: "slideDown",
delay: 250
},
position:
{
my: "center top",
at: "center"
}
});
});
</script>
</head>
<body>
<h2 class="show-option" title="Testing Tooltip">ToolTip</h2>
</body>