I would like to use Angular-UI (bootstrap) drop down button in a cell of my DataTables. There's no problem when using the drop down button on the page but for DataTables it should be passed through Javascript.
Plunker link
thanks for your advice
Someone opened an issue in Github for this "issue". Probably was the author himself:
https://github.com/angular-ui/bootstrap/issues/4111
Wesley Cho answered with a working plunkr:
http://plnkr.co/edit/dAPQKNSdgWQDv5PnEQYa?p=preview
The key point is that the HTML in DataTables is not compiled. So you have to use $compile in a $rowCallback:
rowCallback: function(row, data) {
$(row).find('.button-wrapper').append(
$compile('<div class="btn-group" dropdown><button id="split-button" type="button" class="btn btn-danger">Action</button><button type="button" class="btn btn-danger" dropdown-toggle><span class="caret"></span></button><ul class="dropdown-menu" role="menu" aria-labelledby="split-button"><li role="menuitem">Action</li></ul></div>')($scope)
);
}
Related
I'm new in this Visual studio coding.
I'm trying to handle the click event in a dropdown button in order to shoe me some content in the "header and footer card" on the same view.
I have this so far
<button type="button" style="margin:5px" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" >
DATA ANALYTICS
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
My question is the follow.
So I click the button. Then I want to show some content on the card, but I don't know where should I put the content (in cshtml or cshtml.cs) and how to handle the event (click).
As far as my understanding about this code is, I need to declare a var (id) inside of the div class.
Well I'm kind of lost right now.
I'll appreciate any help you guys.
P.S. This is not a homework question or something like that. I just want to learn more about this coding style.
If you want to click Action and then change the content of div,you can call JavaScript function in href:
<a class="dropdown-item" href="javascript:MyFunction();">Action</a>
js:
<script>
var id;
function MyFunction() {
//you can change the content of div here,also you can change a js variable here
}
</script>
You will have to use javascript to do this on the same page. If you want to be redirected to another page you can use tag-helpers for that, but I think it is not what you want. I would do it like so - either I would put an Id on the anchor tag, put href="javascript:void(0)" and in the script use:
<script>
const element = document.getElementById('id');
element.addEventListener('click', onClick);
function onClick(ev) {
ev.preventDefault();
//do rendering logic.
}
</script>
Or in the html:
<a class="dropdown-item" href="javascript:void(0)" onclick="javascript:onClickRender();">Action</a>
And script
<script>
function onClickRender(ev) {
//Render Logic
}
</script>
For this type of dynamic rendering you need javascript.
Here is my code:
<a href="dashboard.php">
<button type="button" class="btn btn-primary" style="background-color:#5f5f5f;">
View Summary
</button>
</a>
Any help is appreciated.
This is the easy way to do that:
View Summary
Please look at this http://www.w3schools.com/bootstrap/bootstrap_buttons.asp
And consider adding additional class for background color in CSS.
You may check this Fiddle
It's just wrapping button in anchor tags..
<div class="btn-group">
<a href=href="dashboard.php"><button class="btn btn-primary dropdown-toggle">
View Summary
</button></a>
</div>
I am using bootstrap popover with vuejs.
How can I trigger vue functionality?
In below code when I am clicking on add break link, it opens bootstrap popover, with click me button. Now here vuejs doesn't work, if I click on click me, it is not prompting alert.
<a data-toggle="popover" data-placement="top" v-d2d-popover data-content='<button v-on:click="alert(6)">click me</button>' href="javascript:void(0)" class="btn btn-link popover-notitle">
<i class="ace-icon fa fa-plus-circle bigger-120 green"></i>add break
</a>
Can anybody help me?
Since the button is just written in a string, it isn't being compiled by Vue. Here are a couple of ideas to try:
Use Vue for popover as well: https://yuche.github.io/vue-strap/#popover
Create popover content in a separate div (in your component so Vue will compile it) and then fetch the content for the popover:
{
content: $('#myPopoverContent').html(),
html: true
}
Unable to click on Save button using By.className while className available in
webpage code for button available
<div class="popupFooter">
<div align="center">
<input id="Preview-btn" class="btn-primary previewDetaile" type="button" value="Preview">
<input class="btn-primary validateProfile" type="button" value="Save">
<input id="clear" class="btn-primary" type="button" value="Cancel">
</div></div>
Selenium Code
driver.findElement(By.className("btn-primary validateProfile")).click();
Problem:
Unable to click on Save button
Your problem is that you search for multiple classnames which does not work with By.className. Just try
driver.findElement(By.className("validateProfile")).click();
instead. For selecting elements by multiple classnames you can find a solution here.
It's very easy with a CSS selector:
driver.findElement(
By.cssSelector(".btn-primary.validateProfile")
).click();
For a full reference:
http://www.w3schools.com/cssref/css_selectors.asp
As #Sebastian pointed out, it's probably due to the fact that By.className accepts only one class name (I think it's not by chance that they didn't name it By.classNames :) )
I have a simple logout button in my navbar and I would like the word "Logout" and the icon from font-awesome to display inline. I thought <span> was an inline tag, but it is causing a line break. I need the span in order to hide the extra text on small screens.
<a href="/logout/" type="button" class="btn btn-default navbar-btn pull-right">
<span class="hidden-xs">Logout</span><i class="fa fa-sign-out fa-lg"></i>
</a>
You can see the problem here: http://bootply.com/94625
try to add:
#media(min-width:768px)
{
.hidden-xs{display:inline !important}
}
the .hidden-xs sets the display of your span to block
It's because you need to download font-awesome and have it in your root directory also point it in your head section. That's because it doesn't show on your live link.
Hope this helps.