In my configuration of a datatable button i have this:
buttons:[{
extend: 'csvHtml5',
text: '<span class="blabel"><i class="fa fa-download"> </i></span><span class="btxt">Export table</span>',
className: 'btn btn-labeled'
},
the result is this button:
<a class="btn btn-default buttons-csv buttons-html5 btn-labeled" tabindex="0" aria-controls="DataTables_Table_0" href="#">
<span> ---> I wanna remove this
<span class="blabel">
<span class="btxt">Export table to CSV</span>
</span>
</a>
I wanna remove the external span and the buttons-csv buttons-html5 classes... what is the correct way to do this??
You try use:
Remove span tag
$('span:not([class])').contents().unwrap();
and remove classs
$('.buttons-csv.buttons-html5').removeClass('buttons-csv buttons-html5');
Related
I have the following HTML:
<a class="rounded" data-trigger="hover" data-toggle="popover"
data-html="true" data-placement="right" data-title="some data title"
data-content="some data content" href="#" onclick="return false;"
onmouseover="onMouseOver();" onmouseout="onMouseOut();">
<i class="fas fa-info-circle fa-sm" aria-hidden="true" style="color: var(--tint-color);"></i>
</a>
<script>
function onMouseOver() { console.log('onMouseOver') }
function onMouseOut() { console.log('onMouseOut') }
</script>
which I repeatedly call with different values of data-title and data-content. Is there a way to have a custom tag such as:
<popover data-title="some data title" data-content="some data content"></popover>
Is this the best method for achieving this, or is making a CSS class more suitable?
You can't add custom HTML tags, but you can add "id" or "class" to any HTML tag.
For example, instead of:
<popover data-title="some data title" data-content="some data content"></popover>
Do:
<div id="popover" data-title="some data title" data-content="some data content"><div>
You can then select your customized div using jQuery:
<script>$("#popover").mouseover(function (){ console.log("onMouseOver")});</script>
If you need more than one custom item, that must behave in the exact same way, you can then do this:
<div class="popover" data-title="some data title" data-content="some data content"><div>
<script>$(".popover").mouseover(function (){console.log("onMouseOver")});</script>
I am getting 3 values from the backend : isDone, isInProgress, isFailed and based on these 3 values, i need to change the hover over text of a span element in angularview. if the element is isDone or isInProgress, i have to show one icon with 2 different hover text. if the element is isFailed , i have to show an error message on the screen:
The code :
<span class="glyphicon glyphicon-refresh blue"
title="In progress" ng-show="action.isInProgress"> </span>
How do i incorporate the IsDone in this span?
Just do this:
<span class="glyphicon glyphicon-refresh blue" title="{{ action.isInProgress ? 'Action is in progress' : 'Action is complete.'}}" ng-show="action.isInProgress||action.isDone"></span>
what about
<span class="glyphicon glyphicon-refresh blue"
title="{{status}}" > </span>
and update your status variable depending on the value, as "In progress", or ..
You can use conditional checks
<span class="glyphicon glyphicon-refresh blue"
title=" Action is Complete" ng-if="action.isDone"> </span>
<span class="glyphicon glyphicon-refresh blue"
title="Action in progress" ng-if="action.isInProgress"> </span>
I have a pop hover button. I want to make it's text RTL. How can I do it?
<button
type = "button"
class = "btn btn-success btn-xs pop"
data-container = "body"
data-toggle = "popover"
data-placement = "right"
data-content = "hello world"
data-original-title = ""
title = "">help</button>
add:
style="direction:rtl;"
<button type="button" class="btn btn-success btn-xs pop" data-container="body" data-toggle="popover" data-placement="right" data-content="hello world"
data-original-title="" title="" style="direction:rtl;" >
A paragraph with a right-to-left direction:
<p dir="rtl">Write this text right-to-left!</p>
For your case, and as documented on bootstrap, you have the option to change the popover tempate via the attribute data-template
<div class="popover" role="tooltip" direction="rtl">
<div class="arrow"></div>
<h3 class="popover-title"></h3>
<div class="popover-content"></div>
</div>
In your code, add this attribute and set the direction to rtl both in title and body
<button data-template='<div class="popover" role="tooltip" dir="rtl"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' ...>
Help
<button>
HTML rtl attribute
bootstrap popovers
try using css, like so
.your-class-name{
direction: rtl;
}
Read the complete reference here
To all folks ending up here, in order to change direction or style text inside bootstrap's tooltip you can enable the HTML rendering inside tooltip using data-html="true" and then adding preferred HTML tags and attributes. Checkout example below:
Step 1 - Displaying plain text in tooltip:
<i class="bi bi-x-circle" data-toggle="tooltip" data-placement="top" title="name=درود"></i>
Step 2 - Creating the desired HTML to show in the tooltip:
<p dir='rtl'><strong>name<strong>=درود</p>
Step 3 - Displaying text with direction and bold style:
<i class="bi bi-x-circle" data-toggle="tooltip" data-html="true" data-placement="top" title="<p dir='ltr'><strong>name<strong>=درود</p>"></i>
- There are also other possible solutions such as editing the CSS class of popover or tooltip, such as this link.
I have the following piece of code:
<ul class="ul" id="selected_conditions">
<li data-field="asset_locations_name" data-condition="in">
<i class="fa fa-minus-circle delete_condition" aria-hidden="true" title="Click to remove this condition from the list"></i> WHERE asset_locations_name IN(
<span class="condition_item" data-id="1213381233">
<i class="fa fa-minus-circle delete" title="Click to remove this item from the list" aria-hidden="true"></i> 1213381233
</span>,
<span class="condition_item" data-id="1212371897">
<i class="fa fa-minus-circle delete" title="Click to remove this item from the list" aria-hidden="true"></i> 1212371897
</span> )
</li>
</ul>
Each time I click on the little icon .delete I should remove the current value and I was able to achieve that with the following code:
$(function() {
$('#selected_conditions').on('click', '.delete', function(ev) {
var item_id = $(this).parent().data('id');
$('.condition_item[data-id="'+ item_id +'"]').remove();
});
});
But the code above has two problems: if I remove any item the symbol , isn't removed and that's wrong as an a second one I can't have an emtpy () string, so:
How do I remove the , so I not end up with a bad string like (,1213381233) or (1213381233,)?
Any help? I have leave you a Fiddle to play with. This is a WIP so if you have a suggestion or better solution feel free to add it to your answer.
Instead of hard-coding the comma(s), I'd use CSS :before to add commas only when there's more than one item in a row.
.condition_item+.condition_item:before {
content: ", "
}
https://jsfiddle.net/8184ok2e/2/
I am defining a variable after the page load (storing numerical json data)
I can successfully put this variable in:
<span data-bind="text: extQty"></span>
And when the variable changes it updates the span with the appropriate variable (That works fine).
But it doesn't update my variable within my enable:
<p class="pull-right"><a class="btn btn-primary" data-bind="click: $root.add, enable: pagedList().length < extQty" href="#" title="edit"><i class="icon-plus"></i> Add Extension</a></p>
I need to have the enable effectively disable based on the value that is presented to "extQty". Right now I'm sending 5 to the extQty, and it seems the variable is only updating inside the "text" data-bind rather than the "enable" data-bind.
Knockout enable binding do not work with anchor tags.
So you have 2 solution to this.
Solution 1
<a href='#' title="edit" class="btn btn-primary" data-bind='click: function() {
if(pagedList().length < extQty())
{
//call the desired method from here
}' >
Solution 2
This button displays only when your condition is success and it has click binding
<a class="btn btn-primary" data-bind="click: $root.add, visible: pagedList().length < extQty()" href="#" title="edit">
This button displays only when your negative condition is success and it do not have click binding
<a class="btn btn-primary" data-bind="visible: pagedList().length >= extQty()" href="#" title="edit">
Try using
<p class="pull-right">
<a class="btn btn-primary" data-bind="style: { display: (pagedList().length < extQty) ? 'block' : 'none' }"
href="#" title="edit">
<i class="icon-plus"></i>Add Extension
</a>
</p>
Or else as pointed by #NaveenKumar.. You can use visible attribute...