I am looking at how to populate a hidden_field with the value of a f.select field however I am having difficulty. I was going to use javascript but the html created from my haml makes it difficult to assign an id to the select I wish to pass the value from.
= f.select :trial, [['Yes', 'true'], ['No', 'false']], {}, :id => "free-trial", class: 'selectpicker mandatory'
This generates the following html
<div class="col-sm-4">
<select class="selectpicker mandatory" id="free-trial" name="campaign[trial]" style="display: none;">
<option value="true">Yes</option>
<option value="false" selected="selected">No</option>
</select>
<div class="btn-group bootstrap-select mandatory">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" data-id="free-trial" data-original-title="" title="">
<span class="filter-option pull-left">No</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" style="max-height: 133px; overflow-y: auto; min-height: 0px;">
<li rel="0">
<a tabindex="0" class="">
<span class="text">
Yes
</span>
<i class="icon-ok check-mark"></i>
</a>
</li>
<li rel="1" class="selected">
<a tabindex="0" class="">
<span class="text">No</span>
<i class="icon-ok check-mark"></i>
</a>
</li>
</ul>
</div>
</div>
This html when display is actually two selects one hidden with the ID assigned and a second which is displayed without the id associated. As a result my clicking on the visible select means the associated jquery doesnt fire.
If i understood you properly, you want catch value from select to hidden_input. You can use jquery to do that:
$('#free-trial').on('change', function(){
var val = $(this).val();
$('#your_hidden_input').attr('value', val);
}
Related
I want to remove the option from the auto completion input drop down select list.
Unable to get the option value until unless i click on input drop down list. Once I click on the input field the options are auto populating, But i dont know how to get the option here.
The input field before click on it:
<div class="field-group">
<label for="add-reminders-role-picker">Project Role</label>
<div class="aui-ss" id="add-reminders-role-picker-single-select">
<input autocomplete="off" class="text aui-ss-field ajs-dirty-warning-exempt" id="add-reminders-role-picker-field">
<div class="aui-list" id="add-reminders-role-picker-suggestions" tabindex="-1"></div>
<span class="icon aui-ss-icon noloading drop-menu"><span>More</span></span></div>
<select class="aui-field-select select aui-ss-select" name="roleName" id="add-reminders-role-picker" multiple="multiple" style="display: none;">
<option value=""></option>
</select>
</div>
After click on input field:
<div class="field-group">
<label for="add-reminders-role-picker">Project Role</label>
<div class="aui-ss" id="add-reminders-role-picker-single-select" data-query="">
<input autocomplete="off" class="text aui-ss-field ajs-dirty-warning-exempt" id="add-reminders-role-picker-field">
<div class="ajs-layer-placeholder">
<div class="ajs-layer box-shadow" style="width: 248px; position: fixed; left: 153.667px; top: 399.167px; max-height: 171.833px; display: none;">
<div class="aui-list" id="add-reminders-role-picker-suggestions" tabindex="-1" style="display: block;">
<div class="aui-list-scroll" tabindex="-1">
<h5>Project role</h5>
<ul class="aui-list-section aui-last" id="project-role">
<li class="aui-list-item aui-list-item-li-administrators active">
<a class="aui-list-item-link" href="#" title="Administrators">Administrators</a>
</li>
<li class="aui-list-item aui-list-item-li-developers">
<a class="aui-list-item-link" href="#" title="Developers">Developers</a>
</li>
<li class="aui-list-item aui-list-item-li-event-watchers">
<a class="aui-list-item-link" href="#" title="Event Watchers">Event Watchers</a>
</li>
<li class="aui-list-item aui-list-item-li-privilege-users">
<a class="aui-list-item-link" href="#" title="Privilege Users">Privilege Users</a>
</li>
<li class="aui-list-item aui-list-item-li-users">
<a class="aui-list-item-link" href="#" title="Users">Users</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<span class="icon aui-ss-icon drop-menu noloading"><span>More</span></span></div>
<select class="aui-field-select select aui-ss-select" name="roleName" id="add-reminders-role-picker" multiple="multiple" style="display: none;">
<option value=""></option>
</select>
</div>
Here I want to remove the "Users" option from the 'li' in the second code snippet. Please help me regarding this.
Try:
$('#aui-list-item-li-users').remove();
this code will remove the 'li' with the class = aui-list-item-li-users
I have a bootstrap select dropdown.
I want to change the selection when I load the page. How can I write jquery for the same?
I've tried using $('.dnsType').toggle('Hostname') but that didnt work :(
This is my code:
<div class="row form-group">
<div class="btn-group dnsType <%= getColumnSize(editMode) %>">
<button class="btn btn-xs white dropdown-toggle" id="dnsType" type="button" data-toggle="dropdown" aria-expanded="true">
<span data-value="IP Address">IP Address</span><b class="caret"></b>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dnsType">
<li><a value="IP Address">IP Address</a></li>
<li><a value="Hostname">Hostname</a></li>
</ul>
</div>
<div class="<%= getColumnSize(editMode) %>">
<div class="form-horizontal">
<input type="text" name="ipAddress" class="ipAddress" data-name="IP Address" class="form-control" value="<%= controller.ipAddress %>">
<span class="validationErrorMessage"></span>
</div>
</div>
</div>
Bootstrap dropdowns are not like <select> elements. They don't have "selections". It is just a dropdown that shows a list of links when you click the button. I'm guessing that you just want to change the text for that button when the page loads. Here is how you can do that:
$("#dnsType span").text("Hostname").attr('data-value','Hostname');
This sets the text to "Hostname" and changes the data-value attribute to "Hostname"
I am currently creating this option where one obtains all the data from the database, and it can see the data when clicking a dropdown list. The only thing is, I would like to click a single <li> from that dropdown, and place it in a input box below, so the item can be submitted to a different table.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Business Objective
<span class="caret"></span>
</button>
<ul id="bolist" style="margin-left: 575px;" class="dropdown-menu">
<c:forEach var="row" items="${objectives.rows}" varStatus="status">
<li>
<c:out value="${row.objective}"/>
</li>
</c:forEach>
</ul>
</div>
So all the data is in the dropdown there. My input looks like this:
<div class="form-group col-md-8">
<label class="col-md-11 control-lable">Objective</label>
<div class="col-md-11">
<form:input type="text" path="objective" id="inputobjective" class="form-control input-lg"/>
</div>
</div>
Output (for each of the selections, i want the selected value to get into the input)
This should work for you:
$('#bolist').on('click','li',function(){
$('#inputobjective').val( $(this).find('a').text() );
});
I am playing with Fuel UX pillbox component and I want to make it part of a form I have to submit. Unfortunately, the control does not contain any form element to submit which makes it cool but useless (for me). I added a Input::Hidden element in the HTML code but now I have to force the pillbox component to work with the form element which I am not sure how to do.
<div class="form-group">
<label for="{name}" class="col-sm-4 control-label text-right">Tags</label>
<div class="col-sm-8">
<div class="pillbox" data-initialize="pillbox" id="pillbox-{name}">
<ul class="clearfix pill-group">
<li class="pillbox-input-wrap btn-group">
<a class="pillbox-more">and <span class="pillbox-more-count"></span> more...</a>
<input type="text" class="form-control dropdown-toggle pillbox-add-item" placeholder="add item">
<button type="button" class="dropdown-toggle sr-only">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="suggest dropdown-menu" role="menu" data-toggle="dropdown" data-flip="auto"></ul>
</li>
</ul>
<input type="hidden" name="{name}" id="{name}" value="">
</div>
</div>
What I really need is to use JavaScript to update the Input::Hidden element when a new tag is added or removed from the list.
Oh, JavaScript is not my forte.
The Fuel UX component has event for add and remove new tag the probably has to be used but as I mentioned - not sure how to implement it.
If you have any suggestions, please help, or if you have any other suggestions on how to implement the Pillbox component with a HTML form - I am opened to new ideas.
Thanks.
You could use the Pillbox events to capture the pillbox data via the items method.
HTML:
<div class="pillbox" id="myPillbox1">
<ul class="clearfix pill-group">
<li class="pillbox-input-wrap btn-group">
<a class="pillbox-more">and <span class="pillbox-more-count"></span> more...</a>
<input type="text" class="form-control dropdown-toggle pillbox-add-item" placeholder="add item">
<button type="button" class="dropdown-toggle sr-only">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="suggest dropdown-menu" role="menu" data-toggle="dropdown" data-flip="auto"></ul>
</li>
</ul>
</div>
<input id="pillboxInput" type="text" value="">
Javascript:
$('#myPillbox1').on('added.fu.pillbox edited.fu.pillbox removed.fu.pillbox', function pillboxChanged() {
$('#pillboxInput').val( JSON.stringify( $('#myPillbox1').pillbox('items') ) );
});
This example outputs into a JSON object structure, since the pillbox control supports text and value attributes (and more with data attributes) for each pill.
I have following HTML structure:
<button class="dropdown-toggle selectpicker btn btn-primary" data-toggle="dropdown" type="button" data-id="strategic_reseller_country" title="United States">
<div class="dropdown-menu open" style="max-height: 245.6px; overflow: hidden; min-height: 40px;">
<ul class="dropdown-menu inner selectpicker" role="menu" style="max-height: 243.6px; overflow-y: auto; min-height: 38px;">
<li class="" rel="0">
<a class="" style="" tabindex="0">
<span class="text"/>
<i class="glyphicon glyphicon-ok icon-ok check-mark"/>
</a>
</li>
<li rel="1">
<a class="" style="" tabindex="0">
<span class="text">Andorra</span>
<i class="glyphicon glyphicon-ok icon-ok check-mark"/>
</a>
</li>
<li rel="2">
<a class="" style="" tabindex="0">
<span class="text">United Arab Emirates</span>
<i class="glyphicon glyphicon-ok icon-ok check-mark"/>
</a>
</li>
<li rel="3">
<a class="" style="" tabindex="0">
<span class="text">Afghanistan</span>
<i class="glyphicon glyphicon-ok icon-ok check-mark"/>
</a>
</li>
<li rel="4">
<li rel="5">
<li rel="6">
<li rel="7">
<li rel="8">
<li rel="9">
<a class="" style="" tabindex="0">
<span class="text">Netherlands Antilles</span>
<i class="glyphicon glyphicon-ok icon-ok check-mark"/>
</a>
</li>
</ul>
</div>
So how could I get the item from list?
I am new to Node.Js (JavaScript) so I don't know how to achieve it in node.Js but it can be achieved in java as follows :
Select dropdown = new Select(driver.findElement(By.class("dropdown-menu inner selectpicker")));
dropdown.selectByVisibleText("Andorra");
Just click the desired option.
driver.findElement(webdriver.By.css('#mySelection > option:nth-child(4)'))
.click();
or by value
driver.findElement(webdriver.By.css('#mySelection > option[value=apple]'))
.click();
Note that I've changed your 'By' to a css selector. I'm lazy and like to just drill into the option from developer tools and select Copy CSS Path (chrome) or Copy Unique Selector (firefox).
You can create a function that select the value you desire
like this...
driver.wait(
until.elementLocated(By.id("continents")), 20000
).then(element => {
selectByVisibleText(element, "Africa")
});
function selectByVisibleText(select, textDesired) {
select.findElements(By.tagName('option'))
.then(options => {
options.map(option => {
option.getText().then(text => {
if (text == textDesired)
option.click();
});
});
});
}
For anyone stuck on this, here is how I did it for a <select> option:
<select id='mySelection'>
<option value='0'>Hello</option>
<option value='1'>Everybody</option>
<option value='2'>Got</option>
<option value='3'>It</option>
</select>
In Selenium for NodeJS, you would grab the It <option>:
var webdriver = require('selenium-webdriver');
var driver = new webdriver.Builder().
withCapabilities(webdriver.Capabilities.chrome()).
build();
driver.findElement(webdriver.By.id('mySelection')).sendKeys('It');
When you .sendKeys() for the option it has to equal the text displayed to the user in the dropdown.
In your case just grab the parent element then sendKeys() for the child element.
I would use Cheerio for this.
module.exports = {
"login": function (browser) {
var cheerio = require("cheerio")
browser
.url("http://www.wikipedia.org")
.waitForElementVisible('body', 1000)
.waitForElementVisible('select#searchLanguage', 1000)
.source(function(result) { // .source() dump the page source in the variable
$ = cheerio.load(result.value)
var num_languages = $('select#searchLanguage option').length
console.log('Wikipedia.org Languages: ' + num_languages);
})
.end();
}
};
or simply using the .execute() command
If you have
<select id='mySelection'>
<option value='cat'>Cat!</option>
<option value='dog'>Dog!</option>
<option value='rat'>Rat!</option>
</select>
You can use the method sendKeys passing either the value or the text
driver.findElement(webdriver.By.id('mySelection')).sendKeys('Rat!');
or
driver.findElement(webdriver.By.id('mySelection')).sendKeys('rat');