I have a link that I need to click with capybara:
<div class="x-header x-floats x-push one-line ng-scope">
<div class="left">
<h1>Users</h1>
</div>
<span class="hint--left" data-hint="Create User">
<a class="x-round-button icon-plus" ng-tap="url('new')"></a>
</span>
</div>
I need to click the a with a class of x-round-button but I can't seem to find the right way to do so. I want to avoid using xpath if possible. Thank you in advance for the help.
You can do it like
page.find('.x-round-button').click
Related
So I'm trying to use tooltip component from BS5. But somehow it doesn't work. Let me show you the html code first.
<div class="row">
<div class="col-12 col-md-4">
<a class="card">
<div class="card-body">
<div class="card-title">this is title. <span class="badge badge-theme" data-bs-toggle="tooltip" data-bs-placement="top" title="this is tooltip">Origiinal content</span></div>
</div>
</a>
</div>
</div>
What's weird is that when I place the tooltip outside the card component, the tooltip works perfectly. What is the problem? Thanks in advance. :)
here is a working example of a tooltip on a whole card:
Working demo
Placing id="example" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top" in my demo on any element will result in the tooltip appearing on that element. In this case, I placed it on on the div with the class .card.
Feel free to change the id name from example to your desired id (in both script.js and index.html).
I am new to ASP/MVC and I am having trouble figuring out how to link a div to a page in HTML markup. This is the current link in pure HTML. I want to accomplish this, but in razor syntax
<div class="col-md-2">
<a href="ambulance.html">
<div class="amb item">
<div class="tiletext">AMB</div>
<div class="tilesubtext">Ambulance</div>
</div>
</a>
</div>
I've been looking into action links, but if there is a better way to accomplish this, I'm open to it!
Possible duplicate. I'll add a bit of explanation that pertains to the question since it has to do with Razor:
What your backend developer needs is Url.Action helper. This will let you route the link through the MVC framework.
So say:
<div class="col-md-2">
<a href="#Url.Action("Cars", "Ambulance")">
<div class="amb item">
<div class="tiletext">AMB</div>
<div class="tilesubtext">Ambulance</div>
</div>
</a>
</div>
ASP.NET MVC: generating action link with custom html in it
Html.ActionLink method only creates anchor tags for some action method, you need Url.Action method. Using the rest of the markup is fine.
<div class="col-md-2">
<a href="#Url.Action("Index","Home")">
<div class="amb item">
<div class="tiletext">AMB</div>
<div class="tilesubtext">Ambulance</div>
</div>
</a>
</div>
I am having a bit of a problem with my site, i am trying to add a simple link to an external site, but i can't get the link to open without right clicking and selecting open link.
This is the piece of code
<div class="brick1 odd">
<a href="https://www.google.co.uk/" class="nav-item"</a>
<div class="nav-hover"></div>
<i class="li_shop"></i>
<span>Shop now</span>
</a>
</div>
I know it's most likely something simple but i can't seem to pin it down
Thanks
Aha! The problem is because you are trying to link from an http to an https!
Your anchor tag needs to override the click handler:
<a href="https://www.google.co.uk/" class="nav-item" onclick="return !window.open(this.href,'WINDOW_NAME');" >
Should fix it!
But I would still fix the nesting.
try properly nesting everything, like so:
<div class="brick1 odd">
<a href="https://www.google.co.uk/" class="nav-item" onclick="return !window.open(this.href,'WINDOW_NAME');">
<div class="nav-hover">
<i class="li_shop">
<span>Shop now</span>
</i>
</div>
</a>
</div>
Syntax error
<a href="https://www.google.co.uk/" class="nav-item">
<div class="nav-hover"></div>
<i class="li_shop"></i>
<span>Shop now</span>
</a>
We just updated from jquery mobile beta 2 to rc2. We had a custom button that we don't want jqm to initialize (add extra markup) so we used this:
<button id="buttonid" data-role="none"></button>
And that worked perfectly, but now with the update it is actually initializing the button. I don't see any updates in the release notes or the documentation. Am I missing something?
Markup after update:
<div data-theme="c" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-down-c ui-btn-up-c" aria-disabled="false">
<span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
<span class="ui-btn-text"></span>
</span>
<button id="buttonid" data-role="none" class="ui-btn-hidden" aria-disabled="false"></button>
</div>
UPDATE
As Phill pointed out, my problem is hard to reproduce. Could be something with my code but it seems strange that simple changing version creates the behaviour for me. Here is additional markup that I first stripped out from example:
<ul class="item" data-role="listview" data-inset="true">
<li data-role="list-divider">Something</li>
<li>
<div class="block_container" data-role="none">
<div class="block block_small">
<button data-role="none" id="check-123" class="check" data-id="something"></button>
</div>
<div class="block block_small assignment">
<button data-role="none" id="assign-123" class="assignmentoverlay"></button>
</div>
<div class="block">
<h3>
Something
</h3>
<p>
lorem..
</p>
</div>
</div>
</li>
UPDATE 2
I found what the problem is. I am populating my list from javascript. At the end I'm calling trigger("create"). This will enhance all the elements in my list, even those with data-role="none.
jsfiddle to reproduce problem - http://jsfiddle.net/V2xAX/9/
Updating title of question
UPDATE 3
Hopefully the last update. We got it to work by doing the following:
When calling trigger("create")on my list, every element will be enhanced. We don't want this.
When calling trigger("create")on the page element holding the jquery mobile page, only elements without data-role="none"will be enhanced. This is the behavior we want.
Link for testing - http://jsfiddle.net/V2xAX/16/
It would be interesting to know why this happens :)
I am trying to use the jquery-ui accordion functionality on a drupal page. I have teams with multiple people in each team that I want to display. I have a view set up that groups by team, and has contact info for each team member. My accordion doesn't seem to be working. I used <?php jquery_ui_add('ui.accordion'); ?> to import the correct js file from the jquery ui module, and it is showing up in the js file.
I was wondering if I have too many div tags and that is shomehow messing with it. Does anyone see anything that may be affecting this?
Thanks for any thoughts.
Here is some sample code -
<div id="accordion">
<div>
<h3>Team: 1</h3>
<p>
<div class="views-field-title">
<label class="views-label-title">
Title:
</label>
<span class="field-content">John Doe</span>
</div>
<div class="views-field-field-email-value">
<label class="views-label-field-email-value">
Email:
</label>
<span class="field-content">John.Doe#email.com</span>
</div>
<div class="views-field-field-phone-value">
<label class="views-label-field-phone-value">
Phone:
</label>
<span class="field-content">555-555-5555</span>
</div>
<div class="views-field-field-extension-value">
<label class="views-label-field-extension-value">
Extension:
</label>
<span class="field-content"></span>
</div>
<div class="views-field-field-role-value">
<label class="views-label-field-role-value">
Role:
</label>
<span class="field-content">Team Leader</span>
</div>
</p>
and here is my jquery accordion call -
<script>
$(document).ready(function() {
$(function() {
$( "#accordion" ).accordion();
});
});
</script>
I hope you have figured it out already, but here's a solution I wrote up a while back...
http://www.cleaver.ca/content/jquery-ui-accordion-drupal-6
There can be some incompatibilities based on the version of jQuery and jQueryUI, so this may help sort things out. There's a link to the site where I got it workin
First off, when troubleshoot jQuery I have found it very useful to scale down any HTML that I pass to it to be parsed. Next, are you sure that the UI library is being called in. Try using drupal_add_js('/path/to/jquery.ui.js'); when you load your module.