Hi i used select2 (https://select2.github.io/) in my site and it's not working there. on click classes etc changed like example one but it didn't shows the select box options and there is no error in console.
I am using multi select option of it.
Here is code:
<select name="xo_pages_show_name[]" class="spages" multiple="true">
<option value="4">Optin Demo</option>
<option value="2">Sample Page</option>
</select>
Here is jquery code in custom file and included in footer.
$(".spages").select2({
placeholder: "Select Pages"
});
Here is the frontend screenshot: http://i.prntscr.com/0d079920de3b4e3081a153b45cb9753a.png
Any help ?
No it was just problem with z-index.
Main container z-index was more than inner one. so it was not showing
I am using JQuery Mobile for a mobile website, and for localization I am using i18next. I have an issue in my form, here it is :
<form id="form" method="POST" action="webservices/action.php">
<select id="subject">
<option value='0' data-i18n="contact.email" selected></option>
<option value='1' data-i18n="contact.name"></option>
<option value='2' data-i18n="contact.object"></option>
</select>
</form>
The localization works fine, I have the desired text displayed. However, the first option is not displayed and it is not possible to select it (it is possible to select other options). When looking at the select object in Javascript, it seems that the correct index is selected., therfore it is a UI problem.
I don't have any problem when not using i18next.
Anyone have an idea how to fix this issue ?
I found a workaround. I noticed that when I sent my form and reset it, the dropdown list was correclty displayed. So after initializing i18n, I used this:
document.getElementById("form").reset();
The form is now displayed correctly.
Ok so I am working on a project that was outsourced and now I get to jump in and fix everything before it gets pushed to production. I am currently trying to modify a line that creates a select form field. I read up on some of the different form helper methods to use in ruby, and over some of the available options for the method.
My problem is I can't seem to figure out how to get a default value to be displayed inside the select element without having it show up in the drop down options. This is what the line currently looks like.
<%= select :profile, :sexual_interest, SEXUAL_INTEREST_ARRAY, {:prompt => 'sexuality'}, {:class => 'selectFull'} %>
I tried changing some of the options using :default => 'sexuality' and then tried :disabled => 'sexuality'. But I seem to only be able to remove the option entirely from the select element or have it as the first value in the drop down list and being displayed as the default value.
If you are just having issues setting the default value of your select field using a ruby form helper, reference this post selecting a default for option field
If any one could give me some insight as to how to fix this issue I would greatly appreciate it. Any ideas would help, Thanks for reading.
-Alan
It is not possible to do that in HTML, so you'll have to use another approach.
Possible solution
Suppose you have:
<select name="selectBox" id="selectBox">
<option value="default">default</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
</select>
Then your javascript will looklike this:
$("#selectBox").change(function(){
$("#selectBox option[value='default']").remove();
});
The example on jsFiddle
Selectors
$('#selectBox option[value="SEL1"]')
For an index:
$('#selectBox option:eq(1)')
For a known text:
$('#selectBox option:contains("Selection 1")')
Hope it helps you!
I'm using Rspec and Capybara.
How can I write a step to check a checkbox? I've tried check by value but it can't find my checkbox. I'm not sure what to do, as I have in fact same ID with different values
Here is the code:
<input id="cityID" type="checkbox" style="text-align: center; opacity: 0;" value="61" name="cityID">
<input id="cityID" type="checkbox" style="text-align: center; opacity: 0;" value="62" name="cityID">
<input id="cityID" type="checkbox" style="text-align: center; opacity: 0;" value="63" name="cityID">
I found the following worked for me:
# Check
find(:css, "#cityID[value='62']").set(true)
# Uncheck
find(:css, "#cityID[value='62']").set(false)
It's better not to create multiple elements with the same id, so that (and not only for that) you can easily check/uncheck a checkbox with elegant
check 'cityID'
uncheck 'cityID'
If one can not avoid multiple elements with the same id and still needs to check a checkbox with certain value, he can do so with
find(:css, "#cityID[value='62']").set(true)
find(:css, "#cityID[value='62']").set(false)
More information on capybara input manipulations can be found here
When running capybara test, you got the page object. This you can use to check/uncheck any checkboxes. As #buruzaemon already mentioned:
to find and check a checkbox by name, id, or label text.
So lets assume you got a checkbox in your html like:
<label>
<input type="checkbox" value="myvalue" name="myname" id="myid">
MyLabel
</label>
You could check this with:
page.check('myid')
page.check('MyLabel')
page.check('myname')
Uncheck is the same just use page.uncheck method.
I think you may have to give unique ids to your form elements, first of all.
But with regards to Capybara and checkboxes, the Capybara::Node::Actions#check instance method will allow you to find and check a checkbox by name, id, or label text.
If the box is associated with text, e.g. 'Option 3', then as of capybara 3.0.3 you can just do
check 'Option 3'
I know this is an older question, but I have been working through this myself, and having tried all of the above, this is what finally worked for me:
find("input[type='checkbox'][value='#{cityID.id}']").set(true)
Hope this is helpful to someone. I am using Capybara 2.4.4.
An old topic but another solution is:
check('Option 3', allow_label_click: true)
Had some issues with custom checkbox which is hidden behind label element. Needed a allow_label_click: true.
With reference to this blog post,
check 'checkbox[name]', allow_label_click: true
For cases where there is a link in your label like "I agree to terms and conditions", the above code will open the page, which is not what you want.
Do this instead.
find(:css, "#checkbox_id", visible: false).execute_script('this.checked = true')
you can also use :xpath instead of :css if you have some problems finding it.
find(:xpath , '//*[#id="example"]').set(true)
on Chrome (and surely other browsers), you can "inspect element" and then by right clicking on the element you are interested in, there is 'copy xpath' if you don't know what xpath was, now you do.
You can also check that all the checkboxes are not checked with this example.
all('input[type=checkbox]').each do |checkbox|
checkbox.should_not be_checked
end
.set(true) didn't work for me so I had to call .click:
find(...).click
I believe this looks more elegant:
find_by_id("cityID").set(true)
Tested on Rails 7. Works fine.
To select the checkbox
check 'name_of_checkbox'
check find(".whenever input")[:id]
I think this will make capybara wait for any event listener attached to that input, which sometimes is a pain-in-the-ass if it doesn't waits ....
If that input doesn't have an ID, choose another property (there must be one)...
So...basically, I want this in my drop down:
•Nothing
•Option 1
•Option 2
•Option 3
Link to another page
Link to another page
I tried throwing a link_to to a select tag... that didnt work...
any ideas?
I don't think there would be a way to do such a thing only using Rails as rails would only put your options under HTML <option> tags for the select box.
You would have to put an onchange attribute which points to a JavaScript function which would do your redirection using window.location.