I think I can use this method but don't know what to do, I have 2 drop down boxes
one is gadget and one is brand, for example if my gadget drop down is empty, then my brand drop down should be empty as well, if I select computer in the gadget drop down, the brand should should drop down should generate a brand of computer brand (example: acer, asus, hp,) then if I pick cellphones it should generate other brand, example (LG, Samsung, Xiaomi, Huawei) something like that, the brand is in a database table and also the gadget also have a database table. Sorry about my English, not my primary language
You can achieve this, using javascript. Here's an example:
Javascript
var gadgetList = ['Cellphone', 'Tablet', 'Kindle'];
select = document.getElementById('gadgets');
for(gadget in gadgetList) {
select.add(new Option(gadgetList[gadget]));
};
HTML
<select id="gadgets"></select>
Take a look at this Repl. It loads data from JSON for two dropdown combos. Gadgets and Devices, Devices is loaded dependant on Gadgets.
https://repl.it/#PaulThomas1/UprightIllegalMainframe
Related
I am using Cognos 11.0.8 version . I am using a multi select check box which pulls data from database. I have another multi select checkbox, which gets populated based on the values selected in the first multi select checkbox.
On selecting the items in the first multi select box ( on the focus out ) , I want to populate the second multi select check box based on the values selected. How to achieve this using JavaScript ?
Another doubt: In the SQL database, I have a column of type nvarchar . Since this column type is not in Cognos, what should be used as the equivalent in Cognos ?
Using Multi-select = Yes and Auto-submit = yes was possible in 10.2.1 (and maybe 11.0.4). At some point IBM decided that combination would cause performance problems in reports and make report users unhappy. (My response was, "Isn't that the report developers call?")
It is possible to use Multi-select = Yes and Auto-submit = Yes together, but not through the UI. You'll need to update the report specification (XML) manually.
Cognos: Report -> Copy report to clipboard
Text editor: Find the value prompt you want to modify, and add autoSubmit="true" at the end of the opening tag.
Text editor: Select all, copy.
Cognos: Report -> Open report from clipboard.
Updates to the downstream value prompt will occur on onclick, not onblur.
If you touch the Multi-line or Auto-submit properties again in the GUI, you may lose the setting.
For NVARCHAR, switch the data source connection to use the 32-bit native SQL Server client
https://www.ibm.com/support/pages/framework-manager-imports-datetime-and-datetime2-columns-nvarchar
You probably do not need to update XML manually
Adding an optional filter and adjusting some properties may be enough
Let's say we have the main query and a relationship in the data (like Sales reps and they belong to a Region)
Two data items and corresponding queries:
Query 1 for your prompt for [Region]
Query 2 for your prompt for [Sales Rep]
Query 3 is your main query for your report (list, crosstab, etc)
First multi select check box for [Region] and has a parm called ParmRegion (this is based on Query 1)
For the second multi-select check box (let's say that is Sales Reps)
Add OPTIONAL filter on Query2 for the multi-select prompt (not the main query for the report) like this
[Region] IN(?ParmRegion?)
add a reprompt button if you need
This way when you select content, the query that builds the second prompt is adjusted to only show Sales Reps that belong to that region
I am pretty new to web-scraping and have limited html/js knowledge. I am trying to select a value in a drop down box. My code manages to loop over the options in the drop down list and recognizes the one I want, I just can't seem to select it.
code:
`For Each opt In ieDoc.getElementById("dealerCodeList").Options
If opt.innerText = 9265 Then
opt.Focus
opt.Selected = True
opt.setAttribute("selected") = "selected"
Exit For
End If
Next`
The website I am using requires login access so I have attached screenshots. You can see it's the drop down list in the top left hand corner that I am trying to select a value for. Thanks in advance!
Website screenshot:
I have a table with variable number of records (could be up to hundreds) where its body is build with one ng-repeat.
Within each record, there are two input fields of type select where their contents is also built using ng-repear and the number of options for each is about 100.
This is working right now, except that it takes a lot of time for the page to be built (several seconds; I guess due to the large number of html records that AngularJS is adding to the DOM).
Here is an example of one of the selects:
<select class="form-control" ng-model="One_Source.Measuring_Method_Code">
<option ng-selected="{{One_Method.Value == One_Source.Measuring_Method_Code}}"
ng-repeat="One_Method in All_Collections.Parameters_Test_Methods"
value="{{One_Method.Value}}"
title="{{One_Method.Test_Method_Name}} | {{One_Method.Method_Internal_Name}}">
{{One_Method.Value}}
</option>
</select>
Two questions:
Is there a simple way to speed up the page building process?
As shown in the example, each option in the list has a title clause displaying a detailed description of the option's meaning. How can I add a title to the select showing the description of the current value?
For the first question I was thinking about building the list of options for each select element only upon clicking on it, but I'm not sure if that would be the best way to do it.
Try using one time bindings so that Angular doesn't watch the value by prefixing it with ::. It can also be more efficient to use track by in your ng-repeat if each row has a unique value, like an ID.
<option
ng-selected="{{One_Method.Value == One_Source.Measuring_Method_Code}}"
ng-repeat="One_Method in All_Collections.Parameters_Test_Methods track by One_Method.id"
value="{{::One_Method.Value}}"
title="{{::One_Method.Test_Method_Name}} | {{::One_Method.Method_Internal_Name}}"
>
{{::One_Method.Value}}
</option>
If you still can't gain the performance you're expecting from #doublesharps's answer, you will have to implement one of the following:
You could build a custom list that has a 'load more' button which would destroy say the first '50' options and load the next 50.
A better option would be to turn this into an autocomplete, where the user searches for values.
Virtual repeat - Something angular material does really well, it constantly draw's and re-draws new elements based on the scroll position inside the element.
Other resources:
http://blog.scalyr.com/2013/10/angularjs-1200ms-to-35ms/
https://github.com/stackfull/angular-virtual-scroll
http://klajd.github.io/angular-virtual-repeat/#/Home
I found a PARTIAL SOLUTION that still needs to be polished but is quite promising.
During creation of the page, I do not make use of ng-repeat for the options but instead deploy a single option with the value received for the field from the database (if any, otherwise the select element is left blank).
When the user clicks on the select element a $scope function is invoked that checks the number of options within the select element and, if less or equal to 1, the inner HTML of this select element is re-generated and deployed.
Though clicking on all these select in the page will take (accumulative) a comparable time as when built upon load, this time is distributed over several events (the user clicking on all the select elements) and hence it is not perceived by the user.
Now, by polishing I mean that there is a strange behavior. In order to see the generated list of options, I need to click on the select twice. Will keep investigating this and post the solution (hoping I find one).
I'm creating a site for my JavaScripting class and one of the first issues that has arisen has been the entry of data into arrays, and doing it in an efficient and quick pattern and then allowing the user to select entries and then use their selections in a function that updates either on refresh, or automatically.
My first task is to create multiple arrays that are linked and contain data for all the tanks offered in the game. That's more than 100 tanks.
My thought is to create a 'tank' object that then has a list of properties; 'armor values', 'nation', 'tank name'.
Assuming that works we move on.
The formatting and syntax is most likely wrong in the following uses.
Then we take each tank object and assign it to an array.
As an example, tank{0} would access values about the m4 Sherman.
I also need a method to display drop down lists of the available data that the user can select. For example;
Nation: American Tank: M4 Sherman Rotation of tank: 30 degrees.
The user's selection of nation should also narrow down the available tanks that can be selected. I'm assuming I would need another function that looks at the 'tank' object array that can then narrow down the results?
What I've Tried
I tried to make a simple list with Html and JavaScript and got this far:
<div id="select_nation">
<select>
<script>select_nation();</script>
</select>
</div>
I can't do that.
What I was trying to test was the ability to create a list using <select> from HTML and then populating that list with a function that would access an array that would return all values in the Nation Array that would then be used with .innerHTML to populate the different selection in the <select> tags.
Thank you for your help ahead of time and the small fence of text in front of you.
This demo will show you how you can build a select list from an array of javascript objects. From there you can look at which option they select and narrow your list of tanks to display elsewhere. This will all be done in javascript
EDIT - showing tanks list based on nation
Updated demo that displays the tanks that are from the selected nation:
http://jsbin.com/segojezosi/1/edit?html,output
Putting tank objects into an array is fine.
You can put your script anywhere and add options to the <select>.
Let's say that your <select> has an id.
<select id="mySelect">
Here is how you add options to that using JS.
var x = document.getElementById("mySelect");
var option = document.createElement("option");
option.text = "Tank";
x.add(option);
Consider using a framework which can do all these for you in a single command.
Angular is my favorite. jQuery is little flat - but would also do the job.
Please follow this and this tutorial before you go any further in this project.
Good luck.
Honestly been looking everywhere..
The traditional 3-dropdown list dynamically populated from database:
1st table gives airport departure
2nd table gives airports choices
from 1st choice
3rd table show routes between 1 and 2.
That works perfectly!!
When passenger chooses a route from the 3rd drop list I want to check if the value from 3rd dropdownlist is represented in a 4th table called "donations"
Some routes are marked for donation possibility where passengers can donate their unused baggagecapacity to charity
My last hurdle is:
when 3rd list is selected --> check for donationpossibilities--> if possible then show a hidden div on submit
...
I've tried and read so much and gotten a lot more clever and I think I have the query to check the values in order, but I'm lost...
Not sure what programming language you are using to load the dropdowns from your database, but one option that you could try is that when you are adding the html option elements to the 3rd dropdown list you could add a data attribute to each, for example:
<option value="route 1" data-can-donate="true">...</option>
Then if you are using jquery you could bind the change event to the 3rd dropdown and do something like this:
$('#ddlRoutes').change(function() {
var canDonate = $('#ddlRoutes > option:selected').data('can-donate');
if (canDonate) {
$('#myDiv').show();
}
};
Obviously this is untested but it may work for what you are trying to do.