I need use the dropdown directive trigger by hover event?
Does it support that?
How can I use it?
Some thing like that
Button dropdown
Action
Another action
Something else here
Separated link
Dropdown doesn't come builtin with this functionality, but you can utilized ng-mouseenter and ng-mouseleave to toggle it on mouse hover.
like this
<div class="btn-group"
ng-mouseenter="status.isopen = true"
ng-mouseleave="status.isopen = false"
uib-dropdown is-open="status.isopen">
<!-- rest of the markup-->
Here is a plunk
Related
I have a bit of an issue, im trying to select a radio button in a data-tables data. Im able to filter the single data-tables row down to one so it's the only one appearing on the page...but i've tried page.choose, page.find(<xpath>), page.find(<css>), i've also tried doing all the previous within a certain css selection and I can't quite figure out what's left to try.
The relevant HTML is here, unfortunately as this is a work item I can't post everything. however I AM able to click on the label if I specify the id via:
find(:xpath, "//label[#for='approve_row_5']").click however this doesn't actually seem to 'select' the radio button. I've also tried doing a wait after I filter the data-table results
anyways, here is the HTML for the 2 radio buttons after the row has been filtered (the radio buttons reside in a column)
<td class=" align-middle">
<div class="radio">
<input type="radio" name="approve_deny_row_5" id="approve_deny_row_5_approve" value="person_approve" data-ui-verify-key="test_approve" data-ui-verify-title="2017-07-13 14:59:46 -0400">
<label for="approve_deny_row_5_approve">
<span>Approve</span>
</label>
</div>
<div class="radio">
<input type="radio" name="approve_deny_row_5" id="approve_deny_row_5_deny" value="person_deny" data-ui-verify-key="test_deny" data-ui-verify-title="2017-07-13 14:59:46 -0400" data-ui-verify-url="/irrelevant/stuff">
<label for="approve_deny_row_5_deny">
<span>Deny</span>
</label>
</div>
</td>
I thought about just finding the span by the text and clicking it, which passes....but doesn't actually select the radio button. Also I tried searching by the specific value selector as well via a find('input[value="test_approve"]').click but that had no luck either
Any ideas?
Assuming the actual radio inputs are visible on the page (and not hidden to allow for styling) the methods that should work for this are
choose("Approve")
choose("Deny")
or
choose("approve_deny_row_5_approve")
choose("approve_deny_row_5_deny")
If those tell you they can't find the elements then it's most likely the input elements are actually hidden (for styling reasons) and you should be able to use the
choose('Approve', allow_label_click: true)
which will click on the label element associated with the input rather than the input element. That should produce the same result (setting the radio button) unless the behavior you're looking for is based on JS looking for a click on a very specific element (rather than the change event on the input). If that happens to be the case then you need to figure out exactly what element the JS is looking for clicks on, or fix the JS to behave in a more intuitive manner.
As we all know, javax.swing.JComboBox is a dropdown selection having E elements in it. When setting .setEditable(true), we now can make that JComboBox also a JTextField for other E element.
After searching with Google on this, it returned to us a suggestion of using by JQuery about autocomplete presented here. Autocomplete is working on the selection but here's the problem, we need to trigger the onChange attribute that contains the ${remoteFunction} to render a particular template on the update attribute of the said ${remoteFunction}.
<g:select
id="itemSelectId"
onChange="${remoteFunction(
controller:'item', action:'itemSelect',
update:[success:'updateItemId'],
params:'\'id=\' + escape(this.value)'"/>
<div id="updateItemId></div>
And on the <script> provided on the link we just change #combobox to #itemSelectId.
Have a look at select2, that library might offer the features you are looking for.
In JQuery Mobile, I have a navigation bar like the following:
<div id="nav_bar" data-role="navbar">
<ul>
<li><a>video</a></li>
<li><a>music</a></li>
<li><a>picture</a></li>
</ul>
</div>
Say now I want the nav bar to display "some content" only. This is my code:
$("#nav_bar ul").html("<li><a>some content</a></li>");
But the built-in JQuery Mobile style is not applied to it. How can I do this?
Thanks in advance.
When a page is opened, a script runs to add all the necessary classes. Replacing an item does not rerun the script.
I don't think you can do this without adding in the class manually by either specifying the classes in the text/using a variable or the following:
$("#nav_bar ul").html('<li><a>some content</a></li>').children('li').addClass('class-one class-two');
$("#nav_bar ul").html("<li><a>some content</a></li>");
.html() method destroys ul element and its contents then adds new content.
You should use .append() instead.
$("#nav_bar ul").append("<li><a>some content</a></li>");
If you actually want to replace the original content.
Target the div and use .html() method
$("#nav_bar").html("<ul><li><a>some content</a></li></ul>");
I have <button onclick="doSomething();">Do something</button> inside form_for helper. Сlicking on it causes form submission. Instead I want only to do something client-side work for what it is intended.
How can I achieve it?
EDIT: I can use only <button> tag for my purposes and it'll be rather well if I could place it inside form.
It's pretty easy: just add water return false;. See example:
<button onclick="doSomething();return false;">Do something</button>
I need weekend rest and 5 minutes googling after :)
EDIT: Working method with <form>
Make sure your button is written like this:
<input type="button" onclick="doSomething()">
You can select the the form by it's index. So if this is the first <form> element on your web page, it's index would be 0. And so on. The index is the order of the elements. If you're having trouble with this, you can always name your form and select it by name. Here's how:
var form = document.forms[0]; //selecting by index
var namedForm = document.forms["someForm"]; //Selects <form name="someForm">
var name = form.elements["nameInput"].value; //Selects <input type="text" name="nameInput">
And so forth. Let me know if you run into any trouble with this.
<button onclick="doSomething();void(0)">Do something</button>
Although it's usually better practice to hook into the button's click event from JavaScript, separating concerns.
I'm using the nifty 'combobox' variant of jQuery UI Autocomplete - see here: http://jqueryui.com/demos/autocomplete/#combobox
I have it within a Form element because its part of a form.
The Autocomplete Combobox has a <button> that is used to show the whole drop down list. However when the user presses it, the form submits. This appears to be because the <button> has a type="submit" attribute. The whole element is created by the button() call within the .combobox fn, see source code.
How do I stop it submitting?
(NB: This guy had the same problem but he fixed it by removing the form - I can't do that)
Ah, nevermind, I figured it out.
The problem is discussed on the jQuery forum here:
http://forum.jquery.com/topic/autocomplete-combobox-problem-when-it-is-placed-inside-a-form-tag
They suggest several different ways of adjusting the source code of the autocomplete combo to fix it. The simplest one seems to be this:
Change the line that says
$("<button> </button>")
to
$("<button type=\"button\"> </button>")
this prevents the type="submit" from being inserted into the final button.