How to Upload an Image to Server on Meteor Startup - javascript

I am trying to Set a default DP for the users who do not have/not uploded an image.
Tried using helpers to display content but getting error "Uncaught Error: {{#each}} currently only accepts arrays, cursors or falsey values."
Code Below(Client JS)
JS :
Template.mcomments.helpers({
'mcommentsdata':function(){
return comdata.find({},{sort:{"at":-1}}).fetch();
},
images2: function () {
var fetchimg=Meteor.users.findOne({
"_id":this.__id
});
if((fetchimg.profileimage==undefined)||(fetchimg.profileimage=="")){
var hello="/images/prof.jpg"
return hello;
}else{
return Images.find({"_id":fetchimg.profileimage})
}
}
});
HTML
<template name="mcomments">
<div id="mcomments" class="col-lg-3">
<div><h5 class="mcommentsheader">Followup Stream </h5>
</div>
<div class="col-lg-12 scrolling comscrolllist" id="mcomments1">
<div id="mcomments2">
{{#each mcommentsdata}}
<div class="col-lg-12 comcontainer">
<div class="row">
<div class="col-lg-3 indcomments" >
{{#each images2}}
<img src="{{this.url
}}" width="45px" height="50px" alt="">
{{/each}}
</div>
<div class="col-lg-9" style="">
<div class="row combody" >
<div class="pull-left mcommfont" >{{user}}</div>
<div class="pull-right mcommcust">{{product}} Case#{{productcaseno}}</div>
</div>
<div class="maincomment">{{comment}}</div>
<div class="comtemp"> <span data-livestamp="{{at}}"></span></div>
</div>
</div>
</div>
<div class="col-lg-12 comblankspace">
</div>
{{/each}}
</div>
</div>
</div>
</template>
Now i have given up on this approach and thinking of uploading an image and attaching the url to all profiles by default(onCreateuser) until they change it.I believe to do this i might have to upload and image automatically on server startup. Please lead me to the right direction as i am still noob in meteor.
Storage Adapter: GridFS.
Regards,
Azaruddin

Change the 'hello' variable to the following code:
var hello = [
{ url: "/images/prof.jpg" }
];
You're running into problems because hello is currently a string - #each expects an array/cursor/etc. as your error suggests.
Alternatively, you could use {{#else}} on your each block and get rid of returning your 'hello' case entirely:
{{#each images}}
...
{{else}}
<!-- Default profile image code -->
{{/each}}

Related

Unable to filter data from database due to laravel blade curly braces "{{ }}"

I'm trying to filter data gotten from database with the class="data-groups".
Here is the code:
this.shuffle.filter(function(element, shuffle) {
// If there is a current filter applied, ignore elements that don't match it.
if (shuffle.group !== Shuffle.ALL_ITEMS) {
// Get the item's groups.
var groups = JSON.parse(element.getAttribute('data-groups'));
var isElementInCurrentGroup = groups.indexOf(shuffle.group) !== -1;
// Only search elements in the current group
if (!isElementInCurrentGroup) {
return false;
}
}
var titleElement = element.querySelector('.book-item_title');
var titleText = titleElement.textContent.toLowerCase().trim();
return titleText.indexOf(searchText) !== -1;
});
};
<!-- begin snippet: js hide: false console: true babel: false -->
<div class="grid-shuffle">
<ul id="grid" class="row">
#foreach($libraries as $library)
<li class="book-item small-12 medium-6 columns" data-groups='["{{$library->genre}}"]' data-date-created='{{$library->published}}' data-title='{{ $library->title }}' data-color='{{$library->color}}'>
<div class="bk-img">
<div class="bk-wrapper">
<div class="bk-book bk-bookdefault">
<div class="bk-front">
<div class="bk-cover" style="background-image: url('img/001-small.png')"></div>
</div>
<div class="bk-back"></div>
<div class="bk-left"></div>
</div>
</div>
</div>
<div class="item-details">
<h3 class="book-item_title">{{$library->title}}</h3>
<p class="author">{{$library->author}} • {{$library->published}}</p>
<p>{{$library->synopsis}}</p>
Details
</div>
<div class="overlay-details">
Close
<div class="overlay-image">
<img src="img/001.jpg" alt="Book Cover">
<div class="back-color"></div>
</div>
<div class="overlay-desc activated">
<h2 class="overlay_title">{{$library->title}}</h2>
<p class="author">by {{$library->author}}</p>
<p class="published">{{$library->published}}</p>
<p class="synopsis">{{ $library->synopsis }}</p>
Preview
</div>
<div class="overlay-preview">
Back
<h4 class="preview-title">Preview</h4>
<div class="preview-content">
<h5>Chapter 1</h5>
<p>{{$library->details}}</p>
</div>
</div>
</div>
</li>
#endforeach
</ul>
</div>
The problem is it doesn't work unless I hard code the genre like this
data-groups='["fiction"]'
Now since I'm retrieving data from a database using the foreach loop it means any book out the database is automatically given the "fiction" attribute regardless of its db assigned genre.
Any help on how to solve this will be appreciated.
Found the problem
I was Filtering with this lines of code
All Categories
Fantasy
Sci-Fi
Classics
Fairy Tale
The problem was that the data-group items are case sensitive. So for example I was filtering with "classic" while my database was providing "Classic" therefore making the filter function seem faulty.

How do I initialize a semantic-ui click event in Meteor.js?

I'm very new to meteor/semantic/javascript in general so I apologize if this question seems a little to rushed, but I seriously cannot figure this out.
An example of a click event I am trying to initialize, I have a semantic-ui dropdown menu. With what I have now, I get this error:
=> Meteor server restarted
Errors prevented startup:
While processing files with ecmascript (for target web.browser):
client/main.js:18:4: Unexpected token (18:4)
Your application has errors. Waiting for file change.
Here's what I have, I know it's pretty messy. I'll work on that later.
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import '/main.html';
import '/templates/cards.html';
import '../lib/collections.js';
Template.cards.helpers({
cards: function() {
return Cards.find();
}
});
Template.card.events({
$('.ui.dropdown')
.dropdown()
;
});
<template name="card">
<div class="three wide column">
<div class="ui cards">
<div class="card">
<div class="content">
<div class="header">
{{header}}
<div class="ui dropdown right floated">
<i class=" small grey ellipsis vertical icon"></i>
<div class="menu">
<div class="item">Edit</div>
</div>
</div>
</div>
<div class="description">
{{desc}}
</div>
</div>
<div class="extra content">
<button class="ui fluid blue icon button"><i class="map icon"></i></button>
</div>
</div>
</div>
</div>
</template>
You've messed up with Template.card.events, you don't need it at all here.
It should be like this instead:
Template.card.onCreated(function() {
$('.ui.dropdown').dropdown();
});

Unexpected token and missing ) after argument list

I'm having an issue with the phonegap ported versions of my app on several devices. On some devices the error (alert) is: "missing ) after argument list", while on other devices "Unexpected token =>".
{ <div class="container home-menu">
<div class="row content-1">
<div class="col-xs-12 text-center">
<!-- Menu -->
<img style="height:90px;" src="res/images/splash_logo.png"/><br>
(unless: (saved-games:) contains $_autosave_slot and (datavalues: (saved-
games:)) contains $_autosave_filename)[(goto: $_start_passage)]
}''<span class="home-button">[[New->$_start_passage]]</span><br>
<span class="home-button">(link: "Continue")[(load-game: $_autosave_slot)]
</span>''<br><a href="#" onClick="closeMeNow();" class="home-
button">Exit</a>
<!-- Credits -->
<div class="bottom-links"><a href="contact.html"><span style="color:
white;">some text</span></a><br>
<span style="color: white;">some text</span></div>
</div>
</div>
</div>
<script> function closeMeNow() { navigator.app.exitApp();} </script>
I fixed it by addding my other JS code to the generated .html file or as an external source, rather than directly into engine I worked with.

AngularJS - JQuery News Ticker - After moving news the javascript function doesn't get called

This is an awkward problem, which will be better explained by looking at the live demo. Basically I have a news box populated with ng-repeat using Angular. Then I am using a jquery plugin called news ticker which allows the news headlines to move around. The first time you land on the page the news items are in their proper spots and they call the function accordingly. After moving them up or down, they stop calling the function, set a breakpoint in the code and after moving the breakpoint is never hit.
Edit - After researching this further I have found that it is because the elements need to be compiled using $compile after they're re added. However following some examples I have not gotten this to work. I need a way of compiling after a move event with this plugin.
Live demo
Angular Script for with function that should be called.
$scope.UpdateNews = function (item,number) {
console.log(item + ' ' + number);
switch (item)
{
case 'General':
$scope.NewsCast.General.Body = $scope.News.GeneralNews[number].Text;
break;
}
};
What the HTML looks like with the news boxes
<script src="http://www.jqueryscript.net/demo/Responsive-jQuery-News-Ticker-Plugin-with-Bootstrap-3-Bootstrap-News-Box/scripts/jquery.bootstrap.newsbox.min.js" type="text/javascript"></script>
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="panel panel-default">
<div class="panel-heading"> <span class="glyphicon glyphicon-list-alt logo-inverse pull-left"></span><b> General News</b></div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<ul class="demo1" style="overflow-y: hidden; height: 280px;" ng-model="Idk">
<li style="" class="news-item text-left" ng-repeat="item in News.GeneralNews"><strong>{{item.DateValue | date: "MMM dd yyyy"}}</strong> {{item.Preview}}<a class="FakeClickable" ng-click="UpdateNews('General',item.index)" data-target="#GeneralModal" data-toggle="modal">Read more...</a></li>
</ul>
<div ng-if="Width>768">
<div ng-include="'../pages/Modals/General/GENERAL_INLINE.html'"></div>
</div>
</div>
</div>
</div>
<div class="panel-footer"> </div>
</div>
</div>

MeteorJS - Template won't rerender after resubscription

I'm creating a gallery application, and I have a categories bar such that when I click one of the categories, I want the gallery to only show images that are in the selected category.
This is gallery.html
<template name="gallery">
<div class="container col-sm-10">
{{>gallerypost}}
<div class="grid master">
{{#each images}}
<div class="grid-item">
<div class="galleryimage" style="">
{{#if isPortrait this.orientation}}
<img src="{{c.url (nameHelper this.name) width=473 height=646 crop="scale"}}" class="img img-responsive" />
{{else}}
<img src="{{c.url (nameHelper this.name) width=646 height=473 crop="scale"}}" class="img img-responsive" />
{{/if}}
</div>
</div>
{{/each}}
</div>
</div>
client.js
Meteor.subscribe('allimages');
Session.setDefault('category', null);
Tracker.autorun(function(){
Meteor.subscribe('categoryimages', Session.get('category'));
console.log('this is working');
});
publications.js
Meteor.publish('allimages', function(){
return ImageInfo.find();
});
Meteor.publish('categoryimages', function(category){
return ImageInfo.find({category: category});
});
So I know the my Session variable works, as I have tested it out in the console. But for some reason the database is not updating. Is it because of the grid framework (Masonsry) that I'm using? What's causing the database to not subscribe to the specific one?
Maybe reloadItems inside your autorun would help http://masonry.desandro.com/methods.html#reloaditems
$('.container').masonry('reloadItems');

Categories