I'm having a bit of trouble figuring something simple out. I have a large datatable, and I want that when hovering any column, a specific div (and different for each column) is loaded somewhere on the page, outside the table.
How should I go about that? I'm having trouble defining columns (I'm using jquery dataTables), and then finding a way to load a different image for each column.
Here is my current code that doesn't take columns into account:
$('td').hover(function() {
var myClass = $(this).attr("class");
/* hide any previously loaded div */
$(".loaded").hide();
/* load my new div with the content I need */
$("#"+myClass).show();
});
And the HTML:
<thead>
<tr>
<th class="sp1">SP1</th>
<th class="sp2">SP2</th>
<th class="bb1">BB1</th>
<th class="br1">BR1</th>
<th class="br2">BR2</th>
<th class="br3">BR3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sp1">xxx</td>
<td class="sp2">xxx</td>
<td class="bb1">xxx</td>
<td class="br1">xxx</td>
<td class="br2">xxx</td>
<td class="br3">xxx</td>
</tr>
....
</tbody>
Thanks!
Im not sure if this is what you want, but check it out:
This code will show the name of the div you are hovering in another div.
https://jsfiddle.net/5jy071t5/4/
HTML
<ul>
<li name="first">Hoover me</li>
<li name="second">And me</li>
</ul>
<div id="output"></div>
Javascript
$( "li" ).hover(
function() {
$("#output").html($(this).attr("name"));
//you can also load an image if you like
}, function() {
$("#output").html("");
}
);
It works as charm. Maybe you were missing either id or class.
$('td').hover(function() {
var myClass = $(this).attr("class");
/* hide any previously loaded div */
$(".loaded").hide();
/* load my new div with the content I need */
$("#"+myClass).show();
});
.loaded{
display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th class="sp1">SP1</th>
<th class="sp2">SP2</th>
<th class="bb1">BB1</th>
<th class="br1">BR1</th>
<th class="br2">BR2</th>
<th class="br3">BR3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sp1">xxx</td>
<td class="sp2">xxx</td>
<td class="bb1">xxx</td>
<td class="br1">xxx</td>
<td class="br2">xxx</td>
<td class="br3">xxx</td>
</tr>
</tbody>
</table>
<div id="sp1" class="loaded">sp1</div>
<div id="sp2" class="loaded">sp2</div>
<div id="bb1" class="loaded">bb1</div>
<div id="br1" class="loaded">br1</div>
<div id="br2" class="loaded">br2</div>
<div id="br3" class="loaded">br3</div>
Related
Bootstrap 3.4.1 and 4.3.1 now comes with a sanitizer to perform XSS prevention.
I'm trying to allow all the necessary attributes to render a progress bar inside the popover of an AdminLTE based on bootstrap 3.4.1.
With .popover({sanitize: false}); everything works as expected:
With a custom sanitizer whitelist, as specified on the bootstrap docs, the progress bar is't displayed:
This is the custom whitelist:
var myDefaultWhiteList = $.fn.popover.Constructor.DEFAULTS.whiteList;
myDefaultWhiteList.div = ['role', 'aria-valuenow', 'aria-valuemin', 'aria-valuemax'];
myDefaultWhiteList.span = ['class'];
myDefaultWhiteList.table = ['class'];
myDefaultWhiteList.tbody = [];
myDefaultWhiteList.tr = [];
myDefaultWhiteList.td = ['colspan'];
console.log(myDefaultWhiteList);
$(function () {
$('[data-toggle="popover"]').popover({
whiteList: myDefaultWhiteList
});
});
And this is the content of my popover:
<div class="progress progress-sm active">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
aria-valuenow="6" aria-valuemin="0"
aria-valuemax="10"
style="width: 60%">
<span class="sr-only">6/10</span>
</div>
</div>
<div class="no-padding">
<table class="table table-condensed therapy-popover-table">
<tbody>
<tr>
<td>Protocollo N°</td>
<td>837-2019PC</td>
</tr>
<tr>
<td>Codice prescrizione</td>
<td>93xxxx1</td>
</tr>
<tr>
<td>Prescrizione</td>
<td><small>IDROCHINESITERAPIA INDIVIDUALE (9xxxx1) (30')</small></td>
</tr>
<tr>
<td>Data evento lesivo</td>
<td>10/09/2019</td>
</tr>
<tr>
<td>Data prescrizione</td>
<td>10/09/2019</td>
</tr>
<tr>
<td>Priorità</td>
<td>Breve</td>
</tr>
<tr>
<td>Tipo prestazione</td>
<td>Privato</td>
</tr>
<tr>
<td colspan="2"><i class="fa fa-share-square"></i> Vai alla prescrizione</td>
</tr>
</tbody>
</table>
</div>
Does anyone experienced a problem with bootstrap sanitizer and custom whitelist?
In my, everything works (tables, colspan attributes, etc...) except the progress bar...
Shit. I forgot the style attribute.
So the right role is:
myDefaultWhiteList.div = ['style'];
because 'role', 'aria-valuenow', 'aria-valuemin', 'aria-valuemax' are already defined in the default whitelist.
I am trying to open a modal with a click on the icon.This icon is generated by js in table with respective data but it doesn't work
but when I copy-paste same code in blade.php file it works fine.
I am attaching screenshots as well.
hope could get an answer.
note: using laravel
function actionFormatter(value, row, index) {
if (row.status == '1') {
return [
'<a class="editGreenColor tooltipped modal-trigger" data-tooltip="Edit" href="#modal5">',
'<i title="Edit" class="mdi-content-create small fontSzie1pt5rm"></i>',
'</a> ',
].join('');
}
}
<table data-toolbar="#toolbar" class="table table-striped table-bordered bootstrap-table" data-unique-id="id"
data-toggle="table" data-url="{{url('/branches/')}}/{{ $prantId }}/get" style="font-size: 14px" data-filter-control="true" data-row-style="rowStyle"
id="branchTable" data-pagination="true">
<thead>
<tr>
<th data-field="id" data-align="center" data-width="5%" data-sortable="true">ID</th>
<th id="name" data-field="name" data-width="25%" data-sortable="true" data-formatter="allBranchViewFormatter">Name</th>
<th data-field="id" data-formatter="actionFormatter" >Actions</th>
</tr>
</thead>
</table>
<div id="modal5" class="modal bottom-sheet">
// some codes
</div>
screenshot1
screenshot2
You have to initialize the modal yourself. Check http://materializecss.com/modals.html#initialization
I solved this by adding an onClick function, thanks for help #cris
function openEdit() {
$(".modal").openModal()
}
<a class="editGreenColor tooltipped modal-trigger" data-tooltip="Edit" href="javascript:void(0)" onclick="openEdit()">
<i title="Edit" class="mdi-content-create small fontSzie1pt5rm"></i>
I have a VIEW where I display a table with 15 records (15 rows) and 5 columns, but the very thing that matters is a column, "Actions". In it I have 1 button, "Preview", that when clicking, I want to open a window with a message, for tests.
However, only the first record, when clicking the "View" button, displays the message window, the other 14 records do not.
How do I make all records / lines display the message?
Follow the code below:
<table class="table table-bordered table-hover tablesorter">
<thead>
<tr>
<th class="header text-center" style="width: 100px;"> Ações </th>
</tr>
</thead>
<tbody id="tabela">
#foreach (var item in Model)
{
<tr>
<td>
#this.Hidden("IdClient").Value(item.Id)
<a id="visualizarCliente" class="btn btn-primary btn-xs btn-visualizar" data-toggle="tooltip" title="Visualizar" target="_blank"
href="#Url.Action(MVC.Painel.Clientes.Visualizar(item.Id))">
<i class="fa fa-eye"></i>
</a>
</td>
</tr>
}
</tbody>
</table>
<script type="text/javascript">
$(function () {
$("#visualizarCliente").click(function () {
var idCliente = $("#IdClient").val();
window.alert("Teste");
})
});
</script>
The problem is that you are using the id selector and it can not be repeated. Switch to any other selector, such as data-toggle = "tooltip" for example.
<script type="text/javascript">
$(function () {
$("a[data-toggle='tooltip']").click(function () {
window.alert("Teste");
})
});
</script>
The problem is ID which always be used for something UNIQUE. Try to use CLASS instead. Your function should goes something like this one example:
$(function () {
$(".btn-visualizar").click(function () {
var idCliente = $(this).parent().find("#IdClient").val();
window.alert("Teste");
})
});
In the given example the line $(this).parent().find("#IdClient").val(); specifies that this would be it's nearest element value as it should be.
Say I have a table:
<table class="table table-bordered table-hover employes_list_panel">
<thead>
<tr>
<th></th>
<th></th>
<th class="center">Name <i class="fa fa-angle-double-down"></i></th>
<th class="center">IQ <i class="fa fa-angle-double-down"></i></th>
<th class="center">Efficiency <i class="fa fa-angle-double-down"></i></th>
<th class="center">Focus <i class="fa fa-angle-double-down"></i></th>
<th class="center">Happiness <i class="fa fa-angle-double-down"></i></th>
<th class="center">Quality <i class="fa fa-angle-double-down"></i></th>
<th class="center">Salery <i class="fa fa-angle-double-down"></i></th>
</tr>
</thead>
<tbody>
<%Employe.where(company_id: company.id, request: false).each do |employe|%>
<tr>
<td class="center cd-popup-trigger" id="popup3"><i style="color: red;" class="fa fa-close"></i></td>
<td class="center cd-popup-trigger" id="popup4"><i style="color: green;" class="fa fa-arrow-up"></i></td>
<td class="center"><%=employe.name%></td>
<td class="center"><%=employe.iq%></td>
<td class="center"><%=employe.efficiency%></td>
<td class="center"><%=employe.focus%></td>
<td class="center"><%=employe.happiness%></td>
<td class="center"><%=employe.quality.capitalize%></td>
<td class="center"><%=employe.salery%></td>
</tr>
<%end%>
</tbody>
</table>
And I want to get the value of the employe name <%=employe.name%> when popup3 for example is clicked. Note there can be more than one "employe" in the list. How can I get the value of the employe that is on the line where the user clicked the popup, so that I can prepend it using jQuery into the popup <p>.
Ex:
Click to Open Popup | Kevin |...
Click to Open Popup | Sam |...
I need to get the value Sam when I click the "second popup", the
problem is all popups currently have the same id.
Thank you.
Given your code, popup3 (and popup4 for that matter) is gonna be present multiple times on the page (once per tr). You need to give it a class, not an id. I personally like to prefix my JavaScript classes (not used for styling) with js-. In your HTML:
<td class="center cd-popup-trigger js-popup3"><i style="color: red;" class="fa fa-close"></i></td>
You also need to identify the cells which contain the employee name (you'll see why later).
<td class="center js-employee-name"><%= employe.name %></td>
In your JS code, you first need to select the all the td with the js-popup3 class:
$('js-popup3')
Then, you want to trigger something when an event occurs on the element you selected. With jQuery, you would do it like this:
$('js-popup3').on('click', function() {});
Lastly, you want to describe what should be done when the event occurs. This is done in the callback function.
$('.js-popup3').on('click', function() {
# employeeName is the value you want
employeeName = $(this).siblings('.js-employee-name').text();
});
I invite you to read a lot about JS (try to code without jQuery first). Once you feel confident with it, start looking at jQuery.
You can create a click function for the Table tr's and get the value of the third column (index 2):
$('table.reference.notranslate tbody').delegate("tr", "click", function(){
var YourEmployeName = $(this).find('td').eq(2).text();
alert(YourEmployeName);
});
To make the popups ahve unique id's according to employee try something like this:
">
Then I presume you have some js somewhere to handle the popup clicks. This js can extract the employee id with
emp_id = my_clicked_popup_trigger.attr("id").split('-')[-1]
I have a button that I want to toggle the class when clicked.
This is what I currently have.
<table>
<tbody data-bind="foreach: item ">
<tr>
<td><a data-bind="click: $parent.selectItem, text: Name, css: { 'whitishBtn button_small': selected(), 'greenishBtn button_small': !selected() }"></a></td>
</tr>
</tbody>
</table>
it almost works. When green it works as expected but only has whitishBtn class when white.
figured it out
selected() ? 'greenishBtn button_small':'whitishBtn button_small'"