why in my methods the methods are being calculated only after the second digits is placed in the input values - vue.js

error:-The specified value "NaN" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?
when i place the values in input values the in quantity and in rate, then expected result of input likes should be 4*5 = 20 but it doesn't do so instead 4*5a where a is the variable where any value of integer is placed then it only gives the expected result 20
<table>
<tr v-for="(pro,index,k) in pr`enter code here`oduct" :key="k">
<td>{{index+1}}</td>
<td><input type="number" v-model="pro.qnt" #keypress="calculatetotal(index)" style="width:110px;"></td>
<td><input type="number" v-model="pro.rate" #keypress="calculatetotal(index)" style="width:110px;"></td>
<input type="number" v-model="pro.totalamount" class="form-control"></td>
<td><input type="number" v-model="pro.Amount" style="width:110px;" #keypress="discountamount(index)"></td>
<td><input type="number" v-model="pro.discount" style="width:110px;" #keypress="discountamount(index)" :disabled = "selected===1"></td>
<td><input type="number" v-model="pro.totalamount" class="form-control"></td>
</table>
methods:{
calculatetotal: function(index)
{
var total;
total=this.product[index].qnt * this.product[index].rate;
this.product[index].Amount=total
},
discountamount: function(index)
{
//check whether the discoun is disabled or not
if( this.selected===1)
{
this.product[index].totalamount=this.product[index].Amount
}
else{
var dsa;
dsa=this.product[index].Amount - this.product[index].discount;
this.product[index].totalamount = dsa
}
}
}
the output should be 2*4=8 but it gives 2*4=0 and gives correct answer when 2*4a where a is integer varaible then only gives expected result 8

If you take a look at this answer : https://stackoverflow.com/a/3396805/5543999
You will see that with the event on key press, the input is not already altered.
Change your #keypress for #keyup and everything should work properly.

Related

how to apply filter on JQuery DataTable each columns? [duplicate]

I'm trying to filter table rows in an intelligent way (as opposed to just tons of code that get the job done eventually) but a rather dry of inspiration.
I have 5 columns in my table. At the top of each there is either a dropdown or a textbox with which the user may filter the table data (basically hide the rows that don't apply)
There are plenty of table filtering plugins for jQuery but none that work quite like this, and thats the complicated part :|
Here is a basic filter example http://jsfiddle.net/urf6P/3/
It uses the jquery selector :contains('some text') and :not(:contains('some text')) to decide if each row should be shown or hidden. This might get you going in a direction.
EDITED to include the HTML and javascript from the jsfiddle:
$(function() {
$('#filter1').change(function() {
$("#table td.col1:contains('" + $(this).val() + "')").parent().show();
$("#table td.col1:not(:contains('" + $(this).val() + "'))").parent().hide();
});
});
Slightly enhancing the accepted solution posted by Jeff Treuting, filtering capability can be extended to make it case insensitive. I take no credit for the original solution or even the enhancement. The idea of enhancement was lifted from a solution posted on a different SO post offered by Highway of Life.
Here it goes:
// Define a custom selector icontains instead of overriding the existing expression contains
// A global js asset file will be a good place to put this code
$.expr[':'].icontains = function(a, i, m) {
return $(a).text().toUpperCase()
.indexOf(m[3].toUpperCase()) >= 0;
};
// Now perform the filtering as suggested by #jeff
$(function() {
$('#filter1').on('keyup', function() { // changed 'change' event to 'keyup'. Add a delay if you prefer
$("#table td.col1:icontains('" + $(this).val() + "')").parent().show(); // Use our new selector icontains
$("#table td.col1:not(:icontains('" + $(this).val() + "'))").parent().hide(); // Use our new selector icontains
});
});
This may not be the best way to do it, and I'm not sure about the performance, but an option would be to tag each column (in each row) with an id starting with a column identifier and then a unique number like a record identifier.
For example, if you had a column Produce Name, and the record ID was 763, I would do something like the following:
​​<table id="table1">
<thead>
<tr>
<th>Artist</th>
<th>Album</th>
<th>Genre</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td id="artist-127">Red Hot Chili Peppers</td>
<td id="album-195">Californication</td>
<td id="genre-1">Rock</td>
<td id="price-195">$8.99</td>
</tr>
<tr>
<td id="artist-59">Santana</td>
<td id="album-198">Santana Live</td>
<td id="genre-1">Rock</td>
<td id="price-198">$8.99</td>
</tr>
<tr>
<td id="artist-120">Pink Floyd</td>
<td id="album-183">Dark Side Of The Moon</td>
<td id="genre-1">Rock</td>
<td id="price-183">$8.99</td>
</tr>
</tbody>
</table>
You could then use jQuery to filter based on the start of the id.
For example, if you wanted to filter by the Artist column:
var regex = /Hot/;
$('#table1').find('tbody').find('[id^=artist]').each(function() {
if (!regex.test(this.innerHTML)) {
this.parentNode.style.backgroundColor = '#ff0000';
}
});
You can filter specific column by just adding children[column number] to JQuery filter. Normally, JQuery looks for the keyword from all the columns in every row. If we wanted to filter only ColumnB on below table, we need to add childern[1] to filter as in the script below. IndexOf value -1 means search couldn't match. Anything above -1 will make the whole row visible.
ColumnA | ColumnB | ColumnC
John Doe 1968
Jane Doe 1975
Mike Nike 1990
$("#myInput").on("change", function () {
var value = $(this).val().toLowerCase();
$("#myTable tbody tr").filter(function () {
$(this).toggle($(this.children[1]).text().toLowerCase().indexOf(value) > -1)
});
});
step:1 write the following in .html file
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
</table>
step:2 write the following in .js file
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}

