My company does A/B testing for clients who have sites built with various CRM/Middleware providers. One them uses a product built on the Ember.js framework. I do not have access to the source code for the site itself. I need to change the value of a selector component upon page load which I am planning on doing with a Javascript one-liner.
Unfortunately, I can't just change the value of the DOM element directly using document.getElementByID('selectorElement) as this won't trigger other events on the page. I tried using document.getElementByID('selectorElement).click() which had no effect on the page at all. I think it has to be done by interfacing with Ember directly, but I'm not very familiar with the framework.
As an example, imagine you were to navigate to https://guides.emberjs.com/release/. An answer to this question would be a script that can be run in the console that would change the version selector from the default to one of the other options.
The HTML for the component in question is below.
<select name="_name_" data-test-selector="_name_" data-test-form-field-input="_name_" aria-invalid="false" id="ember53-input" class="_inlineSelectInput_tuesss _selectInputBase_tuesss _inputBase_tuesss _inlineInputBase_tuesss _inlineSelectInput_tuesss _selectInputBase_tuesss _inputBase_tuesss _inlineInputBase_tuesss ember-view">
<option disabled="" hidden="" value="">
Select a type
</option>
<option value="Option1">
Option1
</option>
<option value="Option2">
Option2
</option>
<option value="Option3">
Option3
</option>
</select>
Related
Any solution need only work in WebKit browsers.
The internet is littered with attempts to make this work - some who claim to have it working and some who claim it can't be done. In my experience, none of the suggested methods have worked. Is this simply impossible?
Supposing I have a select like <select id="mySelect" />
Things I've tried:
select::before -- Is added to the DOM, but doesn't render
<label for="mySelect" /> -- Does nothing when clicked/tapped
document.querySelector('select').click() -- Does nothing
The method from this answer (React-specific) -- Cannot assign a click handler or any other handler that can programmatically open the select to begin with
I'm open even to a jQuery solution, even though we're using React and we would be loading jQuery solely for triggering the select to open.
On third party select components: The goal is to trigger the mobile OS's native select control for the user, so something like React-Select is not suitable.
A dirty solution updated from here (https://stackoverflow.com/a/249219/3684265)
var _select = document.getElementById("test");
_select.addEventListener("mouseout",function(){
this.size = 1;
});
_select.addEventListener("mouseover",function(){
this.size = 4;//set to show the number that you want
});
<select id="test">
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
<option value="1">5</option>
<option value="1">6</option>
</select>
I’m currently working with vue-i18n for internationalization and got a problem with lists in this topic. The language can be changed using a dropdown menue on a permanent navigation bar.
There is a Component A with a child Component B. Within this child component there are two lists, filled via:
<select id="element1" class="ui dropdown" v-model="application.datatable">
<option value="">... ... ...</option>
<option v-for="i in tableRows" :value="i.id">
<p>
{{$t(i.element.name)}}
</p>
</option>
</select>
Here I’m experiencing the problem, that the {{$t(i.element.name)}} is translated correctly, but won’t change after the first initialisation. So if I change the language from english to german, all other labels and strings are changed, but the lists are still in english (Wochentag: |Monday|Tuesday|…)
For this, I would need a possibility to either rerender the lists (maybe via id, but found nothing in jQuery) or a way to get the lists rerendered every time the language changes.
Anyone having an idea about this?
Huge thanks!
AdV
Bind your select to ($i18n.locale) in html
<select name="lang" v-model="$i18n.locale">
<option v-for="lang in langs" :value="lang">
#{{ $t('general.' + lang) }}
</option>
</select>
Note: # symbole before curly brackets is because this code is in my .blade.php file. If you are in the .vue file, it is note needed.
First a little background info:
I'm a little new to data scraping, I started earlier this week. I've been trying to scrape data from 2 websites, I noticed that the information I wanted was dynamically loaded with java scripts (I think), so a simple attempt at downloading the webpage HTML with the python urllib2 package, didn't give the information wanted. I did lots of research and settled on using the PyQT4 package to download the fully loaded HTMLs (with the information loaded from the java scripts), I chose PyQT4 because I couldn't get other packages (eg. selerium) to work. The information that I want that is in these websites is stored in HTML tables, and they show up as fancy tables when you actually load the page in a browser.
Now onto the main question:
Using PyQT4 I managed to download full HTMLs, but I noticed that the webpages that I downloaded didn't actually have the full table of information I was looking for because both websites paginated the tables of information, but they gave an option to show various numbers of rows of the tables in a dropdown list, including the option to show all. So I looked for a way to select a value from the dropdown list through PyQT4, I found this link:
How to choose value from an option list using PyQt4.QtWebKit.
I tried everything the answers on that page suggested but nothing seemed to work, I also tried what is suggested here:
http://www.qtcentre.org/threads/52161-How-to-choose-value-from-(html)-option-list-using-WebKit
But it also didnt work.
The HTML code of the dropdown lists from both websites are below:
1:
<div class="dataTables_length" id="datatable-1_length">
<label> Show
<select aria-controls="datatable-1" class="form-control input-sm" name="datatable-1_length">
<option value="10">
10
</option>
<option value="25">
25
</option>
<option value="50">
50
</option>
<option value="100">
100
</option>
<option value="-1">
All
</option>
</select>
entries
</label>
</div>
2:
<div class="dataTables_length" id="qs-rankings_length">
<label>
<span class="result-mune">
<span>
Results
</span>
per page:
</span>
<select aria-controls="qs-rankings" class="" name="qs-rankings_length">
<option value="100">
100
</option>
<option value="200">
200
</option>
<option value="-1">
All
</option>
</select>
</label>
</div>
</div>
Is there a way to download the full tables from the websites?
Thanks
I'm using jQuery v1.10.2. I need to change the value of a select drop down. I'm using the same js file for both mobile and desktop view (both have different html files). These are the two approaches I've tried to change the value of drop-down:
$('#cType').val('visa');
$("#cType").prop("selectedIndex", 1);
it works fine for the desktop and changes the value, but for mobile it doesn't work. For mobile as well as desktop this is the HTML code I'm using:
<div class="cTypeContainer">
<label for="cType"><span class="red">*</span>Card Type</label>
<select name="cType" class="ui-nodisc-icon ui-alt-icon" id="cType">
<option>Select</option>
<option value="visa">Visa</option>
<option value="master">Master Card</option>
<option value="discover">Discover</option>
<option value="amExpress">American Express</option>
</select>
</div>
I don't know why it isn't working for mobile. I'm using jQuery mobile, do you think it could possibly intefering with its working?
I changed the JS code to this and it worked like a charm:
$('#cType').val('visa').selectmenu('refresh');
All it does is basically refreshes the styling to show the dynamically selected value.
I have a little problem with jQuery Mobile and AngularJS.
I want a multi-select so the user can chose a category. Categories have parents and childs. The whole structure comes from a database so its an asynchronous call to get the data.
The problem is that the select element has the data but doesn't show it unless you click on the first empty option.
Maybe i'll better show than tell
http://plnkr.co/edit/7UwGjSRfGEnhIvSrtGjV
<div ng-show="catsready" id="jqselect">
<label for="multiselect" class="select">Multi-select:</label>
<select id="multiselect" multiple="multiple" data-native-menu="false" data-icon="bars" data-iconpos="left">
<option>Choose a few options:</option>
<optgroup ng-repeat="parent in cats" label="{{parent.name}}">
<option ng-repeat="child in parent.childs" value="" jq-select>{{child.name}}</option>
</optgroup>
</select>
</div>
After angular has added/changed the optiongroups and options, you need to tell jQM to refresh the selectmenu widget:
$("#multiselect").selectmenu("refresh", true);
API Doc: http://api.jquerymobile.com/selectmenu/#method-refresh