CheckMultiSelect - Dojo - dojo

<input data-dojo-type="dijit.form.FilteringSelect"
data-dojo-props="name: 'jobSelect', store:Practiv.Q.jobStore, searchAttr:'JobNumber'"
id="jobIdSelect" />
Currently the above code displays a drop down with items that can be selected. I currently want to add a checkbox to the drop down list. I have replaced it with the code below.
<select data-dojo-type="dojox.form.CheckedMultiSelect"
data-dojo-props="name: 'jobSelect', store:Practiv.Q.jobStore, searchAttr:'JobNumber'"
id="jobIdSelect" ></select>
Unfortunately it doesnt work. Any suggestions?

instead of setting store in data-dojo-props set like this :-
<select data-dojo-type="dojox.form.CheckedMultiSelect" store="Practiv.Q.jobStore"
data-dojo-props="name: 'jobSelect', searchAttr:'JobNumber'"
id="jobIdSelect" ></select>
first you have ensure that your store is connected to CheckMultiSelect.

Related

How can I use the selected prop in a <select> that has a v-model?

Problem:
I have a <select> that uses a v-model to save the selected options into an array. The problem is that I can't use the selected properties on one of the <options> because the v-model ingores that and instead uses the bound JavaScript as it's source of truth.
What I have tried:
I tried looking up my problem on StackOverflow and I have found two questions but they didn't really help nor explain why and how. Here are the posts I have looked at:
using v-model on makes first option not appear in select - I tried this but nothing changed. My selected appear as selected but it was disabled.
Vue v-model with select input - the accepted answer wants me to define it in data and set it to null but that doesn't work when you take a quick glance at my code.
Code:
<select v-model="payload[index]" type="text">
<option v-if="entry.system_role !== null" selected :value="entry.system_role">
{{ entry.system_role }}
</option>
<option v-for="role in entry.roles" :key="entry.id" :value="role">
{{ role }}
</option>
</select>
That is the section with the select and as you can see the v-model is an array which I simply can't set to null. index is from a higher up v-for that renders the amount of <select>.
I tried setting selected to disabled and :value="entry.system_role" to value="" and leaving it empty (but I need the value of this option). Is there anything I can do to make it work? Maybe with a computed or method?

ionrangeslider: disable drag the slider. Only want to use for display

I am using ionrangeslider to display some temperature value. I like the way it displays.
I dont want the user to slide it. How can i disable the slider
I didnt find any option to diable dragging
this is the html and the js i am using
<input type="text" class="js-range-slider" name="my_range" value=""
data-min="40"
data-max="210"
data-from="115"
data-grid="true",
data-hide-min-max="true",
data-postfix="'F"
/>
$('.js-range-slider').ionRangeSlider()
It shows as
if you want to fix the values top/from, you have option:
to_fixed:true,//block the top
from_fixed:true//block the from

Geb: How to add new attribute and its value

I have an input element where I need to set one extra attribute and its value.
<input autocomplete="off" id="to_input" name="to" class="form-control arrival ui-autocomplete-input" placeholder="To" data-input-component="searchCondition" data-input-support="suggest" type="text">
I need to add the below attribute:
How can I do this in Geb?
To say a little more details, when I enter TPE in the input text box, some dropdown items appears and when I select one of them like
"Taipei, XXX.. (TPE)"
Than the new attributes are set automatically same as the picture above.
The only way to do it, is using JavaScript executor:
browser.driver.executeScript("your script")
And script using jquery will look like:
$('jquery-selector').attr('attribute-name', 'attribute-value');
Of course make sure to fill in your data in quotes!

Checkbox id keeps changing in webpage causing selenium script to fail

I am trying to automate a click on a certain checkbox. However after every run the checkbox id changes and script fails to find the element. Is there an alternate way of writing an xpath
<span id="field_key$0993573c-83b4-30d4-9139-44e44b496d0f$1food_contamination-checkbox" class="v-checkbox v-widget" ca-help-field-id="undefined">
<input id="gwt-uid-193" type="checkbox" value="on" tabindex="0" checked=""/>
<label for="gwt-uid-193"/>
</span>
xpath I used was this:
//*[#id='gwt-uid-193']
If the parent <span> id is fixed you can use it and go one level down to the checkbox
driver.findElement(By.cssSelector("#field_key$0993573c-83b4-30d4-9139-44e44b496d0f$1food_contamination-checkbox > input"));
Or use the parent class
driver.findElement(By.cssSelector(".checkbox > input"));
And if you have only one checkbox you can use the type attribute
driver.findElement(By.cssSelector("[type='checkbox']"));
I found a solution myself. We can use xpath based on the position of the checkbox, i.e.:
// input[#type='checkbox'])[position()=3]
This can be used for radio buttons as well. Replace checkbox with radio.

How to assert a selected item in a dojo multiselect with selenium IDE

I've populated a multiselect using dojo and added the selected values using combo.set("value", selectedValuesArray);
Problem is that when trying to assert the selected values using selenium IDE, I can't figure out how dojo does to "select" the selected values, I would expect to be like
<option value="111" selected>name</option>
But as you can see in the image, there's no indication in the image, not in the disabled (view) or the enabled (edit) one
There's no CSS classes added either, so i don't know how to assert if the item is selected or not.
Any idea?
Here's the generated HTML
<select data-dojo-attach-event="onchange: _onChange" data-dojo-attach-point="containerNode,focusNode" name="combo_project_participants" multiple="true" class="dijitMultiSelect" tabindex="0" id="dijit_form_MultiSelect_3" widgetid="dijit_form_MultiSelect_3">
<option value="1367">name 0 AdminEdge</option>
<option value="1368">Test User name Test User lname</option>
</select>
EDIT: this didn't allowed me to upload the image...
http://imageshack.us/photo/my-images/850/cf6a.jpg
Add
data-dojo-type="dijit/form/MultiSelect"
in your select-Tag. That should fix it.
For further information look at http://dojotoolkit.org/reference-guide/1.8/dijit/form/MultiSelect.html
Regards