I have a searchable dropdown. When I add a new row the searchable dropdown is no longer functional for the new rows. I have tried a number of things but nothing seems to work.
Actual PageSearchable DropdownAfter adding row
Now after adding a new row The search function does not work for the newly added row but continues to work for the first row.
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<link rel="stylesheet" href="css/chosen.css">
<link rel="stylesheet" href="css/dropstyle.css">
<script src="js/jquery-3.4.1.min.js"></script>
<SCRIPT language="javascript" type="ecf893489d53170da42401e8-text/javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 2) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</SCRIPT>
<SCRIPT language="javascript">
function calc(id) {
var row=id.parentNode.parentNode;
var quant=row.cells[2].getElementsByTagName('input')[0].value;
var price=row.cells[3].getElementsByTagName('input')[0].value;
res=parseFloat(quant)*parseFloat(price);
res = res || 0;
res = res.toFixed(2);
row.cells[4].getElementsByTagName('input')[0].value=res;
calcfr();
}
function calcfr() {
var table = document.getElementById("dataTable");
var sumVal = 0;
for (var i = 1; i < table.rows.length; i++) {
var rowTot=table.rows[i].cells[4].getElementsByTagName('input')[0].value;
rowTot = rowTot || 0;
sumVal = parseFloat(sumVal) + parseFloat(rowTot);
}
var freight=document.getElementById("invfreight").value;
freight = freight || 0;
sumVal = (parseFloat(sumVal)+parseFloat(freight))*1.18;
sumVal = sumVal.toFixed(2);
document.getElementById("invamt").value=sumVal;
}
</script>
</head>
<body>
<div class="centered">
<INPUT type="button" class='backbutton' value="Add Row" onclick="if (!window.__cfRLUnblockHandlers) return false; addRow('dataTable')" data-cf-modified-ecf893489d53170da42401e8-="" />
<INPUT type="button" class='backbutton' value="Delete Row" onclick="if (!window.__cfRLUnblockHandlers) return false; deleteRow('dataTable')" data-cf-modified-ecf893489d53170da42401e8-="" />
</div>
<Table id="invDetails" class="tablecenter" style="width:80%">
<tr>
<th colspan="6" style="text-align:center; font-size:20px;"> Tax Invoice
</th>
</tr>
<tr>
<td>
<label style="font-size:15px;" for="cloc">Invoice No :
</label>
</td>
<td>
<input class="no-outline" style="font-size:15px;" type="text" id="invno" name="invno" value="HYD/22-23/">
</td>
<td>
<label style="font-size:15px;" for="cloc">Dated :
</label>
</td>
<td>
<input class="no-outline" style="font-size:15px;" type="date" id="invdt" name="invdt" value="">
</td>
<td>
<label style="font-size:15px;" for="cloc">Freight :
</label>
</td>
<td>
<input class="no-outline" style="font-size:15px;" type="text" id="invfreight" name="invfreight" onchange="calcfr(this)" value="">
</td>
</tr>
<tr>
<td>
<label style="font-size:15px;" for="cloc">Buyer :
</label>
</td>
<td colspan="3">
<SELECT data-placeholder="Select a Customer..." name="customer" style="font-size:15px;" class="chosen-select" tabindex="1" data-dropdown>
<option value="">
</option>
<option value='1'>4 S Modular Pvt Ltd - Hyderabad
</option>
<option value='2'>A V Designers & Interiors - Hyderabad
</option>
<option value='3'>Aarcube Concepts - Hyderabad
</option>
<option value='4'>Adi Innovations - Ichalkaranji
</option>
<option value='5'>Adventure Office Systems - Hyderabad
</option>
<option value='6'>Aertsen Modulars Pvt Ltd - Hyderabad
</option>
<option value='7'>Alexida Furniture India Pvt Ltd - Hyderabad
</option>
<option value='8'>Amigos Interiors & Engg.Works - Tirupati
</option>
<option value='9'>Anb Interiors & Exteriors Pvt Ltd - Hyderabad
</option>
<option value='10'>Arani Wood - Hyderabad
</option>
<option value='11'>Asian Enterprises - Vijayawada
</option>
<option value='12'>Bhasuram - Trivandaram
</option>
<option value='13'>Bhk Modulars - Hyderabad
</option>
<option value='14'>Bloom Industries - Visakhapatnam
</option>
<option value='15'>Cascade Exports Pvt Ltd - Hyderabad
</option>
<option value='16'>Confra Furn Systems Pvt Ltd - Hyderabad
</option>
<option value='17'>Crafts Ville - Hyderabad
</option>
<option value='18'>Cute Furniture Enterprises - Hyderabad
</option>
<option value='19'>D R R Modulr Trends - Hyderabad
</option>
<option value='20'>D Scales - Hyderabad
</SELECT>
</td>
<td><label style="font-size:15px;">Invoice Value :</label></td>
<td><input class="no-outline" style="font-size:15px;" type="text" id="invamt" name="invamt" disabled value=""></td>
</TR>
</table>
<TABLE id="dataTable" name="dataTable" class="tablecenter" style="width:80%" >
<tr>
<th></th>
<th>Description of Goods</th>
<th>Quantity</th>
<th>Rate</th>
<th>Amount</th>
</tr>
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD>
<select data-placeholder="Choose an Item..." name="item[]" class="chosen-select" tabindex="1" data-dropdown >
<option value=""></option>
<option value='187'>(H) Gas Springs Piston 100N Numbers - Sidmark</option>
<option value='188'>(H) Gas Springs Piston 100N Numbers - Sidmark</option>
<option value='189'>(H) Gas Springs Piston 60N Numbers - Sidmark</option>
<option value='190'>(H) Gas Springs Piston 80N Numbers - Sidmark</option>
<option value='191'>0 Crank Normal Numbers - Sidmark</option>
<option value='192'>110 Integra Click Hinge Soft Closing Crank '0' Numbers - Sidmark</option>
<option value='193'>110 Slide On Hinge Crank '8' Numbers - Sidmark</option>
<option value='1'>2 In 1 Anthracite C 006 23 x 1 - I</option>
<option value='3'>2 In 1 Anthracite C 006 23 x 1 - X</option>
<option value='194'>58Deaga650X0000 With Railing Silver-500MM Numbers - Sidmark</option>
<option value='195'>58Deaka650/0000 With Out Railing Silver-500MM Numbers - Sidmark</option>
<option value='196'>58Eagb650Xa0Sb With Railing Grigio A6-500MM Numbers - Sidmark</option>
<option value='197'>58Eakb650Xa0Sb With Out Railing Grigio A6-500MM Numbers - Sidmark</option>
<option value='198'>8 Crank Normal Numbers - Sidmark</option>
<option value='199'>827-Glue Pot Cleaner Kilograms - Sidmark</option>
<option value='4'>Acrylic 2 In 1 Anthracite DC 71R0 23 x 1 - I</option>
<option value='5'>Acrylic 2 In 1 Anthracite DC 71R0 23 x 1 - X</option>
<option value='6'>Acrylic 2 In 1 Met Pearl DC 18R5 23 x 1 - I</option>
<option value='7'>Acrylic 2 In 1 Met Pearl DC 18R5 23 x 1 - X</option>
<option value='8'>Acrylic 2 In 1 Textile Beige Pearl DC 71R7 23 x 1 - I</option>
<option value='9'>Acrylic 2 In 1 Textile Beige Pearl DC 71R7 23 x 1 - X</option>
<option value='10'>Acrylic 2 In 1 Textile Copper Metallic DC 69R4 23 x 1 - I</option>
<option value='11'>Acrylic 2 In 1 Textile Copper Metallic DC 69R4 23 x 1 - X</option>
<option value='1177'>Adriatic Blue HG DC I106 22 x 1.3 - I</option>
<option value='1176'>Adriatic Blue HG DC I106 22 x 1.3 - I</option>
<option value='1178'>Adriatic Blue HG DC I106 22 x 1.3 - X</option>
<option value='1397'>Adriatic Blue SF I105 22 x 0.8 - I</option>
<option value='1396'>Adriatic Blue SF I105 22 x 0.8 - I</option>
<option value='1398'>Adriatic Blue SF I105 22 x 0.8 - X</option>
<option value='1399'>Adriatic Blue SF I105 22 x 1.3 - I</option>
<option value='1400'>Adriatic Blue SF I105 22 x 1.3 - X</option>
<option value='240'>Advanced Oak DC 59K4 22 x 0.8 - I</option>
<option value='239'>Advanced Oak DC 59K4 22 x 0.8 - I</option>
<option value='241'>Advanced Oak DC 59K4 22 x 0.8 - X</option>
<option value='242'>Advanced Oak DC 59K4 22 x 2 - I</option>
<option value='243'>Advanced Oak DC 59K4 22 x 2 - X</option>
<option value='244'>Advanced Oak DC 59K4 30 x 0.8 - I</option>
<option value='245'>Advanced Oak DC 59K4 30 x 0.8 - X</option>
<option value='246'>Advanced Oak DC 59K4 30 x 2 - I</option>
<option value='247'>Advanced Oak DC 59K4 30 x 2 - X</option>
</SELECT>
</TD>
<TD><INPUT type="text" name="qty[]" onchange="calc(this)"></TD>
<TD><INPUT type="text" name="rate[]" onchange="calc(this)"></TD>
<TD><INPUT type="text" name="amt[]" disabled></TD>
</TR>
</TABLE>
<script src="js/rocket-loader.min.js" data-cf-settings="ecf893489d53170da42401e8-|49" defer=""></script>
<script src="js/chosen.jquery.js" type="text/javascript"></script>
<script src="js/prism.js" type="text/javascript" charset="utf-8"></script>
<script src="js/init.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
Related
My source html-snippet:
<select id="X1" class="">
<option data-auto="X-input-option" value=""> --Select-- </option>
<option data-auto="X-input-option-0" value="10 "> 10 -XYZ </option>
<option data-auto="X-input-option-1" value="100 "> 100 -ABC </option>
<option data-auto="X-input-option-2" value="200 "> 200 -MNP </option>
</select>
part of code
abc= ".//select[#id='X1']";
$(By.xpath(abc)).shouldBe(visible).selectOptionByValue(ID);
Issue is :Dropdown values has spaces in it , how to select a value by using selectOptionByValue if it has spaces.
See i.e.:https://www.guru99.com/select-option-dropdown-selenium-webdriver.html
Than this could be your solution:
$(By.xpath(abc)).shouldBe(visible).selectOptionByValue('10 ');
I want option value in MsgBox one by one, like:
Week:-1 12-May-2019
Week:-2 19-May-2019
Week:-3 26-May-2019
Week:-4 02-Jun-2019
Html:
<table id="tblMain" cellspacing="1" class="table table-bordered table-hover dataTable" border="0" style="border-color:SaddleBrown;font-size:Small;">
<tr style="background-color:#3C8DBC;">
<td colspan="2"><select name="cmbWeeks" onchange="javascript:setTimeout('__doPostBack(\'cmbWeeks\',\'\')', 0)" id="cmbWeeks" class="form-control" style="font-family:Arial;font-size:9pt;">
<option value="12-May-2019">Week:-1 12-May-2019</option>
<option value="19-May-2019">Week:-2 19-May-2019</option>
<option value="26-May-2019">Week:-3 26-May-2019</option>
<option value="02-Jun-2019">Week:-4 02-Jun-2019</option>
<option selected="selected" value="">[Select Week]</option>
</select><br />
<select name="ddllocation" onchange="javascript:setTimeout('__doPostBack(\'ddllocation\',\'\')', 0)" id="ddllocation" class="form-control" style="font-family:Arial;font-size:9pt;">
<option selected="selected" value="GPC">GPC</option>
You can try the following css selector combination assuming your iframe reference is correct
Dim options As Object, i As Long
Set options = ie.document.getElementsByTagName("iframe")(0).contentDocument.querySelectorAll("[name=cmbWeeks] option")
For i = 0 To options.Length - 1
MsgBox options.Item(i).Value
Next
I have multiple number of dropdown menu like below. List of second menu is dependent to first and so on.
<select [(ngModel)]="firstModel" id="first" (ngModelChange)="ChangeDropdown(this.wholeList[firstModel],'second')">
<option value="" disabled selected>select a category</option>
<option *ngFor="let item of first" [value]="item">{{item}}</option>
</select>
<br>
<select [(ngModel)]="secondModel" id="second" (ngModelChange)="ChangeDropdown(this.wholeList[firstModel][secondModel],'third')">
<option value="" disabled selected>select a category</option>
<option *ngFor="let item of second" [value]="item">{{item}}</option>
</select>
<br>
What I need is Lets say if the user choose data from second menu then the menu coming after second one should select 'select a category' option
I have tried following code:
ChangeDropdown = (value,dropdownName) => {
if(dropdownName == 'second') {
this.secondModel = null;
this.thirdModel = null;
this.fourModel = null;
}
This is not selecting that select a category option instead it makes menu blank.
In Angular mat-select
In Ts file
import {Component} from '#angular/core';
#Component({
selector: 'select-value-binding-example',
templateUrl: 'select-value-binding-example.html',
styleUrls: ['select-value-binding-example.css'],
})
export class SelectValueBindingExample {
firstModel = '';
secondModel = '';
thirdModel = '';
ChangeDropdown (eventInfo) {
console.log(eventInfo)
if(eventInfo.source._id == 'second') {
this.secondModel = '';
this.thirdModel = '';
}
}
}
In Html File
<mat-form-field>
<mat-select id="first" [(ngModel)]="firstModel" (selectionChange)="ChangeDropdown($event)">
<mat-option value="" disabled>Select categor</mat-option>
<mat-option value="option1">Option 1</mat-option>
<mat-option value="option2">Option 2</mat-option>
<mat-option value="option3">Option 3</mat-option>
</mat-select>
</mat-form-field>
<br/>
<mat-form-field>
<mat-select id="second" [(ngModel)]="secondModel" (selectionChange)="ChangeDropdown($event)">
<mat-option value="" disabled>Select category</mat-option>
<mat-option value="option1">Option 1</mat-option>
<mat-option value="option2">Option 2</mat-option>
<mat-option value="option3">Option 3</mat-option>
</mat-select>
</mat-form-field>
<br/>
<mat-form-field>
<mat-select id="third" [(ngModel)]="thirdModel" (selectionChange)="ChangeDropdown($event)">
<mat-option value="" disabled>Select category</mat-option>
<mat-option value="option1">Option 1</mat-option>
<mat-option value="option2">Option 2</mat-option>
<mat-option value="option3">Option 3</mat-option>
</mat-select>
</mat-form-field>
I am working in multiple dropdown menu. I have created an array from php and it looks like this:
https://api.myjson.com/bins/1emzic
Now from this json I want to display 4 dropdown menu.
In the first drop down I need to display
"FS A", "FS MT" and "FS OTHER"
Based on the first selection I need to display its related data in second third and fourth and so on as I add in my data.
This is what I need to bind
<select [(ngModel)]="first" id="first">
<option value="" disabled selected>select a category</option>
<option *ngFor="let item of first_list" [value]="item.category">{{item.category}}</option>
</select>
<br>
<select [(ngModel)]="second" id="second">
<option value="" disabled selected>select a category</option>
<option *ngFor="let item of first_list" [value]="item.category">{{item.category}}</option>
</select>
<br>
<select [(ngModel)]="third" id="third">
<option value="" disabled selected>select a category</option>
<option *ngFor="let item of first_list" [value]="item.category">{{item.category}}</option>
</select>
<br>
<select [(ngModel)]="four" id="four">
<option value="" disabled selected>select a category</option>
<option *ngFor="let item of first_list" [value]="item.category">{{item.category}}</option>
</select>
Here is my json data
{"FS A":{"BKK":{"BKK PULL":{"BKK SR1":[]},"BKK PUSH":{"BKK BCDE1":[],"BKK BAKE SE1":[]}},"RSM2":{"CHIANGMAI":{"CMI WS SE1":[],"CMI WS SE2":[]},"NORTH":{"NO1 SE1":[],"NO2 SEPLUS1":[],"NO3 SE1":[]},"ASM HOTEL BKK":{"BKK HO 5STARS1":[],"BKK HO SR1":[],"BKK HO SR2":[],"BKK HO SR3":[]}}},"FS MT":{"FSR1":{"FSA1":{"FS MAKRO":[]}},"FSR2":{"FSA2":{"FS FOODLAND":[],"FS GAS STATION":[],"FS VILLA MARKET JP":[],"SIAM FOODSERVICE":[]}},"FS LOCAL EXP":{"FS LOCAL EXP BKK":{"FS LOCAL EXP BKK":[]},"FS LOCAL EXP CD":{"FS LOCAL EXP CD":[]},"FS LOCAL EXP MM":{"FS LOCAL EXP MM":[]}}},"FS OTHER":{"FS OTHER":{"FS OTHER":{"FS OTHER":[]}}}}
Can anybody help me in this?
Here I am working:
https://stackblitz.com/edit/angular-dsylxi
You need to define the dependency on each other and based on that you can fill the models and its options. I will go for generic solution which can be applied with one function and works for all the drop-downs.
This are the model variables you need
wholeList:any = [];
first:any = [];
second:any = [];
third:any = [];
four:any = [];
firstModel = ''
secondModel = ''
thirdModel = ''
fourModel = ''
Then first you fill the first dropdown
this.testService.get_data().subscribe(
res => {
this.wholeList = res;
this.first = Object.keys(this.wholeList).map(a=> a);
console.log("res", this.first);
},
err => {
console.log(err);
}
)
Then in the view you need to fire a dependency which should look like this, note that I am defining dependency ChangeDropdown(this.wholeList[firstModel],'second')"
<select [(ngModel)]="firstModel" id="first" (ngModelChange)="ChangeDropdown(this.wholeList[firstModel],'second')">
<option value="" disabled selected>select a category</option>
<option *ngFor="let item of first" [value]="item">{{item}}</option>
</select>
<br>
<select [(ngModel)]="secondModel" id="second" (ngModelChange)="ChangeDropdown(this.wholeList[firstModel][secondModel],'third')">
<option value="" disabled selected>select a category</option>
<option *ngFor="let item of second" [value]="item">{{item}}</option>
</select>
<br>
<select [(ngModel)]="thirdModel" id="third" (ngModelChange)="ChangeDropdown(this.wholeList[firstModel][secondModel][thirdModel],'four')">
<option value="" disabled selected>select a category</option>
<option *ngFor="let item of third" [value]="item">{{item}}</option>
</select>
<br>
<select [(ngModel)]="fourModel" id="four">
<option value="" disabled selected>select a category</option>
<option *ngFor="let item of four" [value]="item">{{item}}</option>
</select>
and finally one common function which will update the models
ChangeDropdown = (value,dropdownName) =>{
this[dropdownName] = Object.keys(value).map(a=>{
return a;
})
}
Demo
I am new to VueJS. How would I be able to sort a table using VueJS? I have four dropdown menus (to select starting month and starting year to an ending month and year) then display/update that to the table? I am grabbing data from a Sqlite database btw. My goal is to select a timeframe, then have it display in the table. I have been researching and watching videos on Youtube. But I have not been able to find a solution. Any help would be appreciated.
<template> <div class="time">
<h2></h2>
<center>
<span>Select Timeframe: </span>
<select v-model="startMonth">
<option disabled value=" ">Month</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select v-model="startYear">
<option disabled value=" ">Year</option>
<option>2017</option>
<option>2018</option>
</select> -
<select v-model="endMonth">
<option disabled value=" ">Month</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select v-model="endYear">
<option disabled value=" ">Year</option>
<option>2017</option>
<option>2018</option>
</select>
<button>Go</button> <br><br>
<span>start: {{ startMonth }}</span>
<span>{{ startYear }} - </span>
<span>{{ endMonth }}</span>
<span>{{ endYear }}</span>
<table class = "table table-bordered table-sptried table-condensed">
<thead>
<tr>
<th>Month</th>
<th>Day</th>
<th>Year</th>
<th>Time</th>
<th>Activity</th>
</tr>
</thead>
<tbody>
<tr v-for="client in clients" :key="client.id">
<td>{{client.Months}}</td>
<td>{{client.Days}}</td>
<td>{{client.year}}</td>
<td>{{client.Time}}</td>
<td>{{client.Activity}}</td>
</tr>
</tbody>
</table> </center> </div> </template>
You can use computed feature of Vue. Instead of reading directly from clients, you can create computed variable (for example sortedClients). Then you can do anything in this function
For example:
computed: {
sortedClients: function() {
function compare(a, b) {
const aTime = <get time from a>
const bTime = <get time from b>
if (aTime < bTime)
return -1;
if (bTime > bTime)
return 1;
return 0;
}
return this.clients.sort(compare);
}
}
For time conversion, you can use https://momentjs.com/