I am developing a mobile application using Framework 7 and Template 7. I am stuck at a point, I am requesting data through ajax request, and successfully able to retrieve the data, however, I am not able to print the data using foreach loop Template.
What I have tried so far is below:
HTML Part:
<script type="text/template" id="takeOrderPage">
<!-- pages -->
<div class="pages">
<div data-page="takeorder" class="page">
<div class="page-content">
<div class="app-pages">
<!-- popular product -->
<div class="product popular app-section">
<div class="container">
<div class="app-title">
<h4>Take Order</h4>
<p>Take Your Order Here</p>
</div>
<div class="row">
<select id="party">
{{#each list}}
<option value="{{party_id}}">{{party_name}}</option>
{{/each}}
</select>
<input id="sdfgf" type="text" class="validate custom-text" placeholder="Party Name">
<input type="hidden" value="" name="order_latt" id="order_latt">
<input type="hidden" value="" name="order_long" id="order_long">
<input type="hidden" value="" name="order_location" id="order_location">
</div>
<div class="row">
<input id="order_products" type="text" class="validate custom-text" placeholder="Order Products">
</div>
<div class="row">
<input id="required_date" type="text" class="validate custom-text" placeholder="Required Date">
</div>
<div class="row">
<textarea name="remarks" id="remarks" class="validate custom-text" placeholder="Remarks"></textarea>
</div>
<div class="row">
<input id="takeorder" type="button" class="validate" value="Take Order">
</div>
</div>
</div>
<!-- end popular product -->
<!-- footer -->
<footer>
<div class="container">
<h6>Find & follow us</h6>
<ul class="icon-social">
<li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
<li class="twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
<li class="google"><a href="#"><i class="fa fa-google"></i></a></li>
<li class="instagram"><a href="#"><i class="fa fa-instagram"></i></a></li>
<li class="rss"><a href="#"><i class="fa fa-rss"></i></a></li>
</ul>
<div class="tel-fax-mail">
<ul>
<li><span>Tel:</span> 900000002</li>
<li><span>Fax:</span> 0400000098</li>
<li><span>Email:</span> info@youremail.com</li>
</ul>
</div>
<div class="ft-bottom">
<span>Copyright © 2018 All Rights Reserved </span>
</div>
</div>
</footer>
<!-- end footer -->
</div>
</div>
</div>
</div>
<!-- end pages -->
</script>
Jquery Part:
var template = $$('#takeOrderPage').html();
// Compile and render
var compiledTemplate = Template7.compile(template);
// Callbacks to run specific code for specific pages, for example for About page:
myApp.onPageInit('takeorder', function (page) {
$$.post('business-logic.php', {party: 'fillpartydetails'}, function (data) {
if (data)
{
var data = JSON.parse(data);
console.log(data);
var html = compiledTemplate(data);
}
}); });
Json I am receiving:
{list: Array(10)}
list
:
Array(10)
0
:
{party_id: "2", party_code: "1001010001", party_name: "A D COLLEGE", party_group: "80", party_group_description: "Others", …}
1
:
{party_id: "3", party_code: "1001010002", party_name: "ANA BEHERA, BHAWANIPATNA", party_group: "80", party_group_description: "Others", …}
2
:
{party_id: "4", party_code: "1001010003", party_name: "ANA KNA PANIGRAHI,RAYGADA", party_group: "80", party_group_description: "Others", …}
3
:
{party_id: "5", party_code: "1001010004", party_name: "ANA KNA RATH, CHANDIKHOL", party_group: "80", party_group_description: "Others", …}
4
:
{party_id: "6", party_code: "1001010005", party_name: "ANAKNA AGENCIES(CUTTACK)", party_group: "80", party_group_description: "Others", …}
5
:
{party_id: "7", party_code: "1001010006", party_name: "ANAKNA RANA, BALICHANDRAPUR", party_group: "80", party_group_description: "Others", …}
6
:
{party_id: "8", party_code: "1001010007", party_name: "ANARNACNA CONAOPNASTORE (CHARBATIA)", party_group: "80", party_group_description: "Others", …}
7
:
{party_id: "9", party_code: "1001010008", party_name: "ABHISEKH ENTERPRISES, (BIRAMITRAPUR)", party_group: "05", party_group_description: "Domestic Inside Odisha (ZONE-03, SM)", …}
8
:
{party_id: "10", party_code: "1001010009", party_name: "ABIT COLLEGE, CUTTACK", party_group: "80", party_group_description: "Others", …}
9
:
{party_id: "11", party_code: "1001010010", party_name: "ADIKANDA BHUTIA", party_group: "01", party_group_description: "Domestic Inside Odisha (ZONE-01,BP)", …}
length
:
10
__proto__
:
Array(0)
__proto__
:
Object
I can check the response successfully in console.log, however not able to populate the data in the listbox. Anyhelp, will be greatly appriciated.
