I am using Magnific popup to slide my images in table, here is part of html code:
.....
<div id="portfolio" class="clearfix">
<table class="table table-striped table-bordered table-hover table-condensed" id="dataTables-brickset">
<thead>
<tr><th>Image</th></tr>
</thead>
<tbody>
<tr>
<td>
<a href="http://www.brickshelf.com/gallery/mikezang/clonebrick/stardiamond/80029.jpg" title="Star Diamond／Military／CV-12 Reconnaissance Vehicle">
<img src="http://www.brickshelf.com/gallery/mikezang/clonebrick/stardiamond/80029.jpg" height="64" />
</a>
</td>
</tr>
<tr>
<td>
<a href="http://www.brickshelf.com/gallery/mikezang/clonebrick/stardiamond/80030.jpg" title="Star Diamond／Military／AH-1 Aemed Helicopter">
<img src="http://www.brickshelf.com/gallery/mikezang/clonebrick/stardiamond/80030.jpg" height="64" />
</a>
</td>
</tr>
.....
<script>
$(function(){
$('#portfolio').magnificPopup({
delegate: 'a',
type: 'image',
image: {
cursor: null,
titleSrc: 'title'
},
gallery: {
enabled: true,
preload: [1, 1], // Will preload 0 - before current, and 1 after the current image
navigateByImgClick: true
}
});
});
</script>
....
The thumbnail images are good as below:
it is also ok when I click on image as such:
when I want to slide images, I got screen like this: !
How can I solve this issue?
Related
I have a working code on my side in which I have used NextSibling property in excel vba like that
stExecutive = thElements.Item(i).NextSibling.NextSibling.innerText
When a friend takes the code to try it on his side, the code raises the error Object variable or With block variable not set and I have fixed it using just one NextSibling
stExecutive = thElements.Item(i).NextSibling.innerText
Why this difference happen? and how can I make the code work on both sides without raising any errors?
This is part of the code
Set thElements = htmlCaseProcedures.querySelector(".table-striped").getElementsByTagName("th")
For i = 0 To thElements.Length - 1
If thElements.Item(i).innerText = sAvailableBalance Then
stAvailableBalance = thElements.Item(i).NextSibling.innerText
ElseIf thElements.Item(i).innerText = sFileStatus Then
stFileStatus = thElements.Item(i).NextSibling.innerText
ElseIf thElements.Item(i).innerText = sExecutive Then
stExecutive = thElements.Item(i).NextSibling.innerText
End If
Next i
and this is the content of html
<script type="text/javascript">
function doSubmitP(txtType){
document.frmTemp.reqtype.value = txtType;
$('#frmTemp').submit();
}
</script>
<style type="text/css">
th,td{
text-align: center !important;
}
</style>
<table class="table table-striped">
<tbody><tr align="center">
<th width="50%" align="right">الرقم الآلي</th>
<td><small>192833700</small></td>
</tr>
<tr align="center">
<th align="right">تاريخ التسجيل فى ملف التنفيذ</th>
<td><small>2020-03-09</small></td>
</tr>
<tr align="center">
<th align="right">رقم ملف التنفيذ</th>
<td><small>19283370</small></td>
</tr>
<tr align="center">
<th align="right">جهة التنفيذ</th>
<td><small>العاصمة-قسـم التنفيذشركات</small></td>
</tr>
<tr align="center">
<th align="right">الرصيد المتاح</th>
<td><small>0.000 د.ك</small></td>
</tr>
<tr align="center">
<th align="right">حالة الملف</th>
<td><small>مفتـــــوح</small></td>
</tr>
<tr>
<td align="center" colspan="2">
<table align="center" class="linksTbl">
<tbody><tr valign="middle">
<td><a class="hyperText" onclick="doSubmitP(1)" href="javascript:void(0);">الإجراءات العامة والرسوم</a></td>
<td>|</td>
<td><a class="hyperText" onclick="doSubmitP(2)" href="javascript:void(0);">إجراءات التنفيذ المدني</a></td>
<td>|</td>
<td><a class="hyperText" onclick="doSubmitP(3)" href="javascript:void(0);">الإجراءات المالية</a></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<div class="row" id="viewPaneDetails" style="display: none;"></div>
<form name="frmTemp" id="frmTemp" action="execReqView.jsp" method="POST" autocomplete="off">
<input name="reqtype" type="hidden">
</form>
<script>
$('#frmTemp').submit(function(){ // catch form submit event
$.ajax({ // create ajax call
data: $(this).serialize(), //get form data
type: $(this).attr('method'), //GET or POST
url: $(this).attr('action'), // the action url
success: function(response){ // on success
$('#viewPaneDetails').html(response); //update DIV
$('#viewPaneDetails').show();
}
});
return false; // cancel original event to prevent form submitting
});
</script>
I am working on an API which generates a pdf document based on an EJS template which then gets emailed to some users. When running Locally everything works as expected however when my API is pushed to heroku the pdf is generated with some odd formatting errors. Its like the page is essentially cut down the middle vertically.
Does anyone know a possible cause of this?
I am using ejs, and html-pdf
Here is the code and template
document generation function
ejs.renderFile(path.join(__dirname, '../views/', "offer.ejs"), {offerData}, (err, data) => {
if(err)
reject(err)
else
{
const options = {
"height": "11.25in",
"width": "8.5in",
"header": {
"height": "10mm"
},
"footer": {
"height": "10mm",
}
};
//creates the actual pdf doc for sending
pdf.create(data, options).toFile(`./offer_${inqID}.pdf`, function(err, res) {
if (err)
reject(err)
else
resolve(res.filename)
});
}
});
html pdf template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trade-in Disclosure Form</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<style>
body{
font-family: 'Roboto', sans-serif !important;
}
h1{
text-decoration: underline !important;
}
table.center {
margin-left:auto;
margin-right:auto;
}
td.rows{
padding-bottom: 10px;
text-align: left !important;
}
td.question{
padding-right: 15px;
}
span{
font-weight:bold !important;
}
</style>
</head>
<body style="border: solid black 2px; margin-left: 10px; margin-right:10px;">
<header class="text-center">
<h1 >The Auto Broker</h1>
<h2> Trade-In Vehicle Disclosure Form</h2>
<p style="margin-left: 6em; margin-right: 6em">
This Form has been filled out by the customer requesting a quote. It contains some basic details to help inform your evaluation of the vehicle.
If the customer provides false information you have the right to recind or adjust your offer to the customer; otherwise include the value of
this vehicle in your total value for the quote. Please ensure to carefully review all the data before providing a quote. Quotes are final and
cannot be altered once submitted.
</p>
</header>
<div style="padding-top:20px;">
<div class="form-container container">
<div class="row" style="background-color: black;">
<h3 style="color: aliceblue;" class="ml-2"> Vehicle History</h3>
</div>
<table class="center">
<thead>
<tr>
<th style="padding-bottom: 20px;"> <h4>Question </h4></th>
<th style="padding-bottom: 20px;"> <h4>Response </h4></th>
</tr>
</thead>
<tbody>
<tr>
<td class="rows question">Has the Vehicle been in an accident?</td>
<td class="rows"> <%= questionnaire.inaccident %> </td>
</tr>
<tr>
<td class="rows question">Have any panels been repainted, repaired <br> or replaced?</td>
<td class="rows"> <%= questionnaire.panelrepairs %> </td>
</tr>
<tr>
<td class="rows question">Are you the original owner?</td>
<td class="rows"> <%= questionnaire.originalowner %> </td>
</tr>
<tr>
<td class="rows question">Is this an American Vehicle?</td>
<td class="rows"> <%= questionnaire.usvehicle %> </td>
</tr>
<tr>
<td class="rows question">Has the Vehicle been registered in any other <br> Province/State?</td>
<td class="rows"> <%= questionnaire.outofprovreg %> </td>
</tr>
<tr>
<td class="rows question">Is the Odometer faulty, replaced or rolled back? </td>
<td class="rows"> <%= questionnaire.faultyodometer %> </td>
</tr>
<tr>
<td class="rows question">Does the vehicle have any lights on the dashboard?</td>
<td class="rows"> <%= questionnaire.dashlights %> </td>
</tr>
<tr>
<td class="rows question">Does the vehicle have any factory warranty?</td>
<td class="rows"> <%= questionnaire.factorywarranty %> </td>
</tr>
<tr>
<td class="rows question">Does the vehicle have extended warranty?</td>
<td class="rows"> <%= questionnaire.extwarrenty %> </td>
</tr>
<tr>
<td class="rows question">Was the vehicle ever used as a daily rental, <br> police vehicle, or taxi/limousine?</td>
<td class="rows">
<% if (questionnaire.rental) { %>
Rental <br>
<% } %>
<% if (questionnaire.taxilimo) { %>
Taxi / Limo <br>
<% } %>
<% if (questionnaire.policecar){ %>
Police Vehicle <br>
<% } %>
</td>
</tr>
<tr>
<td class="rows question">Does the vehicle require repairs to the following: <br>
<span style="margin-left: 10px;">Engine </span> <br>
<span style="margin-left: 10px;">Transmission/Powertrain</span> <br>
<span style="margin-left: 10px;">Electrical System </span> <br>
<span style="margin-left: 10px;">Air Conditioning System</span>
</td>
<td class="rows">
<%= questionnaire.enginerepair %> <br>
<%= questionnaire.transrepair %> <br>
<%= questionnaire.electricalrepair %> <br>
<%= questionnaire.acrepairs %> <br>
</td>
</tr>
<tr>
<td class="rows question">Additional Repair Details</td>
<td class="rows"> <%= questionnaire.repairdetails %> </td>
</tr>
<tr>
<td class="rows question">Outstanding Balance</td>
<td class="rows">
<% if (questionnaire.outstandingbalance){ %>
<%= questionnaire.outstandingbalance %>
<% } %>
</td>
</tr>
<tr>
<td class="rows question">Total Current Milage</td>
<td class="rows"> <%= questionnaire.milage %> K.M </td>
</tr>
<tr>
<td class="rows question">V.I.N</td>
<td class="rows"> <%= questionnaire.vin %> </td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Proper Img
Broken Img
Was able to solve this issue by adding a single CSS style Rule.
html {
zoom: 0.55;
}
This is most likely required due to the default zoom setting of the html-pdf package. This setting and more can also be configured with options; however, i am unsure if the zoom options can be configured to < 1.
I'm facing the same prblm. I think u have to use inline CSS... u can't use bootstrap. I was facing the same problem. but now it is ok with puppeteer
Hi,
I wanted to get the text from the webpage with Cucumber & Groovy in Katalon Studio. Please find the below Step Definition which has the xpath and below is the html code.
I wanted to read the below two lines from the page which can be referred in the html code also below. The number 596 varies each time i.e., dynamic.
Create Inquiry Tracking # 596
The inquiry for system tracking # 596 has been submitted successfully
Step Definition
inquiryt1 = WebUI.getText(findTestObject(By.xpath("//td[#class='pageTitle'][1]")))
Full Page HTML :
<html lang="en">
<head>
<title>Govt Inquiry</title>
<link rel="stylesheet" type="text/css" href="?appId=gmpinquiry&flName=/uitmpl/en/css/uitmpl.css" />
<link rel="stylesheet" type="text/css" href="?appId=gmpinquiry&flName=/gmpinquiry/css/gmpinquiry.css" />
<script type="text/javascript" src="?appId=gmpinquiry&flName=/uitmpl/js/other_scripts.js"></script>
<script type="text/javascript" src="?appId=gmpinquiry&flName=/uitmpl/js/freezingHeader.js"></script>
<script type="text/javascript" src="?appId=gmpinquiry&flName=/uitmpl/js/sortTable.js"></script>
<noscript>
<style>
table.mQH {display:block;}
</style>
</noscript>
<style id="antiClickjack">body{display:none !important;}</style>
<script type="text/javascript">
if (self === top) {
var antiClickjack = document.getElementById("antiClickjack");
antiClickjack.parentNode.removeChild(antiClickjack);
} else {
top.location = self.location;
}
</script>
</head>
<body onload="uitmpl_qhPageInit()">
<!-- Skip To Main Content should be the next element immediately after body element -->
<div class="skipnav">Skip to Main Content </div>
<script type="text/javascript" src="?appId=gmpinquiry&flName=/uitmpl/js/menu_script.js"></script>
<script type="text/javascript" src="?appId=gmpinquiry&flName=/uitmpl/js/application_settings.js"></script>
<script type="text/javascript" src="?appId=gmpinquiry&flName=/uitmpl/js/global_settings.js"></script>
<script language="javascript">
application.data = {
td_1: "Home",
td_2: "Govt Inquiry",
td_3: "Create Inquiry",
td_4: "Reports/Search",
td_5: "My Preference",
url_1: "javascript:OnGMPPortalSubmit(document.frmMenuScr, '')",
url_2: "javascript:OnMenuSubmit (document.frmMenuScr, 'homepage')",
url_3: "javascript:OnMenuDispatch (document.frmMenuScr, 'setupinquiry','create')",
url_4: "javascript:OnMenuSubmit (document.frmMenuScr, 'inqsubmenu')",
url_5: "javascript:OnMenuSubmit (document.frmMenuScr, 'userpref')"
};
global.data = {
//td_1: "AT&T BusinessDirect",
td_1: "Write Us",
td_2: "Help <span class=\"offscrn\"> - Opens a PDF Document for Help</span>",
td_3: "Close",
//td_3_1: "General Help",
//td_3_2: "Application Tutorial",
//td_3_3: "<span id=\"shHd\">Show</span> Quick Help",
//url_1: "javascript:bizDirect()",
url_1: "javascript:OnMenuSubmit(document.frmMenuScr, 'compose')",
url_2: "javascript:uitmpl_popUpReg(document.frmMenuScr.action + '?appId=' + document.frmMenuScr.appId.value + '&flName=' + document.frmMenuScr.context.value + '/help/Inquiry_UG.pdf')",
url_3: "javascript:window.close();"
//url_3_1: "javascript:uitmpl_popUpReg(document.frmMenuScr.action + \\'?appId=\\' + document.frmMenuScr.appId.value + \\'&flName=\\' + document.frmMenuScr.context.value + \\'/help/Inquiry_UG.pdf\\')",
//url_3_2: "#",
//url_3_3: "javascript:uitmpl_qhPageToggle()"
};
</script>
<script type="text/javascript" src="?appId=gmpinquiry&flName=/gmpinquiry/js/script.js"></script>
<!--************ uitmplbegin: tBAN ************-->
<!--****** begin:background graphic ******-->
<table width="100%" cellspacing="0" border="0" class="tBAN">
<tr>
<td><img src="?appId=gmpinquiry&flName=/uitmpl/en/img/swoosh.gif" width="650" height="69" alt="" border="0" /></td>
</tr>
</table>
<!--****** end:background graphic ******-->
<!--****** begin:logo and company title ******-->
<div class="logoCompany">
<table width="100%" cellspacing="0" border="0" class="tBAN">
<tr>
<td class="logo"><img src="?appId=gmpinquiry&flName=/uitmpl/en/img/attbizdirect.gif" width="291" height="63" alt="AT&T | Business Direct" border="0" /></td>
<td><!-- stretchable cell --></td>
<!-- max characters for company title: 72 w/ breaks (24 per line) -->
<td class="company">ATT Gov Sol Dev<br/>rm0013
<!-- Begin Skip Top Navigation -->
<!-- <div class="skipnav">Skip to Main Content</div> -->
<!-- End Skip Top Navigation --></td>
</tr>
</table>
</div>
<!--****** end:logo and company title ******-->
<!--****** begin:application title ******-->
<table cellspacing="0" border="0" class="appTitle">
<tr>
<td>View and Analyze Govt. Bills: Govt Inquiry</td>
</tr>
</table>
<!--****** end:application title ******-->
<!--************ uitmplend: tBAN ************-->
<!--************ uitmplbegin: tNAV ************-->
<div id="glbl">
<script language="JavaScript1.3">
<!--
uitmpl_list("global");
//-->
</script>
<noscript>
<div class="globalAcc">
<table class="global_main" cellspacing="0" border="0">
<tr>
<td class="global_main_spacer"> </td>
<td>AT&T BusinessDirect</td><td class="pipe">|</td><td>Write Us</td><td class="pipe">|</td><td>Help</td>
</tr>
</table>
</div>
</noscript>
</div>
<div id="app">
<script language="JavaScript1.3">
<!--
uitmpl_list("application");
//-->
</script>
<noscript>
<div class="applicationAcc"><table class="application_main" cellspacing="0" border="0">
<tr>
<td>Home</td>
<td class="pipe">|</td>
<td>Create/Update Dispute</td>
<td class="pipe">|</td>
<td>Reports/Search</td>
<td class="pipe">|</td>
<td>My Preference</td>
<td class="pipe">|</td>
<td>User Management</td>
</tr>
</table>
</div>
</noscript>
</div>
<!--************ uitmplend: tNAV ************-->
<form name="frmMenuScr" action="/servlet/GMPGate" method="get">
<input type="hidden" name="appId" value="gmpinquiry">
<input type="hidden" name="nextScr" value="userpref">
<input type="hidden" name="methodToCall" value=""/>
<input type="hidden" name="context" value="/gmpinquiry"/>
</form>
<!--***** begin:grid *****-->
<table width="100%" cellspacing="0" border="0" class="wrap">
<tr>
<td width="100%" class="grid">
<!-- InstanceBeginEditable name="PageHeader" -->
<!--************ uitmplbegin: tPH ************-->
<!--****** begin:titles ******-->
<table cellspacing="0" border="0" class="tPH">
<!--****** begin:page title ******-->
<tr>
<td class="pageTitle">Create Inquiry Tracking # 599</td>
</tr>
<!--****** end:page title ******-->
</table>
<!--****** end:titles ******-->
<!--************ uitmplend: tPH ************-->
<!-- InstanceEndEditable -->
</td>
<td width="182" class="grid"><img src="?appId=gmpinquiry&flName=/uitmpl/en/img/pixel.gif" width="182" height="1" alt="" border="0" /></td>
</tr>
</table>
<!--***** end:grid *****-->
<!--***** begin:grid *****-->
<table width="100%" cellspacing="0" border="0" class="wrap">
<tr>
<td width="100%" class="grid">
<!--- BeginOptional name="TaskConfirmation" --->
<!-- InstanceBeginEditable name="TaskConfirmation" -->
<!--************ uitmplbegin: mTC ************-->
<table cellspacing="0" cellpadding="2" border="0" class="mTC">
<tr class="msgConfirm">
<td> <img src="?appId=gmpinquiry&flName=/uitmpl/en/img/confirmation.gif" width="29" height="29"
border="0" alt="Confirmation." /></td><td>The inquiry for system tracking # 599 has been submitted successfully. </td>
</tr>
</table>
REASON FOR FAILED WITH THE SOLUTION
2019-06-26 18:40:10.049 ERROR c.k.k.c.c.keyword.CucumberReporter
- ❌ it should displays create inquiry pages FAILED.
Reason:
groovy.lang.MissingMethodException: No signature of method: static com.kms.katalon.core.testobject.ObjectRepository.findTestObject()
is applicable for argument types: (org.openqa.selenium.By$ByXPath) values: [By.xpath: //td[#class='pageTitle'][1]]
Possible solutions: findTestObject(java.lang.String), findTestObject(java.lang.String, java.util.Map) at CreateInquiry001.it_should_displays_create_inquiry_page2(CreateInquiry001.groovy:369)
at ✽.it should displays create inquiry pages(C:/Users/vdavuluri2/Katalon Studio/Govt Inquiry/Include/features/Create Inquiry-001.feature:55)
Katalon's findTestObject() method is used for selecting an object from the object repository. It doesn't work with By class.
You can try with something like the following: create an object with the given Xpath and then use WebUI.getText() on it:
TestObject testObject = new TestObject().addProperty("xpath", ConditionType.EQUALS, "//td[#class='pageTitle'][1]")
WebUI.getText(testObject)
The element with class pageTitle looks unique so why not user
//td[#class='pageTitle']
I have made a simple Datatable with search input,
Student.js
Vue.component('student-list',{
props: ['students'],
template:`
<div class="table-responsive">
<table class="table table-hover mails m-0 table table-actions-bar">
<thead>
<tr>
<th>10</th>
<th>9</th>
<th>8</th>
<th>7</th>
<th>6</th>
<th>5</th>
<th>4</th>
<th>3</th>
<th>2</th>
<th>1</th>
</tr>
</thead>
<tbody>
<student v-for="student in searchResults" :student="student"></student>
</tbody>
</table>
</div>
`,
computed:
{
searchResults: function(student){
var self = this;
return this.students.filter(
function(student){
if(this.searchQuery == '' || this.searchQuery == null) { return true; }
console.log(this.searchQuery);
return (student.toString().indexOf(this.searchQuery) != -1);
}
);
}
},
// v-if="searchResults(student)"
});
Vue.component('student',{
props: ['student'],
template:`
<tr>
<td>
{{ student.name }} {{ student.lname }}
</td>
<td>
<i class="md-phone"></i>
<i class="ion-woman"></i>
<i class="ion-man"></i>
<i class="ion-android-settings"></i>
</td>
<td>
{{ student.address }}
</td>
<td>
{{ student.totalTopay }}
</td>
<td>
{{ student.lessonsTaken }}
</td>
<td>
{{ student.cancelCount }}
</td>
<td>
{{ student.phone }}
</td>
<td>
{{ student.momPhone }}
</td>
<td>
{{ student.dadPhone }}
</td>
<td>
{{ student.email }}
</td>
</tr>
`
});
new Vue({
el: '#content-page',
data: {
'searchQuery': ''
}
});
HTML
....
<div id="content-page">
<input type="text" id="search" class="form-control" placeholder="Search..." v-model="searchQuery">
</div>
....
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="{{ asset('js/students.js') }}"></script>
...
Now, for some reason whenever I leave the search blank it works as needed, but when I change the input field by typing in the text box(which his v-model is attached to the searchQuery variable), nothing changes, and when I call it (this.searchQuery) on the Dev Tools console, it says undefined. What am I missing?
Thanks in advance everyone!
I've edited your code a little bit to make it work and removed some lines of code, because I don't want to recreate the whole student object.
I passed the search-query as prop and added <student-list /> to your template.
In your filter function I replaced toString with JSON.stringify, because student is an object and toString prints out [object Object].
Also, I changed the props object and added their types.
And one last tiny error:
Interpolation inside attributes has been deprecated. Use v-bind or the
colon shorthand instead.
Don't use href="tel:{{ student.phone }}" use something like this instead :href="'tel:' + student.phone".
Vue.component('student-list',{
props: {
students: {
type: Array
},
searchQuery: {
type: String
}
},
template:`<div class="table-responsive">
searchQuery: {{searchQuery}}
<table class="table table-hover mails m-0 table table-actions-bar">
<thead>
<tr>
<th>10</th>
<th>9</th>
<th>8</th>
<th>7</th>
<th>6</th>
<th>5</th>
<th>4</th>
<th>3</th>
<th>2</th>
<th>1</th>
</tr>
</thead>
<student v-for="student in searchResults" :student="student"></student>
</tbody>
</table>
</div>`,
computed: {
searchResults() {
return this.students.filter(student => JSON.stringify(student).indexOf(this.searchQuery) != -1);
}
},
});
Vue.component('student',{
props: {
student: {
type: Object
}
},
template:`<tr>
<td>
{{ student.name }} {{ student.lname }}
</td>
<td>
<a :href="'tel:' + student.phone" title="התקשר" class="table-action-btn">tel-icon</a>
</td>
</tr>`
});
new Vue({
el: '#content-page',
data: {
'searchQuery': ''
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
</head>
<body>
<div id="content-page">
<student-list :search-query="searchQuery" :students="[{
id: 1,
name: 'Peter',
lname: 'Parker',
phone: 12345
},{
id: 2,
name: 'Bat',
lname: 'Man',
phone: 1234
}]"></student-list>
<input type="text" id="search" class="form-control" placeholder="Search..." v-model="searchQuery">
</div>
</body>
</html>
And my second solution
Add this to your computed:
computed: {
searchQuery() {
return this.$parent.searchQuery || '';
},
...
}
...
You access the parent of student-list, but I think this is not a nice way, because you can't see from where do you get this data.
Hope this will help you a little bit.
I am using the following code to try and use nested repeaters in WinJS:
<table class="grid" id="rptCustomerHistory" data-win-control="WinJS.UI.Repeater">
<thead>
<tr>
<th colspan="4" class="groupHeader" data-win-bind="textContent: GroupDate.DateTime BindingConverter.toYearMonthDate"></th>
</tr>
</thead>
<tbody data-win-control="WinJS.UI.Repeater" data-win-bind="winControl.data: ch">
<tr>
<td data-win-bind="textContent: ContactDate.DateTime BindingConverter.toshortdate"></td>
<td data-win-bind="textContext: SalesPerson"></td>
<td data-win-bind="textContext: ContactMethod"></td>
<td><span class="symbol"></span></td>
</tr>
</tbody>
</table>
However, it is not rendering any results for the 2nd repeater.
When I use the same data source and similar markup using DIVs, it works:
<div id="rptCustomerHistory" data-win-control="WinJS.UI.Repeater">
<div>
<div data-win-bind="textContent: GroupDate.DateTime BindingConverter.toYearMonthDate"></div>
<div data-win-control="WinJS.UI.Repeater" data-win-bind="winControl.data: ch">
<span data-win-bind="textContent: ContactMethod"></span>
</div>
</div>
</div>
I don't really want to use Divs as this is tabular data. Any idea why using table tags behaves differently?
Did you assign give data to your outer repeater?
The following works in a blank project for me:
<script>
window.list = new WinJS.Binding.List([
new WinJS.Binding.List([1, 2, 3]),
new WinJS.Binding.List([4, 5, 6]),
]);
</script>
<div data-win-control="WinJS.UI.Repeater" data-win-options="{ data: list }">
<span data-win-control="WinJS.UI.Repeater" data-win-bind="winControl.data : this"></span>
</div>
Try replacing
data-win-bind="winControl.data: ch"
with:
data-win-options="{data: ch}"