How to check 3 checkboxes upon value in selenium Java

I have 3 checkboxes with ID as id1,id2,id3 and name as name1,name2,name3.
<table id="ContentPlaceHolder1_cblType">
<tbody>
<tr>
<td>
<input id="ContentPlaceHolder1_cblType_0" type="checkbox"
name="ctl00$ContentPlaceHolder1$cblType$0" value="Clinician">
<label for="ContentPlaceHolder1_cblType_0">Clinician</label>
</td>
<td>
<input id="ContentPlaceHolder1_cblType_1" type="checkbox"
name="ctl00$ContentPlaceHolder1$cblType$1" value="Administration">
<label for="ContentPlaceHolder1_cblType_1">Administration</label>
</td>
<td>
<input id="ContentPlaceHolder1_cblType_2" type="checkbox"
name="ctl00$ContentPlaceHolder1$cblType$2" value="Therapist">
<label for="ContentPlaceHolder1_cblType_2">Therapist</label>
</td>
</tr>
</tbody>
</table>
I need to check it upon the value retrieving from excel.
data.getEmpType().get(rowCnt)
With above code I will get the value from excel.
How to do it?
First take string value from excel sheet.
Then collect all or required check boxes.
Loop the check boxes and verify against required value which collected from excel.
String requiredValue= "from excel file";
List<WebElement> checkBoxes=oWebDriver
.findElements(By.cssSelector("input[id^='ContentPlaceHolder1'][type='checkbox']"));
for (int i = 0; i < checkBoxes.size(); i++) {
if(checkBoxes.get(i).getAttribute("value").equals(requiredValue)){
checkBoxes.get(i).click();
break;
}
}
Or use more straight way through Xpath:
String excelValue = "from excel file";
String xpathExp = String.format(
"//table[#id='ContentPlaceHolder1_cblType']" +
"//td[label[text()='%s']]/input", excelValue );
driver.findElement(By.xpath(xpathExp)).click();
String ExcelValue= "data from excel";
**/*Create a list using common attributes of all three check boxes */**
List< WebElement> CB=driver.findElements(By.xpath("\\input[starts-with(#id,'ContentPlaceHolder1') AND #type='checkbox']"));
**/*Store size of List created in CB_size(as per your data is should be three */**
int CB_size=CB.size();
**/*below loop will execute for all three check boxes one by one and with which so ever your value from excel matches, it click and come out of the loop */**
for (int i = 0; i < CB_size; i++)
{
if(CB.get(i).getAttribute("value").equals(ExcelValue))
{
CB.get(i).click();
break;
}
}

Trying to connect a HTML5 date input with date model

