Is it possible to use multiselect boxes on Codeception?
My form code:
<form accept-charset="utf-8" class="form-vertical" id="solicitor-form" method="POST" action="http://mytest.dev/role">
<select multiple="true" id="optgroup" name="solicitor[]">
<option value="1" selected>Yorkshire</option>
<option value="2" selected>Quarry</option>
<option value="3" selected>William Hurst</option>
</select></div></div>
<input class="btn-large btn-success btn" type="submit" value="Update Access">
</form>
I've tried something like this for the test:
$i->SeeOptionIsSelected("#solicitor-form", 'Yorkshire');
$i->SeeOptionIsSelected("#solicitor-form", 'Quarry');
But codeception fails on SECOND select. So then I tried this:
$i->SeeOptionIsSelected('#solicitor-form select[name=solicitor[]]', 'Yorkshire');
$i->SeeOptionIsSelected('#solicitor-form select[name=solicitor[]]', 'Quarry');
but it doesnt seem to resolve solicitor[] correctly, specifically the [] because it trips itself up with the pattern match.
Edit: I tried Daverts answer like this:
$i->selectOption('optgroup',array('Quarry', 'Yorkshire'));
But this is the output when running the test:
* I select option "optgroup","lambda function"
It seems the "lambda function" is not returning the correct result?
Sorry for a delay.
It looks like this feature was not documented. Sorry, I totally forgot to update docs, when released 1.6.3.
You can pass an array of options as a second parameter to select multiple options.
$I->amOnPage('/form/select_multiple');
$I->selectOption('What do you like the most?',array('Play Video Games', 'Have Sex'));
$I->click('Submit');
Thanks, I will update a reference soon.
The bug is exactly with [] as far as I can see in my application, for example I have this select:
<select multiple="true" class="span h300" id="products[]" name="products[]">...</select>
and when I do:
$I->selectOption('Products', array('value', 'someOtherValue') );
I'll get the same error as you do.
As you can see I have some additional classes, .span and .h300 so I've used .h300 selector which is unique on that page and the test works perfectly, the values are in db and verification works as expected...
So to sum it up my selector which works is:
$I->selectOption('.h300', array('value', 'someOtherValue') );
Just my 2 cents on the issue, don't have enough time now to investigate what causes the problem with []...
Related
I'm using selectize.js for dropdown styling with livewire. I'm using livewire for a data table with sortable columns and pagination. The issue is, every time I make pagination or a sort by column, the javascript goes missing thus, there's no styling for the dropdown. I've solved the styling issue using wire:ignore. Now the new problem that I have is that the data passed to the dropdown is not accurate.
#foreach($applications as $application)
<p>{{$application->status}}</p>
<div wire:ignore>
<select class="selectize" name="status" data-width="200px">
#foreach(['Pending',
'Hired',
'Under consideration'] as $status)
<option
#if($application->status === $status) selected #endif>{{ $status }}</option>
#endforeach
</select>
</div>
#endforeach
Inside the <p>{{$application->status}}</p> tag, I get the status 'Pending' but on the dropdown, it shows 'Hired'. The correct status is 'Pending'.
(from comment) #stalwart1014 for example, when I use "select2" I do this
in content section
<select id="select2" wire:model="some">
//.....
</select>
in script section
$(document).ready(function() {
window.initSelectDrop=()=>{
$('#select2').select2({
placeholder: '{{ __('Select') }}',
allowClear: true});
}
initSelectDrop();
window.livewire.on('select2',()=>{
initSelectDrop();
});
});
and in component
public function hydrate()
{
$this->emit('select2');
}
This not always function properly with JS element...but hope this can help you. Greetings
it's maybe a bit late, but worth to mention for the future, I will do not point directly to your issue but explain the workaround of wire:ignore, the wire:ignore directive ignores the updates or changes for the further requests and updates, this attributes is defined for playing with JS third party library, the wire:ignore directive prevent all it's nested elements from updating if you wish to except Childs from updating you can use wire:ignore.self directive
Im trying to write a test that should check if an item in a is disabled.
The item is visible, but not clickable, and that's correct. But Im not sure how to write my test to make it pass this as correct.
My current test will fail due to not being able to select 'Create new'.
it('Not clickable', function() {
cy.visit(url);
cy.get('#dropDownMenu').should('be.visible', 'Choose...');
cy.get('#dropDownMenu').select('Create new').should('be.disabled');
})
How can I make my test find and understand that my select('Create new') should be disabled and that this is correct?
Here is the dropdownmenu html:
<select name="#dropDownMenu" id="dropDownMenu"
data-ng-change="$ctrl.onSelectdropDownMenu()"
data-ng-model="$ctrl.handleDropDownMenuOptions.val"
class="ng-pristine ng-valid ng-not-empty ng-touched">
<option data-ng-repeat="option in
$ctrl.handleDropDownMenuOptions.availableOptions"
data-ng-disabled="option.disabled"
value="NOT_SELECTED" disabled="disabled">Choose...</option>
<option data-ng-repeat="option in
$ctrl.handleDropDownMenuOptions.availableOptions" data-ng-
disabled="option.disabled" value="NEW" disabled="disabled">Create
new</option>
This solved it:
cy.get('#dropDownMenu').get('[value="NEW"]').should('be.disabled');
I have a working dropdown menu, and I can send its value to a function using "submit" button. It's quite clumsy however, as user always has to press the button, wait for the page to load and it refreshes the page so the user loses all other "settings" made on the page. I have understood that ajax would be the solution for this. I read the guide: http://www.web2py.com/books/default/chapter/29/11/jquery-and-ajax#The-ajax-function and tried a few methods, but it never works.
So this is my original working code. Some contents are stripped and altered, but the basics are the same. View demo.html:
<form action="change_dropdown">
<select name="tables">
<option value="first_value">first</option>
<option value="second_value">second</option>
<option value="third_value">third</option>
</select>
<br><br>
<input type="submit">
</form>
Action:
def change_dropdown():
if request.vars.tables:
session.tables = request.vars.tables
else:
session.tables = None
session.main_warning= "Incorrect parameters for function: 'change_dropdown()'."
redirect(URL('demo'))
return
Then the original action demo does something with session.tables and so on. But now about turning it to ajax. This is what I want:
<form>
<select name="tables", onchange="ajax('change_dropdown', [], '');">
<option value="first_value">first</option>
<option value="second_value">second</option>
<option value="third_value">third</option>
</select>
</form>
I also did this to the action: redirect(URL('demo'), client_side=True) as mentioned in an example. I have no idea why it's needed however.
But I don't know how to send the variable tables to the action. If I write it inside python URL helper, it crashes, because it thinks it's a python variable (where it's actually a JavaScript variable (?)). If I write it inside ajax() function's second parameter, it halts and gives me a weird error in JS console:
Uncaught Error: Syntax error, unrecognized expression: [name=[object HTMLSelectElement]]
If you need more information I can show you full codes for the methods I tried, but I think someone can take it from here.
You can send the variable as follows:
ajax("{{=URL('change_dropdown')}}",['tables'],':eval')
redirect(URL('demo'), client_side=True) is needed as you want to redirect the function that have sent the ajax request to redirect not 'change_dropdown' to redirect.
EDIT:
<form>
<select name="tables", onchange="ajax(\"{{=URL('change_dropdown')}}\",['tables'],':eval') ;">
<option value="first_value">first</option>
<option value="second_value">second</option>
<option value="third_value">third</option>
</select>
</form>
How to write Ajax code to retrieve information on to a particular part of webpage when we select option from a dropdown box?
I want information of a particular item that I had selected from a dropdown menu on particular part of my webpage.
Let's say your markup looks something like:
<select id="dropdown">
<option value="1">Some option</option>
<option value="2">Other option</option>
<option value="3">Helpfull option</option>
<option value="4">Don't pick this option</option>
</select>
<div id="details"></div>
In order to make AJAX calls I would use some sort of library. Using for instance jQuery will be much easier than writing code that handles ajax calls across different browsers. The code could look like this:
$('#dropdown').on('change', function(e) {
var currentValue = $('#dropdown').val();
$.get('<someurl>', function(data) {
$('#details').html(data);
});
};
Replace '<someurl>' with the url to the resource you want. Doing this without using jQuery or similar library is a bit more involved. For some guidance you can look at this answer: https://stackoverflow.com/a/2557268/355499
I have a simple form where there is a list:
<form method ="post" action ="">
<select>Select subject
<option value="1">Maths</option>
<option value="2">Science</option>
</select>
<input type="submit" name="Submit" />
My question is, if I select the option Maths, I would like the value to be sent eg /1.
What should be written in action? How should the route be written ?
get '' do
end
Your route could look something like this:
post '/subject' do
#subject = params[:subject]
# do whatever you want now
end
But you would need to give your select tag a name and your form an action:
<form method="post" action="/subject">
<select name="subject">
<!-- etc etc -->
Also have a look at related questions.
we tend to look at queries as GETs (makes sense, it is after all retrieving information)
rather than a POST which (doesn't actually change data) yet responds with a result page
a common (gnarly) pattern we often see is to rewrite (in js or redirect)
to the form
GET '/search/:q1/and/:q2' do
// result of search filtered by q1 and q2
end
which is also quite neat