I'm try to load data from Firebase in 2 different framework7 and template 7 pages.
Unfortunately only work only on the index page. I've no idea why.
Here's my html code.
<script id="calendario" type="text/template7">
<div class="title">Calendario</div>
{{#each Tornei}}
<a href="calendario-detail.html" class="eventblock w-inline-block item-content item-link" data-context-name="Tornei.{{#key}}">
<div class="w-row">
<div class="nopadding w-col w-col-6 w-col-small-6 w-col-tiny-6">
<div class="smalltext">{{this.Location}}</div>
</div>
<div class="nopadding w-col w-col-6 w-col-small-6 w-col-tiny-6">
<div class="smalltext">{{Location}}</div>
</div>
</div>
<div class="titleevent titologreen">{{#key}}</div>
<div class="smalltext">4 / 8</div>
</a>
{{/each}}
and this is myapp.js
myApp.onPageInit('calendario', function (page) {
var ref = firebase.database().ref("/");
ref.on("value", function(snapshot) {
var template = $$('#calendario').html();
var compiledTemplate = Template7.compile(template);
var ourGeneratedHTML = compiledTemplate(snapshot.val());
console.log(snapshot.val());
$$('#1').html(ourGeneratedHTML);
$$('.eventblock').on('click', function () {
var nameEvent = $$(this).children('.titleevent').text();
mainView.router.loadPage("calendario-detail.html?eventName=" + nameEvent);
});
});
}).trigger();
myApp.onPageInit('calendario-detail', function (page) {
var ref = firebase.database().ref("/");
ref.on("value", function(snapshot) {
var template = $$('#calendario-detail').html();
var compiledTemplate = Template7.compile(template);
var last = JSON.stringify(snapshot.val())
console.log(last);
var ourGeneratedHTML = compiledTemplate(snapshot.val());
console.log(snapshot.val());
$$('#1').html(ourGeneratedHTML);
console.log(ourGeneratedHTML);
});
});
As you can see they are identical but template7 only works in my index.
Can you help me out please? Thanks.
I had the same problem, so, I initialize my app:
var myApp = new Framework7({
// Unable templates auto precompilation
precompileTemplates: false,
// Unabled pages rendering using Template7
template7Pages: false,
});
After that I can compile templates on another views with onPageAfterAnimation.
Related
I'm learning VueJS. I need to setup a Vue instance for a WordPress custom AJAX theme. I have this code, that I think will be ok. I want to render the pages of the WordPress site and then if the user click, load the content.
I'm using bootstrap 4 as my front-end framework
<div class="container-fluid content-wrapper">
<div class="row" id="app">
<!-- Sidebar Top Area -->
<div class="col-sm-12 col-md-4 col-lg-5" id="navPanel">
<!-- Lista pagine -->
<h1 class="home-claim" v-bind:title="pagename" v-for="page in pagenames" >
{{ page.title.rendered }}
</h1>
</div>
<div class="col-sm-12 col-md-8 col-lg-7" id="contentPanel">
<!-- contenuto pagine -->
</div>
<!-- Sidebar Bottom Area -->
</div>
</div>
var app = new Vue({
el: '#app',
data: {
pagenames: []
},
mounted() {
var self = this;
var url = 'wp-json/wp/v2/pages';
$.getJSON( url, function(data){
self.pagenames = data.title.rendered;
console.log(data.title.rendered);
//console.log(data);
});
}
});
I'm not able to display the page list. What's wrong?
After ajax response, you assign data.title.rendered string, to the Component's property pagenamespreviously defined as empty array. Assuming that data from response returns an array of pages/posts, you should be assigning full data instead:
var app = new Vue({
el: '#app',
data: {
pagenames: []
},
mounted() {
var self = this;
var url = 'wp-json/wp/v2/pages';
$.getJSON( url, function(data){
self.pagenames = data;
});
}
});
I have offers table and users table on parse server. I did a query for he offers table and it worked great (both console log and html - I had issues with async and the Q.promise helped). Now I'm trying to add two elements that are in the users table. I get it on the console, but not on the page. Here is what I have on the offers.service:
this.getAllOffers = function () {
var Q = $q.defer();
console.log('getAllOffers called');
//all offers filter is selected
this.allOffersFilter = false;
var offers = Parse.Object.extend("Offer");
var exchanges = Parse.Object.extend("Exchanges");
var users = Parse.Object.extend("User");
var query = new Parse.Query(offers);
var userQuery = new Parse.Query(users);
var results = [];
query.descending("createdAt");
query.limit(4);
userQuery.find().then(function(users) {
for (i = 0; i < users.length; i++) {
foundUsers = users[i];
query.find().then( function(offers){
for(i = 0; i < offers.length; i++){
found = offers[i];
var result = {};
result.date = found.get("createdAt");
result.price = found.get("price");
result.status = found.get("accepted");
result.lastName = foundUsers.get("lastName");
result.companyName = foundUsers.get("companyName");
console.log(result.companyName);
console.log(result.price);
}
});
results.push(result);
}
Q.resolve(results);
});
return Q.promise;
};
Then my HTML:
<!--List of offers-->
<div class="col-md-3">
<h4>List of offers</h4>
<div ng-if="offersList">
<div ng-repeat="offer in offersList">
<div class="offer card">
<div>{{offer.username}}</div>
<div>{{offer.companyName}}</div>
<div>{{offer.date}}</div>
<div>{{offer.price}}</div>
<div>{{offer.status}}</div>
</div>
</div>
</div>
<div ng-if="!(offersList)">There are no offers</div>
</div>
Then my component:
angular.module('offersPage')
.component('offersPage', {
templateUrl: 'pages/offers-page/offers-page.template.html',
controller: function(AuthService, PageService, OffersService,
$scope) {
// Functions for offers-page
// Check if user is logged in and verified on page load
AuthService.userLoggedin(function(loggedIn, verified) {
if(!verified) {
PageService.redirect('login');
}
});
this.$onInit = function() {
OffersService.getAllOffers().then(function(offersList) {
$scope.offersList = offersList;
});
}
}
});
THANKS IN ADVANCE !
You are resolving $q before results is populated, so, you list is empty.
I don't know about Parse server, but if userQuery.find().then is async, then need to move Q.resolve(results); inside it, or probably inside query.find().then.
When you do an ng-if in angularjs it literally takes out the element and when it puts it in it is as a child scope. To fix this you need to make sure and put $parent on any child element inside an ng-if. See below. Make sure to use track by $index to when you are doing repeats its good practice. Also notice you dont need to $parent anything in the repeat since it is referencing offerwhich is defined.
Code:
<div ng-if="offersList">
<div ng-repeat="offer in $parent.offersList track by $index">
<div class="offer card">
<div>{{offer.username}}</div>
<div>{{offer.companyName}}</div>
<div>{{offer.date}}</div>
<div>{{offer.price}}</div>
<div>{{offer.status}}</div>
</div>
</div>
</div>
I have a problem using firebase and angular for ionic. What i want to achieve is when users click list of dates then example 8 sept then user can see all attendace status of 8 sept.
after user click 8 sept. It show the list of user data and status of attendance in 8 sept.
this is my firebase database
So far i can display the list for every dates and user data. But the problem is my query display the status for all dates(8&9 Sept). How i can display the status for selected dates only?
this is my code that i have been working on.
Controller.js
childUsers.orderByValue().on('value', function(snapshot){
$timeout(function(){
var snapshotVal = snapshot.val();
$scope.users =snapshotVal;
console.log($scope.users);
});
});
Template
<div ng-repeat= "item in users">
<div class="list card" style="padding:1%;">
<div class="col-50" style="float:left;">
<h5>{{item.displayName}} - {{item.handphone}}</h5>
<h5>{{item.email}}</h5>
</div>
<div class="col-33" style="float:right; position: relative; ">
<div ng-if="item.status = 'true'">
<div class="ion-checkmark" style="display: flex; vertical-align: middle;"></div>
</div>
</div>
</div>
</div>
Any idea how to fix this? Thanks any help is appreciated.
I found the solution using nested snapshot here is my code
CONTROLLER
var rootRef = new Firebase('https://example-app.firebaseio.com/');
var childUsers = rootRef.child('users');
var childDate = rootRef.child('tanggal');
var rekapId = $stateParams.rekapId;
console.log(rekapId);
childDate.child(rekapId).child('tanggalBaca').once('value',function(snap){
$timeout(function() {
var snapshot= snap.val();
$scope.tanggal = snapshot;
console.log($scope.tanggal);
myAfterFunction();
});
})
function myAfterFunction(){
var dates = $scope.tanggal;
console.log(dates);
var rekapUsers = childUsers.on('value', function(snapshot){
snapshot.forEach(function(childSnapshot){
var key = childSnapshot.key();
console.log(key);
var childStatus = childUsers.child(key+'/status/'+dates);
childStatus.on('value',function(grandsnap){
var snapval =grandsnap.val();
$scope.statusbaca = snapval;
$scope.key = key;
console.log($scope.statusbaca);
console.log($scope.key);
})
})
var snapshotVal = snapshot.val();
$scope.users =snapshotVal;
console.log($scope.users);
})
}
Hi i having problem when i retrieve data from firebase in console.log($scope.statusbaca) it display 2 query true and false. but when it showing in the app it only display false. Sorry for my bad english. English is not my native language. Hope you understand my problem
App return false but console log display true and false
and this is my code
Template
<div ng-repeat= "item in users">
<div class="list card" style="padding:1%;">
<div class="col-50" style="float:left;">
<h5>{{item.displayName}} - {{item.handphone}}</h5>
<h5>{{item.email}}</h5>
</div>
<div class="col-33" style="float:right; position: relative;" ng-repeat = "datas in statusbaca">
<h5>{{datas}}</h5>
</div>
</div>
</div>
Controller
var rootRef = new Firebase('https://example-app.firebaseio.com/');
var childUsers = rootRef.child('users');
var childDate = rootRef.child('tanggal');
var rekapId = $stateParams.rekapId;
console.log(rekapId);
childDate.child(rekapId).child('tanggalBaca').once('value',function(snap){
$timeout(function() {
var snapshot= snap.val();
$scope.tanggal = snapshot;
console.log($scope.tanggal);
myAfterFunction();
});
})
function myAfterFunction(){
var dates = $scope.tanggal;
console.log(dates);
var rekapUsers = childUsers.on('value', function(snapshot){
snapshot.forEach(function(childSnapshot){
var key = childSnapshot.key();
console.log(key);
var childStatus = childUsers.child(key+'/status/'+dates);
childStatus.on('value',function(grandsnap){
var snapval =grandsnap.val();
$scope.statusbaca = snapval;
$scope.key = key;
console.log($scope.statusbaca);
console.log($scope.key);
})
})
var snapshotVal = snapshot.val();
$scope.users =snapshotVal;
console.log($scope.users);
})
}
Any idea what's wrong with my code and how to fix this? thanks
I'm not sure if this will fix it but your div elements are unbalanced.
You should add a ending div element like this,
<div class="col-33" style="float:right; position: relative;" ng-repeat = "datas in statusbaca">
<h5>{{datas}}</h5>
</div>
Also, I can't find some of the variables referenced by the HTML in the JavaScript and rather than having your
value output like this:
<h5>{{datas}}</h5>
you should have it like this:
<h5>{{datas.THE NAME OF YOUR KEY:VALUE PAIR}}</h5>
I can't test it since you're using firebase but, I would do quick run through with your code.
I am trying to retrieve values from the url and displaying it in my web page using angular JS. what i am doing is
1) saving the entire url to a variable and split it so that i can filter to the value i need.
2) However when there is a space it is shown as %20. i want this %20 to be displayed as space itself.
Example : john doe is shown as john%20doe
Controller
function InboxController($scope, $http, $cookieStore, $location) {
$scope.single_mail = function()
{
var url = $location.url();
var split_url = url.split('=');
var mess_id = split_url[1];
var from = split_url[2];
var id_value = mess_id.split('&');
var inbox_id = id_value[0];
var from_value = from.split('&');
$scope.inbox_from = from_value[0];
$scope.single_message = [];
$scope.single_message = [];
var single_inbox_mail ="https://phoe.manage.com/app/inbox/message.html?contactid="+conId+"&token="+token+"&id="+inbox_id;
$http.get(single_inbox_mail).success(function(response) {
$scope.single_message = response[0];
});
HTML view
<div class="page" data-ng-controller="InboxController">
<div class="row" ng-init="single_mail()">
<div class="mail-header row">
<div class="col-md-8">
<h3>{{single_message.subject}}</h3>
<h4>From : <strong>{{inbox_from}}</strong></h4>
</div>
</div>
<div class="mail-content">
<p>{{single_message.body}}</p>
</div>
</div>
</div>
this is encoded url part, you should use decodeURIComponent() function and pass encoded string in first param, see sample code
decodeURIComponent("john%20doe");
//> john doe
try this using javascript component
var url = decodeURIComponent($location.url());