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"><i class="fa fa-facebook"></i></li>
<li class="twitter"><i class="fa fa-twitter"></i></li>
<li class="google"><i class="fa fa-google"></i></li>
<li class="instagram"><i class="fa fa-instagram"></i></li>
<li class="rss"><i class="fa fa-rss"></i></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.
Related
I am converting a form from knockout to vue 2 with an ASP.NET MVC 5 Controller for the back end. This is my first attempt using vue. When the user presses the + button, it adds a new row onto the form. The issue I'm having is submitting that to the back end. The old knockout code dynamically set the name attribute in the form elements to Quantities so the form array properly submits all of the data. I would like to do the same thing with vue but am having a a bit of trouble dynamically setting the name of each element dynamically. What would be the best way to do this in order to submit the form without having to rewrite the Controller signature? It should store the form array under the name Quantities.
Image:
HTML:
<div id="radios" v-for="(row,key) in order">
<div class="row">
<div class="col-md-3">
#Html.SmartLabel("systemType", "System Type", true, labelClass)
<label>
<input type="radio" value="#Model.WifiId" v-model="order[key].selectedSystemType" v-on:change="systemChanged(key)"> Wifi
</label>
<label>
<input type="radio" value="#Model.WirelessId" v-model="order[key].selectedSystemType" v-on:change="systemChanged(key)"> Wireless
</label>
<label>
<input type="radio" value="#Model.FiberId" v-model="order[key].selectedSystemType" v-on:change="systemChanged(key)"> Fiber
</label>
</div>
<div class="col-md-4">
#Html.SmartLabel("assetType", "Asset Type", true, labelClass)
<!--
https://stackoverflow.com/questions/43812817/how-to-set-optgroup-select-label-in-vue-js
-->
<select id="asset-type" name="" class="form-control" v-model="order[key].selectedAsset" v-on:change="assetTypeChanged(key)">
<optgroup v-for="(group, name) in order[key].assets" v-bind:label="name">
<option v-for="asset in group" v-bind:value="asset">
{{asset.Name}}
</option>
</optgroup>
</select>
</div>
<div class="col-md-2">
#Html.SmartLabel("quantity", "Quantity", true, labelClass)
<input type="number" min="1" class="form-control" v-model="order[key].quantity" />
</div>
<div class="col-md-2">
<div v-show="costTracked">
#Html.SmartLabel("cost", "Unit Cost", true, labelClass)
<input type="number" min="1" class="form-control" v-model="order[key].cost" />
</div>
</div>
<div>
<span style="cursor:pointer" v-on:click="removeItem(key)">
X
</span>
</div>
</div>
</div>
Vue.js code:
var app = new Vue({
el: '#vue-app',
data: {
assets: {},
assetQuantityEnabled: false,
costTracked: false,
order: []
//Quantities: []
},
methods: {
// Trigger when system type radio selection changes
systemChanged: function (key) {
$.getJSON('#Url.Action( "GetAssetsOfSystem", "RadioOrder" )?systemTypeId=' + this.order[key].selectedSystemType, function (data) {
var result = {};
// Add assets to category (AssetCategory)
for (const asset of data) {
(asset.AssetCategoryName in result) ? result[asset.AssetCategoryName].push(asset) : result[asset.AssetCategoryName] = [];
}
// Sort assets within each category
for (const option in result) {
result[option].sort((a, b) => {
return a.Name.localeCompare(b.Name);
});
}
this.order[key].assets = result;
this.costTracked = false;
this.assetQuantityEnabled = false;
}.bind(this));
},
assetTypeChanged: function (key) {
this.assetQuantityEnabled = true;
this.costTracked = this.hasMacOrSerial(this.order[key].selectedAsset);
},
addItem: function () {
obj = this.defaultObj();
this.order.push(obj);
},
convertFormData: function(){
var q = [];
for(let i=0; i < this.order.length; i++)
{
var obj = {
AssetTypeId: this.order[i].selectedAsset.AssetTypeId,
AssetTypeIsSerialized: this.hasMacOrSerial(this.order[i].selectedAsset),
Quantity: this.order[i].quantity,
UnitCost: this.order[i].cost
};
q.push(obj);
}
return q;
},
defaultObj: function () {
return {
asset: '',
assets: [], // list items
cost: 0,
quantity: 1,
selectedSystemType: null,
selectedAsset: null
};
},
hasMacOrSerial: function (asset) {
return (asset.HasMacAddress || asset.HasSerialNumber) ? true : false;
},
removeItem: function (key) {
this.order.splice(key, 1);
}
}
});
Controller method signature:
public virtual ActionResult Create(
[Bind(Include = "VendorId,OrderNumber,RequisitionNumber,Quantities,SerializedAssets,Attempt")] InventoryOrderDto dto)
Old HTML using Knockout:
<div class="col-md-6">
<div class="panel panel-default white-box">
<div class="panel-heading">
<h3 class="panel-title">Order Summary</h3>
</div>
<div class="panel-body">
<div id="radios" data-bind="foreach: QuantitiesDisplay, visible: QuantitiesDisplay().length > 0" style="display: none">
<div class="row">
<input type="hidden" data-bind="value: AssetTypeId, attr: {name: 'Quantities[' + $index() + '].AssetTypeId'}" />
<input type="hidden" data-bind="value: AssetTypeIsSerialized, attr: {name: 'QuantitiesDisplay[' + $index() + '].AssetTypeIsSerialized'}" />
<input type="hidden" data-bind="value: UnitCost, attr: {name: 'Quantities[' + $index() + '].UnitCost'}" />
<div class="col-md-3" data-bind="text: AssetTypeName" style=" word-break: break-all;">
</div>
<div class="col-md-3">
<input type="number" min="1" class="form-control" data-bind="value: Quantity, attr: {name: 'Quantities[' + $index() + '].Quantity'}" />
</div>
<div class="col-md-3">
<input type="number" min="1" class="form-control" data-bind="visible:AssetTypeIsSerialized, value: UnitCost, attr: {name: 'Quantities[' + $index() + '].UnitCost'}" />
</div>
<div class="col-md-2">
<a class="btn btn-danger" title="Remove" data-bind="click: $root.removeItem">
<i class="fa fa-minus-circle"></i> Remove
</a>
</div>
</div>
</div>
<div id="emptyOrder" data-bind="visible: QuantitiesDisplay().length == 0">
No items are currently selected. Please choose from the adjacent pane.
</div>
<input id="submit" type="submit" value="Continue" class="btn btn-primary" data-bind="visible: QuantitiesDisplay().length > 0" style="display: none">
</div>
</div>
</div>
Ah I found it - need to use v-bind to dynamically set the name.
<div class="col-md-2">
#Html.SmartLabel("quantity", "Quantity", true, labelClass)
<input type="number" min="1" class="form-control" v-model="order[key].quantity" v-bind:name="'Quantities[' + key + '].Quantity' " />
</div>
https://medium.com/swlh/building-dynamic-forms-with-django-formsets-and-vue-js-f3c6e2dddd4a
I've this code in my datatable:
$(document).ready(function () {
$('#LogsTable').DataTable({
"order": [[3, 'desc']],
paging: false,
//"scrollY": false,
//"scrollX": true,
searching: false,
"bInfo": false,
"columnDefs": [
{ "width": "20%", "targets": 4 }
]
});
});
my problem is how to put right the datable inside my modal bootstrap?
insert a scroll in X maybe. Dont know.
Thanks
add model-lg class with modal-dialog
<div class="modal" id="email" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog model-lg">
<div class="modal-content">
</div>
</div>
</div>
You can try add "table-responsive" class to your table. Bootstrap 4 have it for sure, but dunno about lower versions.
<div class="table-responsive">
<table class="table">
...
</table>
</div>
I have a problem in AMP page. I want to build a page with AutoComplete list selection like jquery AutoComplete.
Amp give Example for Autocomplete Selection. But there is a problem. I have API with POST Method in this example I don't know how to set Request method Post in it with a different origin.
<div class="form-item city-state">
<label>City</label>
<input name="city"
type="text"
on="
input-debounced:
AMP.setState({
query: event.value,
showDropdown: event.value,
}),
autosuggest-list.show;
tap:
AMP.setState({
query: query == null ? '' : query,
showDropdown: 'true'
}),
autosuggest-list.show"
[value]="query || ''"
value=""
required
autocomplete="off" />
</div>
<div class="suggest">
<div class="autosuggest-container hidden"
[class]="(showDropdown && query) ?
'autosuggest-container' :
'autosuggest-container hidden'">
<amp-list class="autosuggest-box"
layout="fixed-height"
height="120"
src="/advanced/autosuggest/search_list"
[src]="query ?
autosuggest.endpoint + query :
autosuggest.emptyAndInitialTemplateJson"
id="autosuggest-list">
<template type="amp-mustache">
<amp-selector id="autosuggest-selector"
keyboard-select-mode="focus"
layout="container"
on="
select:
AMP.setState({
query: event.targetOption,
showDropdown: false
}),
autosuggest-list.hide">
{{#results}}
<div class="select-option no-outline"
role="option"
tabindex="0"
on="tap:autosuggest-list.hide"
option="{{.}}">{{.}}</div>
{{/results}} {{^results}}
<div class="select-option {{#query}}empty{{/query}}">
{{#query}}Sorry! We don't ship to your city 😰{{/query}}
</div>
{{/results}}
</amp-selector>
</template>
</amp-list>
</div>
</div>
<amp-state id="autosuggest">
<script type="application/json">
{
"endpoint": "/advanced/autosuggest/search_list?q=",
"emptyAndInitialTemplateJson": [{
"query": "",
"results": []
}]
}
</script>
</amp-state>
I'm running ReactJS.NET with ASP.NET MVC, and everything renders well, except... i cannot get any kind of events to fire...
What i have tried :
1) Eliminating all JQuery references/usages - no success
2) onHover, onClick, with functions both inside and outside of the React-component - no success
Here is my code :
Attaching ProductLine React component in index.cshtml
#Html.React("ProductLine", Model)
React component
function addToCart() {
alert("Hoohohoho!!!");
};
var ProductLine = React.createClass({
render: function () {
return(
<div className="col-md-12 col-sm-12 col-xs-12" key={this.props.productData.name}>
<button onClick={this.addToCart}>Click me!</button>
<div className="row" >
<div onClick={addToCart} className="col-md-12 col-sm-12 col-xs-12 nopadding row-default" >
<div className="col-md-3 col-sm-5 col-xs-5 nopadding">
<span className="table table-col ">
<input type="checkbox" id="cbxCheck2" className="jq_select_product" />
<label htmlFor="cbxCheck2" className="jq_select_product">{ this.props.productData.name }</label>
</span>
</div>
<div className="col-md-4 hidden-sm hidden-xs nopadding">
<span className="table table-col table-text-small">
{ this.props.productData.label }
</span>
</div>
<div className="col-md-3 col-sm-4 col-xs-4 nopadding">
<span className="table table-col">
849,- (12 mnd)
</span>
</div>
<div className="col-md-2 col-sm-3 col-xs-3 nopadding">
<span className="table table-col table-text-small text-right">
<img id="imgShowMore" src="../../Images/arrow_purple_down.png" className="show-more _icon jq_expand_listview" /><label className="show-more _lbl jq_expand_listview">Vis mer</label>
</span>
</div>
</div>
<ProductDetails productData={this.props.productData} />
</div>
</div>
);
},
addToCart: function (e) {
alert("Hooooo!!!");
},
});
After 1/2 a day of trial and error, i suddenly tried to put all the JSX file references at the bottom of the _Layout.cshtml page...
That solved it all actually...
I have a Deal model with a column/attribute called 'deal_info' which is a json column.
It looks like this for example
deal1.deal_info = [ { "modal_id": "4", "text1":"lorem" },
{ "modal_id": "6", "video2":"yonak" },
{ "modal_id": "9", "video2":"boom" } ]
deal2.deal_info = [ { "modal_id": "10", "text1":"lorem" },
{ "modal_id": "11", "video2":"yonak" },
{ "modal_id": "11", "image4":"boom" } ]
On my view deal.html.erb, i have:
<%= for deal_nb in 0..#deal.number_of_deals do %>
<div class="modal fade" id="myInfoModal<%= modal_nb %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<!-- render the right modal type -->
<%= render "layouts/modal_type_partials/mt#{ #deal.deal_info[deal_nb]['modal_id'] }", parameter_i_want_to_pass: deal_nb %>
</div>
<% end %>
Above, as you see above, I'd like to pass for each iteration of the loop inside parameter_i_want_to_pass the number of the iteration loop (2nd iteration would be parameter_i_want_to_pass= 2 for example).
On the partial I have:
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">this is mt4</h4>
</div>
<div class="modal-body">
this is the text: <%= #deal.deal_info[parameter_i_want_to_pass]['text1'] %>
</div>
</div>
I get the following error:
no implicit conversion of String into Integer (on line "this is the text: <%= #deal.deal_info[parameter_i_want_to_pass]")
Actually I even tried to detect more easily the bug by just passing a set number instead of the variable 'deal_nb'
<%= render "layouts/modal_type_partials/mt#{ #deal.deal_info[deal_nb]['modal_id'] }", parameter_i_want_to_pass: 2 %>
But I still get exactly the same error.
EDIT
To help identify the problem, if I replace inside the partial view, #deal.deal_info[parameter_i_want_to_pass]['text1'] by #deal.deal_info[2]['text1'], then it works so the problem must really be that the partial view does not want to receive the number I set inside the deal.html.erb
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">this is mt4</h4>
</div>
<div class="modal-body">
this is the text: <%= #deal.deal_info[2]['text1'] %>
</div>
</div>
</div>
EDIT 2
Just to update the question, I managed to solve a part of the problem. i used the method to_i to transform the string in a number
So the code above now works, it pass the information (parameter_i_want_to_pass =2) to the partial view. I checked it.
<%= render "layouts/modal_type_partials/mt#{ #deal.deal_info[deal_nb]['modal_id'] }", parameter_i_want_to_pass: 2 %>
But the remaining problem, is how to not set it to 2 but to pass the number of the iteration loop
<%= for deal_nb in 0..#deal.number_of_deals do %>
<div class="modal fade" id="myInfoModal<%= modal_nb %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<!-- render the right modal type -->
<%= render "layouts/modal_type_partials/mt#{ #deal.deal_info[deal_nb]['modal_id'] }", parameter_i_want_to_pass: deal_nb %>
</div>
<% end %>
Here I run into an Error
undefined local variable or method `modal_number'
Your variable names are a little confusing, but I think this is what you're trying to do. I am using the each_with_index method to loop through each modal inside of the deal's deal_info. Then I use the locals: { } argument for render partial: in order to pass variables to the partial. The partial then refers to these variables like they are defined locally. The partial doesn't even really end up needing the index variable, but I showed how you would pass it anyway.
View
<% #deal.deal_info.each_with_index do |modal, index| %>
<div class="modal fade" id="myInfoModal<%= index %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<!-- render the right modal type -->
<%= render partial: "layouts/modal_type_partials/mt#{ modal['modal_id'] }", locals: { modal: modal, index: index } %>
</div>
<% end %>
Partial
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">this is mt4</h4>
</div>
<div class="modal-body">
this is the text: <%= modal['text1'] %>
</div>
</div>
...
deal1.deal_info = [ { "modal_id": "4", "text1":"lorem" },
{ "modal_id": "6", "video2":"yonak" },
{ "modal_id": "9", "video2":"boom" } ]
is not valid ruby code. You need to parse the json string:
require 'json'
deal1.deal_info = JSON.parse('[
{ "modal_id": "4", "text1":"lorem" },
{ "modal_id": "6", "video2":"yonak" },
{ "modal_id": "9", "video2":"boom" }
]')
This will convert it into an array of hashes:
[{"modal_id"=>"4", "text1"=>"lorem"}, {"modal_id"=>"6", "video2"=>"yonak"}, {"modal_id"=>"9", "video2"=>"boom"}]