I'm trying to create dynamically generated tooltip/popover content for a site using bootstrap (3.1), flask and python.
I have hyper-linked items in a table. When I mouse over those hyperlinks, I want a tooltip to appear; when the user clicks on the hyperlink I want them to go to the individual item page. Code (shortened for brevity):
<table>
<thead>
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>{% include 'itemlink.html' %}</td>
<td>12</td>
<td>red</td>
</tbody>
</table>
then in itemlink.html:
<a href="{{linkitem.get_url()}}" class="itemlink" data-item-id="{{linkitem.id}}">
<img src="{{linkitem.image}}" alt="Item {{linkitem.id}}" class="smallicon" />
{{linkitem|safe}}
</a>
Next: the content of what I want to be in the popover/tooltip box:
<div id="item_{{boxitem.id}}" class="itembox">
<div class="itemimage">
<img src="{{boxitem.image}}" alt="{{boxitem.name}}" title="{{boxitem.get_title()}}" />
</div>
<div class="iteminfo">
<div class="itemtitle">
{{boxitem.get_title()}}
</div>
<div class="itemdesc">
{% autoescape off %}{{boxitem.get_desc()}}{% endautoescape %}
</div>
</div>
</div>
I put this in a script on my page:
<script>
$(document).ready(function(){
$('#item_{{item.id}}').popover({
html: true,
placement: 'right',
trigger: 'hover',
selector: '[rel="popover"]'
});
});
</script>
I'm wondering if this part of the script is even possible?
$('#item_{{item.id}}').popover({
EDIT TO ADD: (it's not, it threw a server error)
EDIT again: It had to be
$('.itembox#item_'+$(this).data(itemID')).popover
On what element should I add the rel=popover?
I would give each item a static class like tool tip or give the table an id and use jQuery selector on the element in the table for the hover event.
$(document).ready(function(){
$('td.tooltip').popover({
html: true,
placement: 'right',
trigger: 'hover',
selector: '[rel="popover"]'
});
});
Related
problem
second component - table html display below menu but i need it display on right of menu .
I work on angular 7 and I have two components
first component is report component contain on left side menu and it is be router outlet on app.component
second component is table html exist on reportdetails component and generated when click link menu .
first component report contain menu
<p>report-category works!</p>
<table *ngFor="let rep of reportlist">
<tr>
<td>{{rep.reportCategory}}</td>
</tr>
<tr *ngFor="let subrep of subreportlist">
<div *ngIf="subrep.reportCategoryID === rep.reportCategoryID">
<a href="/reportdetails?id={{subrep.reportID}}">
<i class="{{subrep.IconClass}}"></i>
<span class="title">{{subrep.reportName}}</span>
</a>
</div>
</tr>
</table>
second is report component contain table that display below menu and this is wrong
the correct i need is to display right of menu as picture below
reportdetails works!
<p>reportdetails works!</p>
<div>
<table class="table table-hover" >
<thead>
<tr>
<th>regulation</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let rep of reportdetailslist">
<td>{{rep.regulation}}</td>
</tr>
</tbody>
</table>
<p>reportdetails works!</p>
<div>
<table class="table table-hover" >
<thead>
<tr>
<th>regulation</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let rep of reportdetailslist">
<td>{{rep.regulation}}</td>
</tr>
</tbody>
</table>
</div>
fiddle link as below :
https://jsfiddle.net/015asjzv/1/
what I try
table{
float:right;
width:auto;
}
Last Updated
see link here
http://www.mediafire.com/view/wnptffqakjglkre/correctdata.png/file
it moved table from left to right but i need it top beside menu so what i do
So for what I can see at the moment u have 2 tables wrapped by divs that's why they show as block(divs have display: block; by default)
add another div around these 2
<div class='wrapper'>
// You have to make sure only this divs are direct child of wrapper.
// div table 1 || you can just remove the div and add table directly
// div table 2 || as divs with no class dont add any value
</div>
// css
.wrapper {
display: flex;
}
Good luck.
You can learn more of display flex here
Note: This could also be an issue of the parent component layout, but the fix would be the same.
I have a problem. I need to make a modal window for each product, but in the modal window, all products only display the last product. I tried to assign id identifiers, but then only the modal window of the first product works.
window.onload = function() {
$('.img-for-modal').click(function() {
$('.modal').css('display', 'block');
});
$('.close').click(function() {
$('.modal').css('display', 'none');
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="products-wrap">
<table class="product">
<tr>
<td class="img" rowspan="3">
<img class="img-for-modal" src="media/products-image/1.jpg">
<div class="modal">
<span class="close">×</span>
<img class="modal-img" src="media/products-image/1.jpg">
</div>
</td>
<td class="product-info">
<article>Lorem Ipsum is simply dummy text of the printing V1.0</article>
</td>
</tr>
<tr>
<td class="product-info">
<b>Цена: </b>200 руб.
</td>
</tr>
<tr>
<td class="product-delete">
Добавить в корзину
</td>
</tr>
</table>
I suggest you change to this which will show the nearest modal and close the nearest modal. Your current code selects all items with class modal
Note I use jQuery $(function() { ... }); instead of window.onload = function() { ... }
$(function() {
$('.img-for-modal').click(function() {
$(this).next(".modal").show();
});
$('.close').click(function() {
$(this).closest(".modal").hide();
});
});
.modal { display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="products-wrap">
<table class="product">
<tr>
<td class="img" rowspan="3">
<img class="img-for-modal" src="media/products-image/1.jpg">
<div class="modal">
<span class="close">×</span>
<img class="modal-img" src="media/products-image/1.jpg">
</div>
</td>
<td class="product-info">
<article>Lorem Ipsum is simply dummy text of the printing V1.0</article>
</td>
</tr>
<tr>
<td class="product-info">
<b>Цена: </b>200 руб.
</td>
</tr>
<tr>
<td class="product-delete">
Добавить в корзину
</td>
</tr>
</table>
Because you are selecting all the modals on the page and showing them all.
$('.modal').css('display', 'block');
You are not selecting the modal that corresponds with what you picked. In your case the modal is beside the image so grab the next element and display it.
$(this).next('.modal').css('display', 'block');
Other option people tend to do is data attributes and ids. You add a data attribute that has the id of the item you want to show. So you read the attribute, and than show that item.
<img class="img-for-modal" src="media/products-image/1.jpg" data-toggles="#modal1">
<div class="modal" id="modal1">
and than the JavaScript would look at the attribute
var selector = $(this).data("toggles")
$(selector).css('display', 'block');
If you are in need of your modals to display dynamic content, and you are not using a framework like Angular or React to update the components for you - then you will want to use a dedicated modal library. This will help you manage multiple modal instances, as well as all of your display bindings.
I have used Bootbox.js in the past for this purpose - if you are using Bootstrap, check it out. If you are not using Bootstrap, there are other plugins that will help you accomplish the same task.
The trouble with modals is that by design there can only be a single instance at any one time (think Singleton). So each time you call it, you are calling the same instance. So...if you try to populate multiple instances - it wont happen. Only or last data set will be applied.
The problem with using
http://bootboxjs.com/
I have this html table with contents, sub-contents and sub-sub-content, I want to hide all sub-content "inside" the content I'm clicking on.
<table>
<tr class='content'>
<td>Things and things...</td>
<tr class='sub-content'>
<tr class='sub-content'>
<tr class='sub-sub-content'>
<tr class='content'>
<tr class='sub-content'>
<tr class='sub-sub-content'>
<tr class='sub-sub-content'>
<tr class='sub-content'>
<tr class='sub-sub-content'>
<tr class='content'>
...
</table>
I'm trying to do this with jQuery, but I can't get it right. Actually I'm hiding all sub and sub-sub after the clicked content, but I want to hide only sub/sub-sub from clicked content to next content.
$('.content').on('click', function() {
var element = $(this).next('.content');
$(this).nextUntil(element, '.sub-content').toggle();
$(this).nextUntil(element, '.sub-sub-content').toggle();
});
I don't get what I'm missing here.
I think you may be overcomplicating it slightly... Try this instead:
$('.content').on('click', function() {
$(this).nextUntil('.content').toggle();
});
Here is the Fiddle: http://jsfiddle.net/mifi79/KNED6/2/
For me the best way is FIddle
<script type="text/javascript">
$(document).ready(function(){
$('.content').on('click', function() {
$(this).nextUntil('.content').toggle();
});
})
</script>
I have a table inside a bootstrap modal. The content that I populate inside the dataTable cells is quite large, and instead of wrapping the text to fit the table inside the modal, it overflows the modal, like it is unable to pick up the modal width and wrap the text.
Screenshot:
I have tried various solutions, such as specifying wrap CSS as well as specifying the table width (in % and px) and setting the width property on the table (in % and px) but there is absolutely no change to the table. Any advice on how to correct this issue would be greatly appreciated.
Code Extract 1 (Modal):
<!-- List Questions Modal -->
<div class="modal fade" id="questionsModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" style="width: 95%">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>Questions</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="responsive-table">
<table width="900px" class="table table-bordered" style="margin-bottom:2em; width: 900px;" id="questionsTable">
<thead>
<tr>
<th >Code</th>
<th>Title</th>
<th>Instruction</th>
<th>Extract</th>
<th>class="text-center">Active</th>
<th class="text-center">Edit</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
Code Extract 2 (dataTable population):
function showQuestions(quiz_id)
{
$('#questions_quiz_id').val('quiz_id');
window.questionsTable.fnClearTable();
$.post('{{ url("getGameQuestions") }}', {quiz_id : quiz_id})
.done(function(data)
{
if (typeof(data.error) != 'undefined')
{
$('#error-msg').html(data.error);
$('#page-error').fadeIn(300).delay(2000).fadeOut(500);
}
else
{
for(var d in data)
{
var question = data[d];
var active = (question.active == undefined || question.active == false) ? "Inactive" : "Active";
var ai = window.questionsTable.fnAddData([
question.code,
question.title,
question.instruction,
question.extract,
active,
'<i class="icon-pencil" style="cursor:pointer; color:#E48A07;" title="Edit" onclick="setQuestion('+question.id+')"></i>'
]);
var oSettings = window.questionsTable.fnSettings();
var addedRow = oSettings.aoData[ai[0]].nTr;
addedRow.cells.item(2).setAttribute('width','29%');
addedRow.cells.item(4).className = "text-center";
addedRow.cells.item(4).className = "text-center";
addedRow.cells.item(5).className = "text-center";
}
$('#questionsModal').modal('show');
}
});
}
Try removing
<div class="responsive-table"> it might be causing responsive widths in the modal to fail.
You could also try specifying a max-width on the table.
This might be slightly related although it was a problem with Bootstrap 2.3.2 and it looks like you are using 3.
http://www.bootply.com/88364
This question is asked here
datatables does not becomes responsive on bootstrap3 modal dialog
I would suggest you enable the Datatables Responsive extension, ditch the wrapper and use this snippet of code instead.
//once the modal has been shown
$('#yourModal').on('shown.bs.modal', function() {
//Get the datatable which has previously been initialized
var dataTable= $('#yourResponsiveDataTableInModal').DataTable();
//recalculate the dimensions
dataTable.columns.adjust().responsive.recalc();
});
After trying so many solutions i found one who works for me!
Just put the table inside a div and define the CSS inside the code.
<div style="overflow:auto;">
<table>
.....
</table>
</div>
I hope this help!!
Remove the <div class="row"> and check.
Am also experienced same problem,after i removed the div, i got it perfectly.
After trying so many solutions i found a solution.
Just put the table inside a div and define the CSS inside the code.
<div style="overflow:auto;">
<table>
.....
</table>
</div>
I hope this help!!
<div class="modal-body">
<div class="row table-responsive">
<div class="col-sm-12">
<table id="example" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="site_name">
Feedback
</th>
<th>
Ticket Id
</th>
<th>
Date of Creation
</th>
<th>
Classification
</th>
<th>
Topic
</th>
<th></th>
</tr>
</thead>
</table>
</div>
</div>
</div>
initialize the datatable like that
initialize the datatable when open the modal.first time when we open the modal i==1 second thime i==2 so datatble cant reinitalize again and again does not give any alert box like datatable already initalize
var i=1;
$('#myModal').on('shown.bs.modal', function (e) {
if(i==1){
var oTable=$('#questionsTable').DataTable();
}
i++;
});
Just insert your table inside a div with "table-responsive" class:
<div class="table-responsive">
//Your table here
</div>
I am trying to make an angular.js view update itself when adding a comment. My code is as follows:
<div class="comment clearfix" data-ng-repeat="comment in currentItem.comments" data-ng-class="{bubble: $first}" data-ng-instant>
<div>
<p>
<span class="username">{{comment.user}}</span> {{comment.message}}
</p>
<p class="time">
10 minutes ago
</p>
</div>
</div>
<div class="comment reply">
<div class="row-fluid">
<div class="span1">
<img src="assets/img/samples/user2.jpg" alt="user2" />
</div>
<div class="span11">
<textarea class="input-block-level addComment" type="text" placeholder="Reply…"></textarea>
</div>
</div>
</div>
the scope is updated on enter:
$('.addComment').keypress(function(e) {
if(e.which == 10 || e.which == 13) {
$scope.currentItem.comments.push({
"user": "user3",
"message": $(this).val()
});
console.debug("currentItem", $scope.currentItem);
}
});
debugging $scope.currentItem shows that the comment has been added to it, however the view doesn't show the new comment. I suspect that the $scope is only being watched on its first level and that this is why the view doesn't update. is that the case? If so how can I fix it?
SOLUTION:
As Ajay suggested in his answer below I wrapped the array push into the apply function like this:
var el=$(this);
$scope.$apply(function () {
$scope.currentChallenge.comments.push({
"user": $scope.currentUser,
"message": el.val()
});
});
Modify the code to wrap inside scope.$apply because you are modifying the property outside the angular scope you have to use scope.$apply() to watch the values
I had to place my form inside the same div controller as the ng-repeat. I had two separate div controllers.
Use $scope.$parent.arrayObjet to modify the parent variables instead of $scope.arryaObject. It worked in my case.
<div class="col-sm-12 col-lg-12">
<div class="outer-container">
<div class="inner-container">
<div class="table-header">
<form id="teamForm" name="teamForm">
<table class="table table-bordered">
<thead>
<!-- Grid header -->
<tbody data-ng-if="(allTeamMembers.length==0)">
<tr>
<td class="text-center height_33_p" colspan="15"> {{noResultFound}} </td>
</tr>
</tbody>
<!-- Existing team member -->
<tbody data-ng-repeat="tm in teammemberDetailsArryobject|orderBy:orderByField:reverseSort" data-ng-form="innerForm_$index" data-ng-class="{'ng-submitted':innerForm_$index.$submitted}">
<tr></tr>
</tbody>
In the code I am deleting one record and add new row programmatically but all the rows are displayed in the ng-repeat rows(including deleted)