I have an HTML5 date input element like this:
<input type="date" />
if you choose a date in this input a string will be the value, for example:
"2018-12-31"
In my model I want the date to be presented as the following string:
"2018-12-31T00:00:00.000Z" and not the simplified string.
How do I make sure that the date in my model keeps the correct format? I tried using a computed but since I am in a loop this time I cannot use them.
{{eventDate.date}}
<b-form-input
v-bind:value="eventDate.date"
v-on:input="eventDate.date = $event.target.value"
v-bind:id="'event-day-date-' + index"
size="sm"
type="date"
placeholder="2018-12-31"
>
</b-form-input>
As you can see here the eventDate.date is a long string but the input needs the format YYYY-MM-DD. I need to convert it to and from this format some way.
You could use a filter:
filter: {
dateToString(date) {
return date.toString().substr(0,10)
}
}
and then update your template
:value="eventDate.date | dateToString"
This is what I ended up using:
<input
v-validate="'required'"
v-bind:name="'eventdate-' + index"
v-bind:value="eventDate.date | dateToString"
v-on:input="eventDate.date = $event.target.value + 'T00:00:00.000Z'"
v-bind:id="'event-day-date-' + index"
class="form-control form-control-sm"
type="date"
placeholder="2018-12-31"
/>

How to Update All Rows of Table SQL

Below is my code:
#{
Layout = "/_SiteLayout.cshtml";
var db = Database.Open("MyDatabase");
var query = "SELECT * FROM Team";
var Teams = db.Query(query);
}
<form>
<table>
<tr>
<td>Team Name</td>
<td>Played</td>
<td>Points</td>
</tr>
#{ foreach(var Team in Teams){
<tr>
<td>#Team.TeamName</td>
<td><input type="text" value="#Team.Played" name="Played"/></td>
<td><input type="text" value="#Team.Points" name="Points"/></td>
</tr>
}
}
</table>
</form>
This is the result:
So what I want to do is update my whole table.
What is the SQL query to do this? I want to update Points and Games Played in my database for all teams once the form is posted.
I don't actually understand what exactly you are trying to achieve (update your whole table with what?), but here is some information you might find useful:
SQL Update Tutorial, SQL Update, Update from Select
Following is My Solution. Anyone have an efficient Solution?
#{
var db = Database.Open("MYDATABSE");
var query = "SELECT * FROM Team";
var Teams = db.Query(query);
var InsertQuery = "";
if(IsPost){
foreach(var Team in Teams){
var Points = Request[Team.TeamName];
var TeamId = Team.TeamId.ToString();
var Played = Request[TeamId];
var executeQueryString="UPDATE Team Set Points=#0, Played=#1 WHERE TeamId=#2";
db.Execute(executeQueryString, Points, Played, Team.TeamId);
}
Response.Redirect("~/UpdateTable.cshtml");
}
}
<br /><br />
<form action="" method="post">
<table>
<tr>
<td><h5>Team Name</h5></td>
<td><h5>Played</h5></td>
<td><h5>Points</h5></td>
</tr>
#{ foreach(var Team in Teams){
<tr>
<td>#Team.TeamName</td>
<td><input type="text" value="#Team.Played" name="#Team.TeamId"/></td>
<td><input type="text" value="#Team.Points" name="#Team.TeamName"/></td>
</tr>
}
}

Codeigniter inserting value into array

I asked a question on SO a few hours back.
How to insert an Array of field names from a form into SQL database in Codeigniter.
<tr>
<td><input type="text" name="user[0][name]" value=""></td>
<td><input type="text" name="user[0][address]" value=""><br></td>
<td><input type="text" name="user[0][age]" value=""></td>
<td><input type="text" name="user[0][email]" value=""></td>
<tr>
<td><input type="text" name="user[1][name]" value=""></td>
<td><input type="text" name="user[1][address]" value=""><br></td>
<td><input type="text" name="user[1][age]" value=""></td>
<td><input type="text" name="user[1][email]" value=""></td>
</tr>
..........//so on
This is the best answer I got
foreach($_POST['user'] as $user)
{
$this->db->insert('mytable', $user);
}
Now I want to pass a id generated from user session data into this array + a few other values like current time
Is it possible to tweak the above solution?
The Previous Discussion Here
foreach($_POST['user'] as &$user)
{
$user['additional_data'] = $_SESSION['additional_data'];
$user['current_time'] = time();
$this->db->insert('mytable', $user);
}
Note the & in &$user which is a pass by reference which allows manipulation of an array within a foreach loop. If you reference user later remember to unset($user) to remove the reference to the last element of the $_POST['user'] array.
I don't know if I'm missing something here, but can't you just remove the foreach and build your code like this:
$var1 = $_POST['user_var1'] * 3 + 1 / 5;
$this->db->insert('mytable', $var1);
$var2 = gettime();
$this->db->insert('mytable', $var2);
....
(where gettime() should be replace with whatever the PHP command for getting time is, plus maybe a formatting function)