I use this razor code to generate a HTML button that calls a function with a value from the model:
Html.Raw(string.Format("<button type='button' class='btn btn-success btn-xs' onclick='setCoordinatorForService('{0}')'>Åta</button>", item.Name))
The value of item.Name is "abc", the code:
<button type="button" class="btn btn-success btn-xs" onclick="setCoordinatorForService(" abc')'="">Åta</button>
I want this:
<button type="button" class="btn btn-success btn-xs" onclick="setCoordinatorForService("abc")'="">Åta</button>
What am i doing wrong?
You must replace ' to \"
If you use this code, probably it works very well.
Html.Raw(string.Format("<button type=\"button\" class=\"btn btn-success btn-xs\" onclick=\"setCoordinatorForService('{0}')\">Åta</button>", item.Name)))
Besides the line you wanted it has error.
onclick="setCoordinatorForService("abc")'=""
part maybe give an error because of =
Related
there is a button in the page with the sintax below
<div _ngcontent-cnw-c181="" class="col text-center ng-star-inserted">
<p _ngcontent-cnw-c181="" class="text-primary font-weight-bold">
Click the button below
</p>
<button _ngcontent-cnw-c181="" type="button" routerlink="/web/click" class="btn btn-primary" tabindex="0" ng-reflect-router-link="/web/click">
<i _ngcontent-cnw-c181="" aria-hidden="true" class="fa fa-check-circle"></i>
Click Here
</button>
</div>
but when I try to localize it using Locator, it returns the error: Microsoft.Playwright.PlaywrightException: 'Unknown engine "routerlink" while parsing selector routerlink=/web/click'
Page.Locator("routerlink=/web/click").ClickAsync();
The only solution I found is by searching for "text=Click here" but I would like to use the "routerlink" keyword instead because the text might change more often in the future.
This should work: Page.Locator("//button[#routerlink='/web/click']").ClickAsync();
the doubt is this:
I have to use a <a></a>, because of the notation I'm using in all my app, I'm working in ASP.NET MVC. So, I have an href="#Url.Action with class="btn btn-primary", a simple button as this:
<a href="#Url.Action("Manage", "Account")" class="btn btn-primary text-right">
<span class="glyphicon glyphicon-circle-arrow-left" aria-hidden="true"></span> Administrar
</a>
(That was an example of the estructure that I need)
But now I have to convert this:
#Html.ActionLink(User.Identity.GetUserName(), "Manage", "Account",
routeValues: null, htmlAttributes: new { title = "Administrar" })
to that estructure. The fact is, I don't know where to put the routevalues and User.Identity.GetUserName(). I don't need the htmlAttributes neither the title.
Please help me and thanks a lot.
For title, you just simple use title="Administrar", so when you hover mouse on the button/link, it'll still show Administrar in tool-tip.
For Username, you will need # sign at the front.
<a href="#Url.Action("Manage", "Account")" class="btn btn-primary text-right"
title="Administrar">
<i class="fa fa-arrow-circle-left" aria-hidden="true"></i>
#User.Identity.GetUserName()
</a>
Another suggestion is not to use Bootstrap's glyphicon, because they won't be available in next version anymore. Instead, you might want to consider using Font Awesome.
It should be:
<a href="#Url.Action("Manage", "Account")" class="btn btn-primary text-right">
<span class="glyphicon glyphicon-circle-arrow-left" aria-hidden="true"></span>
#User.Identity.GetUserName()
</a>
routevalues will be next parameter in Url.Action method if you need it.
Like this:
Url.Action("Manage", "Account", new { id = 1 })
I suppose you have Html.Actionlink like bellow
#Html.ActionLink("Home", "index", null, new { #class = "btn btn-primary" })
all you need to do is to write it like this
<a class="brand" href="#Url.Action("index","Home")"> </a>
and you are done!
Here is the html source code for 2 Save buttons in Rails 4 spec. The program should click the first Save:
<div class="btn-toolbar">
<a class="btn btn-primary" href="/view_handler?index=0">
<span class="translation_missing" title="translation missing: en.Back">Back</span>
</a>
<input class="btn btn-default btn btn-primary" name="commit" value="Save" type="submit">
<input class="btn btn-default btn btn-primary" name="commit" value="Save & New" and_new="true" type="submit">
</div>`
Here is the code I tried:
first('input.btn.btn-default').click_button 'Save'
The error returned is:
Capybara::ElementNotFound:
Unable to find button "Save"
What's the right way to click button Save in spec?
The buttons have different text value one is 'Save' and the other 'Save & New'
within '.btn-toolbar' do
click_button 'Save'
end
Should work for your case.
Basically, what I am trying to get dropdown button from rails button_to, this is done via ajax, when someone clicks on that button, it shows rendered cart <ul> tag via ajax render.
bootstrap:
<button class="btn btn-primary dropdown-toggle" type = "button" data-toggle="dropdown"><span class="glyphicon glyphicon-shopping-cart"></span> <span class="badge"><%="#{#cart.line_items_count}" %></span></button>
rails button_to:
%= button_to navbar_cart_path, {remote :true, method: :get, :class => 'btn btn-primary dropdown-toggle', data_toggle: "dropdown"} do %>
<span class="glyphicon glyphicon-shopping-cart"></span>
<span class="badge" id="cart-badge-id"><%="#{#cart.line_items_count}" %></span>
<% end %>
This generates similar button tags, except when looking at html source code, bootstrap button has attribute type="button", but rails generates type="submit"
bootstrap:
<button class="btn btn-primary dropdown-toggle" type = "button" data-toggle="dropdown"><span class="glyphicon glyphicon-shopping-cart"></span> <span class="badge">5</span></button>
rails:
<form class="button_to" method="get" action="/navbar_cart data-remote="true">
<button class="btn btn-primary dropdown-toggle" data_toggle="dropdown" type="submit">
<span class="glyphicon glyphicon-shopping-cart"></span>
<span class="badge" id="cart-badge-id">5</span>
</button></form>
Another great question if whether or not it is even possible to even make a dropdown menu this way.
If you just want a drop down you could use select_tag('attr', options_for_select()) to get your drop down and then do something like this to kick off any ajax stuff you want to do:
$('#my_select_dropdown').change(function(){
//do stuff here
});
EDIT: Here is a link to look at select_tag docs in case you want more details: http://apidock.com/rails/ActionView/Helpers/FormTagHelper/select_tag
Just override the type attribute in the html_options argument of the method which is the same hash you are passing the class name for your element:
<%= button_to navbar_carth_path, {remote: true, method: :get}, {"class": "btn btn-primary dropdown-toggle", "data-toggle": "dropdown", "type": "button"} do %>
I think yo were also adding the html options within the same hash as the options hash which are not the same, the options hash (the first) are options for the rails helper per se, the second hash corresponds to attribute values that you want to apply to the rendered element:
button_to(name = nil, options = nil, html_options = nil, &block)
Check the signature of the method here.
Update You were also passing the remote :true parameter wrong, you have a space between the remote word and the actual value so it parses as a symbol, it should be: remote: true. On the other hand, I advice to enclose all html options of helpers (like data-toggle) between quotes and not only its values so that you can use hyphens instead of dashes (bootstrap option is data-toggle AFAIK, not data_toggle
So it seems like when using rails button_to and adding data: attributes doesnt overwrite type="button", so I tryed experimanting and came up with this.
<%= link_to navbar_cart_path, { method: :get, remote: true, class: "btn btn-primary dropdown-toggle", "id": "cart-button", "type": "button", "data-toggle": "dropdown" } do %>
<span class="glyphicon glyphicon-shopping-cart"></span>
<span class="badge" ><%="#{#cart.line_items_count}" %></span>
<% end %>
This generates HTML code:
a class="btn btn-primary dropdown-toggle" id="cart-button" type="button" data-toggle="dropdown" data-remote="true" data-method="get" href="/navbar_cart">
<span class="glyphicon glyphicon-shopping-cart"></span>
<span class="badge" >5</span>
Where I can then use AJAX GET to render #cart partial in dropdown tags
I'm trying add an icon with using awesome font.
I used bootstrap button type and it's working fine.But when i would like to add a social icon using tag it does not seem.How can i do that ?
<div id="socialLoginList">
<p>
#foreach (AuthenticationDescription p in loginProviders)
{
<button type="submit" class="btn btn-lg btn-social btn-#p.AuthenticationType.ToLower()" id="btn-socialID" name="provider" value="#p.AuthenticationType" title="Log in using your #p.Caption account"><i class="fa fa-#p.AuthenticationType"></i>#p.AuthenticationType</button><br /><br />
}
</p>
</div>
Simply do a ToLower here:
<i class="fa fa-#p.AuthenticationType.ToLower()">
Font awesome icons are all lower case, so it should pick them up if you do a ToLower. Remember that HTML class names are case-sensitive.
E.g.
<i class="fa fa-google"></i>
<i class="fa fa-facebook"></i>