I have this selectAllToggle function, which reactively selects or deselects all elements in the array. Reactively in that when the selectButton is used, all the checkboxes in the browser show selected or deselected.
The problem arise when one or more (but not all) checkboxes were manually selected. If any checkboxes are selected, the selectButtonName changes to "Deselect All", and when pressed, I want it to deselect all.
The code I have correctly updates the array, in that it sets the 'selected' property to false for every student in the array, but the reactivity of it doesn't work - the tick boxes of the students that were selected manually, remain ticked in the browser.
selectAllToggle: function(key, row, $event) {
var setTo = false;
var newname = "Select All";
if (this.selectButtonName === "Select All") {
setTo = true;
newname = "Deselect All";
}
if (this.selectButtonName === "Deselect All") {
setTo = false;
newname = "Select All";
}
if (this.students.length > 0) {
for (var i = 0; i < this.students.length; i++) {
this.students[i]['selected'] = setTo;
}
}
this.selectButtonName = newname;
console.log(this.students); //shows the correct 'selected' state for all
},
The view looks like this (using vue-tables-2)
<v-client-table
v-if="gridReady"
v-model.sync="students"
:columns="gridcolumns"
:options="gridoptions"
ref="grid">
<input type="checkbox"
slot="selected"
slot-scope="{row, update}"
v-model="row.selected"
#change="selectStudent('select', row, $event)">
</v-client-table>
What can I do to make this function reactive?
For deselecting after one or more element selection, you may use a computed property as the snippet below for reactively perform.
new Vue({
el: '#app',
data: {
selected: [],
clientList: [1, 2, 3, 4, 5]
},
computed: {
selectAll: {
get: function() {
return this.selected.length > 0 &&
this.selected.length <= this.clientList.length
},
set: function(value) {
let list = [];
if (value) {
this.selected = this.clientList
} else {
this.selected = []
}
}
}
},
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.7/vue.js"></script>
<div id='app'>
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Client Name</th>
<th style="width: 10%"><input type="checkbox" v-model="selectAll" /></th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in clientList">
<td style="font-weight: bold;width: 75%">{{item}}
</td>
<td style="width: 25%">
<input type="checkbox" :value="item" v-model="selected" />
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Not able to find the element with input tag. Need to find the element in the input tag. eclipse could catch the element till nobr and not further.
input id="ServiceFromDate" class="inactvDtTmTxt" name="$PHCClaimSearch$pServiceFromDate" data-ctl="["DatePicker"]" data-formatting="yes" value="05/02/2017" data-value="5/2/2017" style="padding-right:17px;width:11.719em;" validationtype="date" data-change="[["refresh", ["thisSection","", "", "&=", "", ",",":event","","HCClaimSearch"]]]" data-display-value="05/02/2017" type="text"/>
//table[contains(#role,'presentation')][contains(#id,'pyActionArea')]//table[1]//table[contains(#role,'presentation')][contains(#section_index,'1')]//tbody//tr[2]//td[1]//following::nobr[1]//following::span[#id='$PHCClaimSearch$pServiceFromDateSpan']/input
driver.findElement(By.xpath("//input[#id='ServiceFromDate']")).sendKeys("04242015")
<table id="" role="presentation" section_index="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<tr>
<td class="dataLabelWrite" style="height:24px;width:143px;">
<td class="dataValueWrite" style="height:24px;width:190px;">
<nobr>
<ins id="pega-calendar" style="display: none;" data-calendar="{"img":"webwb/pzspacercal_12860256145.gif!!.gif","locale":[["0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50","51","52","53","54","55","56","57","58","59"],0,"M/d/yyyy","M/d/yyyy h:mm a","Today",["January","February","March","April","May","June","July","August","September","October","November","December"],["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],["AM","PM"],"Apply","Close"]}"/>
<script> var positionDatePickerIcn = function(control){ /* BUG-47098 - Following block filters out IE8(both quirks and standards modes) and IE9 (standards mode) */ var addMarginFlag = true; if(document.documentMode && navigator.userAgent.indexOf("Trident/4") > -1){ //IE8: skip for both standards and quirks mode addMarginFlag = false; } else if(document.documentMode && document.documentMode >= 9 && navigator.userAgent.indexOf("Trident/5") > -1){ //IE9: skip for standards mode addMarginFlag = false; } if (addMarginFlag) { var icnEle = control.lastChild; if(icnEle.tagName.toLowerCase() == 'img'){ icnEle.style.marginTop = '0px'; } } }; </script>
<span id="$PHCClaimSearch$pServiceFromDateSpan" role="group" aria-label="Service From Date : " data-calendar="{"d":[0,0],"l":0}" style="display:inline-block; width:inherit;" onmouseover="pega.c.DatePicker.dtTmHvr(event);">
<input id="ServiceFromDate" class="inactvDtTmTxt" name="$PHCClaimSearch$pServiceFromDate" data-ctl="["DatePicker"]" data-formatting="yes" value="05/02/2017" data-value="5/2/2017" style="padding-right:17px;width:11.719em;" validationtype="date" data-change="[["refresh", ["thisSection","", "", "&=", "", ",",":event","","HCClaimSearch"]]]" data-display-value="05/02/2017" type="text"/>
<img class="inactvIcon" src="webwb/pzspacer_11792674401.gif!!.gif" data-ctl="["DatePicker"]" style="cursor:pointer;"/>
</span>
</nobr>
</td>
<td class="dataLabelWrite" style="height:24px;width:125px;">
<td class="dataValueWrite" style="height:24px;width:190px;">
<td class="dataLabelWrite" style="height:24px;width:101px;">
</tr>
</tbody>
</table>
The problem is with the HTML, at least as you've pasted here.
there are a number of places inside that tag that have double-quoted text inside of double-quoted text. e.g. the input element has the following attribute:
data-ctl="["DatePicker"]"
Other attributes I found with this problem: data-calendar, data-change
Once I corrected all of the places that this is a problem with outer single quotes, I was able to find the input using your Xpath from the Chrome developer tools
data-ctl='["DatePicker"]'
As you mentioned, you could catch the element till <nobr> tag and not further that is because the <ins> tag is having style="display: none;", so will use JavascriptExecutor to change the attribute and then send the text as follows :
((JavascriptExecutor)driver).executeScript("document.getElementById('pega-calendar').style.display='block';");
driver.findElement(By.xpath("//input[#id='ServiceFromDate']")).sendKeys("04242015");
I am using jquery kendo grid in my project where i used row template to show three column in one row. Below is the code:
<table id="grid" style="width:100%">
<thead style="display:none">
<tr>
<th>
Details
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
<script id="rowTemplate" type="text/x-kendo-tmpl">
<div>
<span class="name" style="font-size:medium">#: FirstValue #</span>
<span class="name" style="font-size:medium">#: SecondValue #</span>
</div>
<tr>
<td style="width:30%">
#: GetName #
<span class="name" style="font-size:14px; color:green">#: Designation #</span>
<span class="name" style="font-family:Arial; font-size:small">#: Company #</span>
</td>
</tr>
</script>
in the above code i am just passing my model data it's working fine but when i added one div which have value firstName and LastName so it is also repeating with this data but i want to to show separately.How do i show it separately so that it should not repeat with grid.
there is one problem in your html template.
Please replace '#' with 'Javascript:void(0)'.
Error:- #: GetName #
Fix:- #: GetName #
Hope that's work for you.
http://jsfiddle.net/parthiv89/t0w3ht6m/1/
if you like then don't forget to like.
I got solution by own, Firstly i changed code in my schema like this:
schema: {
parse: function (data) {
var items = [];
for (var i = 0; i < data.data.length; i++) {
if (data.data[i].CorrectValue != null && data.data[i].SearchValue != null) {
$("#spnSR")[i].innerHTML = "<b>"+"Get results for this text: "+"</b>"+data.data[i].CorrectValue;
$("#spnSV")[i].innerHTML = "<b>" + "Searched for this text: " +"</b>" + data.data[i].SearchValue;
}
}
var product = {
data: data.data,
total: data.total
};
items.push(product);
return (items[0].data);
},
}
Then in html i used two span to show this value which is there in for loop.
and it's working fine for me.
Thanks everyone.
I am using Aspnet mvc and .NET rotativa to convert html to pdf.
I am using CustomSwitches to display paging in PDF footer as the example [here
#{ Layout = null;}
<!DOCTYPE html>
<html>
<head>
<script>
function subst() {
var vars = {};
var x = document.location.search.substring(1).split('&');
for (var i in x) { var z = x[i].split('=', 2); vars[z[0]] = unescape(z[1]); }
var x = ['frompage', 'topage', 'page', 'webpage', 'section', 'subsection', 'subsubsection'];
for (var i in x) {
var y = document.getElementsByClassName(x[i]);
for (var j = 0; j < y.length; ++j) y[j].textContent = vars[x[i]];
}
}
</script>
</head>
<body style="border:0; margin: 0;" onload=" subst()">
<table style=" width: 100%">
<tr>
<td class="section"></td>
<td style="text-align:right">
<span class="page"></span> / <span class="topage"></span>
</td>
</tr>
</table>
</body>
</html>
but when generating the report in PDF, does not appear the page of the last page, someone has gone through it and found a solution?
I managed to solve my problem by adding the following code:
CustomSwitches = "--footer-right \"[page]/[topage]\""
Something like this for a full example:
return new ViewAsPdf("MyAction", Model) {
FileName = "somepdf.pdf",
WkhtmlPath = "~/Rotativa"
,CustomSwitches = "--footer-right \"[page]/[topage]\""
};
I have been using a javascript editor and it works fine in it's built-in browser but when I try it in IE and Firefox it loads but then doesn't function.
The HTML is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<noscript>
<p>This page requires JavaScript. Please turn on JavaScript if your browser supports it and reload the page.</p>
</noscript>
<script type = "text/javascript" src="jscripts/pvar.js">
</script>
<title></title>
</head>
<body>
<form name="form1">
Version 2012.10.1.1a
<h2>
Panasas Sizing Form
</h2>
<br>
<table colspan='3' border='0'>
<tr>
<td align="left"> <input type="text" name="textq1" id="dtextq1" readonly="readonly" value="How will this be sized?" style="border: 0"/>
<select name="question1" id="dquestion1" value="" onfocus="this.style.background='khaki'" onblur="this.style.background='white'" onchange="setOptions1(document.form1.question1.options[document.form1.question1.selectedIndex].value)">
<Option value=""></option>
<Option value="Capacity">Capacity</option>
<Option value="Bandwidth">Bandwidth</option>
<Option value="Both">Both</option>
</select></td>
<tr>
<td align="left" id="q1c1"> </td>
<tr>
<td align="left" id="q2c1"> </td>
<tr>
<td align="left" id="q3c1"> </td>
<tr>
<td align="left" id="q4c1"> </td>
<tr>
<td align="left" id="q5c1"> </td>
<tr>
<td align="left" id="q6c1"> </td>
<tr>
<td align="left" id="q7c1"> </td>
</table>
</form>
</body>
</html>
The Javascript is as follows:
function setOptions1(chosen)
{
var label=document.getElementById;
var textbox1="";
var textbox2="";
if (chosen == "") {
label('q1c1').innerHTML="";
label('q2c1').innerHTML="";
label('q3c1').innerHTML="";
label('q4c1').innerHTML="";
label('q5c1').innerHTML="";
label('q6c1').innerHTML="";
label('q7c1').innerHTML="";
}
if (chosen == "Capacity") {
label('q1c1').innerHTML="How much capacity do you require?";
label('q1c1').appendChild(document.createTextNode(' '));
textbox1 = document.createElement('INPUT');
textbox1.type = 'text';
textbox1.value = 0;
textbox1.size = 2;
textbox1.maxLength = 4;
label('q1c1').appendChild(textbox1);
label('q1c1').appendChild(document.createTextNode(' '));
textbox2 = document.createElement('SELECT');
textbox2_option = document.createElement('option');
textbox2_option= new Option ('GB',1,true,false);
textbox2_option= new Option ('GiB',2,false,false);
textbox2.add(textbox2_option);
label('q1c1').appendChild(textbox2);
label('q2c1').innerHTML="Average File Size:";
label('q3c1').innerHTML="Network efficiency:";
label('q4c1').innerHTML="What price level?";
label('q5c1').innerHTML="Would you like to include an IB Router?";
label('q6c1').innerHTML="";
label('q7c1').innerHTML="";
}
if (chosen == "Bandwidth") {
label('q1c1').innerHTML="What are the bandwidth requirements?";
label('q2c1').innerHTML="Network efficiency:";
label('q3c1').innerHTML="Average File Size:";
label('q4c1').innerHTML="What price level?";
label('q5c1').innerHTML="Would you like to include an IB Router?";
label('q6c1').innerHTML="";
label('q7c1').innerHTML="";
}
if (chosen == "Both") {
label('q1c1').innerHTML="How much capacity do you require?";
label('q2c1').innerHTML="Average File Size:";
label('q3c1').innerHTML="What are the bandwidth requirements?";
label('q4c1').innerHTML="Network efficiency:";
label('q5c1').innerHTML="What price level?";
label('q6c1').innerHTML="Would you like to include an IB Router?";
label('q7c1').innerHTML="";
}
}//end function
The problem is this line:
var label=document.getElementById;
Replace it with
function label(s) {
return document.getElementById(s);
}
Host objects are picky -- they don't always like to be treated like regular function references.
BTW: I cut-and-pasted your code into a file than ran it through Google Chrome. The error message was an invalid invocation which let me down replacing the definition of label as my first debugging step.