How to test select2 dynamic tags with codeception - jquery-select2

To select an option from a pre populated list works as follows:
$selector = "select[name='tags']";
$this->tester->openSelect2($selector);
$this->tester->selectOptionForSelect2($selector, array('text' => $tag));
$this->tester->closeSelect2($selector);
Found this gist for that https://gist.github.com/tortuetorche/412fbac4f17db5e78e79.
The issue is that my select2 has dynamic tags as well. (https://select2.org/tagging)
Has anyone figured out how to create dynamic tags using codeception? Thanks.

Usually I use the WebDriver Keys class to tests dynamic select2 fields.
To fill dynamics select2 inputs, you can try this :
// Fill your dynamic tag with the option you want to search
$I->fillField($selector, 'Orang');
// Then, wait for the option is loaded
$I->waitForText('Orange', 30);
// Finaly, use WebDriverKeys to select the option
$I->pressKey($selector, \Facebook\WebDriver\WebDriverKeys::ENTER);
It works to choose multiple options too.

Related

How to destroy all select2 selects that belongs to a specific class

I'm developing a software in which all the select elements are using the select2 library.
In the footer there is this code to do that:
$('select').select2();
Now I'm developing a new screen that some selects will use select2 and others don't so I created the class ".noSelect2" for the ones that aren't supposed to have select2.
When I put this code, it only destroys the first select:
$('.noSelect2').select2('destroy')
What can I do to destroy all the elements?
The problem with using a class to target something with Select2 is that Select2, in the past, copied classes to the container elements so you could apply CSS there. As a result, using the class to target the <select> also resulted in targeting the <div> or other container element, and that would trigger an error.
The easy solution is to add select in front of your class selector, so it only targets the <select> elements.
$('select.noSelect2').select2('destroy')
In 4.0.0 there is a known bug with calling select2('anything') in that it isn't consistent when selecting multiple instances. This should be fixed by the next release (4.0.1) of Select2.

How to select polymer dart custom elements in a angular dart view

So, I'm trying to select a polymer custom element(using paper_elements) in my view with querySelector. I'm able to select regular html elements just fine. In particular, I'm trying to select a specific paper-input element. I want to be able to query it's input element which is buried in it's second shadowroot.
I've tried the following:
querySelector('#my-paper-input::shadow #input')
querySelector('paper-input::shadow input')
and a bunch of other variations. However, no matter what I do, the query always returns null. It's driving me mad because I can style it in css. What do?
As far as I know you have to use several steps
querySelector('#my-paper-input').shadowRoot.querySelector('input');
but you should also be able to access the value using the attribute of the outer element like
querySelector('#my-paper-input').attributes['value'] or
querySelector('#my-paper-input').attributes['inputValue']
you could also use http://pub.dartlang.org/packages/angular_node_bind
but I wasn't able using Angular with paper-elements recently (see https://github.com/angular/angular.dart/issues/1227)

extend rich:select / h:select to have multiple selections

Is it possible to extend rich:select or h:selectOneMenu to enable multiple selection? I am looking for a jsf component which looks like the jQuery Chosen plugin.
The component should let me select multiple options from the drop down.
Please note that I can not use h:selectManyMenu or list box because of the specific requirement.
Note: just saw the tags field below the description box while posting a question. I am looking exactly for the same functionality, except that I want a JSF component, not a js plugin.
Any suggestion is highly appreciated. Thanks in advance.
I would use that jQuery Chosen plugin and do something like this:
use jQuery to apply it to your select
use jQuery to get the selected data
pass the data to the backing bean via a hidden input field
There may be 'pure JSF' ways but it looks like more work. If you find something interesting let me know.

Struts2 create dropdown dymamically based on first dropdown value in Struts2 using hibernate

Hi I am using Struts2 and hibernate now in my jsp I have Two dropdown ,on selection of first drop it should call a function and retrive the values for second drop down from the database
Please help
Well you have number of options here and some of them are
user struts2-jquery plugin which comes with this feature where you can create two dependable select.
user simple jquery with JSON (struts2 plugin) and use ajax.
i will prefer second approach which is much more flexible.create a custom JS function with help from jquery and when use select first option from drop down call your action methods which will send JSON data based on the selected values and use JQuery build in JSON parsing mechanism to parse the content and fill second drop-down.
a simple Google search will give you a number of results.

My dropdown is not showing the data

I am having a html dropdown
<select id="ExternalIp" onchange="externalIpchange()"></select>
I bind the data to dropdown through jquery and a I am passing data from controller which is working properly. I want to change the look and feel of the dropdown so I called a function
$("#ExternalIp").selectbox();
Now the look and feel of drop down is changed but it is not showing the data which I bind to dropdown. I am not getting what is the problem. Plz help
It appears as if the jQuery plugin you are using resets the values bound to the select list.
Look for a method provided within your jQuery plugin to rebind the data which you earlier attached with jQuery or style your element first and then try binding the values.
Cheers!!!

Resources