I am making an webapp to add image in MongoDB using image url. But when I'm using userFilter using Session it is not working and anything related Session are not working.
I have already use command "meteor add session " but again its not working
my start.js code is:
Images=new Mongo.Collection("images");
if(Meteor.isClient) {
Session.set("imageLimit",8);
$(window).scroll(function(event){
console.log(new Date());
})
Template.images.helpers({
images:function(){
if(Session.get("userFilter")){
return Images.find({createBy:Session.get("userFilter")},{sort: {date:-1,rating:-1}});
} else {
return Images.find({},{sort:{date:-1,rating:-1}});
}
},
getUser:function(user_id){
var user=Meteor.users.findOne({_id:user_id});
if(user) {
return user.username;
} else {
return "none"
}
}
});
Template.body.helpers({
username:function(){
if(Meteor.user()) {
return Meteor.user().username;
// return Meteor.user().emails[0].address;
} else {
return "";
}
}
});
Template.images.events({
'click .js-image':function(event){
$(event.target).css("width","50px");
},
'click .btn-del':function(event){
var id=this._id;
$("#"+id).hide('slow',function(){
Images.remove({"_id":id});
});
},
'click .js-rate':function(event){
var rating=$(event.currentTarget).data("userrating");
console.log(rating);
var image_id=this.id;
Images.update({_id:image_id},{$set:{rating:rating}});
},
'click .js-form-show':function(event){
$("#add-form").modal('show');
},
'click .js-click-name':function(event){
Session.set("userFilter",this.createBy);
}
});
Template.img_text.events({
'submit .js-form':function(event){
var img_src,img_alt;
img_src=event.target.img_src.value;
img_alt=event.target.img_alt.value;
Images.insert({
img_src:img_src,
img_alt:img_alt,
date:new Date(),
createBy:Meteor.user()._id
});
return false;
},
});
}
my html code is:
<head>
<title>Meteor JS</title>
</head>
<body>
{{> img_text}}
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
{{> loginButtons}}
</div>
</nav>
<div class="container">
<h1>Welcome to mySite {{username}}!</h1>
{{> images}}
</div>
</body>
<template name="img_text">
<div class="modal fade" id="add-form">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title">
<h2>Image Form</h2>
</div>
</div>
<div class="modal-body">
<form class="js-form">
<input type="text" name="img_src">
<br/><input type="text" name="img_alt">
<button class="btn btn-success" >Submit</button>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-warning" data-dismiss="modal" >cancel</button>
</div>
</div>
</div>
</div>
</template>
<template name="images">
{{#if currentUser }}
<div id="btn">
<button class="btn btn-success js-form-show" >Add Image</button>
</div>
{{/if}}
<div class="row">
{{#each images}}
<div class="col-xs-12 col-md-3" id="{{_id}}">
<div class="thumbnail">
<img class="js-image" src="{{img_src}}" alt="{{img_alt}}"/>
<div class="caption">
<h3>Rating : {{rating}}</h3>
<p>{{img_alt}}</p>
<p>
User:
{{getUser createBy}}</p>
<p>
{{>starsRating mutable=true class="js-rate" id=_id}}
</p>
<button class="btn-del btn btn-warning">delete</button>
</div>
</div>
</div>
{{/each}}
</div>
</template>
Related
I am programming an action where after a button press, games on the platform "console" or "pc" is shown. I would like it when the button for "pc" is pressed first, all pc games are shown. And after when the "console" button is pressed, all "pc" games are removed and then all "console" games are appended
code for the buttons is this:
<button class="btn btn-success" type="submit" onclick="searchPC()">PC</button>
<button class="btn btn-success" type="submit" onclick="searchCon()">Console</button>
code for the function is similar across the two buttons;
function searchPC() {
$("search").replaceWith(`<div></div>`);
axios
.get(`${baseUrl}/game/PC`)
.then((response) => {
const posts = response.data;
console.log(posts);
posts.forEach((post) => {
const postPHtml = `
<div class="card sm-6" style="margin-top: 2rem;">
<div class="card-body ">
<p class="card-text">${post.title}</p>
</div>
<div class="card-footer text-muted">
<p>${post.description}</p>
<p>SGD$${post.price}</p>
</div>
<div class="card-footer text-muted">
<a class="nav-link" href="/gamesinfo/${post.gameid}">Home</a>
</div>
</div>
`;
$("#search").replaceWith(postPHtml);
});
})
.catch((error) => {
console.log(error);
});
}
What I have attempted is to replace any info with an empty div, then adding the desired information, however, it still shows the older information (referring to above, "pc" is still shown even after pressing "console".
Furthermore, I have more than 1 card to add, ie there are >2 sets of information for console and pc games
original file with js included is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Friendbook</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body class='bg-dark'>
<div class="container-fluid bg-dark">
<div class="">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="/">
<div>
<img src="http://localhost:8082/images/image.jpg" alt="logo" style="width:40px;" id="logo">
</div>
</a>
<a class="nav-link" href="/">Home</a>
<button class="btn btn-success" type="submit" onclick="searchPC()">PC</button>
<button class="btn btn-success" type="submit" onclick="searchCon()">Console</button>
</nav>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark mt-1">
<form class="form-inline ml-2" action="/action_page.php">
<input class="form-control" id='searchP' type="text" placeholder="Search by Price">
<button class="btn btn-success" type="submit">Search</button>
</form>
<form class="form-inline ml-2" action="/action_page.php">
<input class="form-control" id='searchN' type="text" placeholder="Search by Name">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>
<div class="row" style="margin-top: 2rem;">
</div>
</div>
<div class="card" style="margin-top: 2rem;">
<div class="card-body col-md-10">
<h4 class='title '>Search Games</h4>
<div id="search" class="container-fluid md-6 sm-6">
</div>
</div>
</div>
<div class="card" style="margin-top: 2rem;">
<div class="card-body col-md-10">
<h4 class='title '>All Games</h4>
</div>
</div>
<div class="row" style="margin-top: 2rem;">
<div class="col-md-11 col-xs-12 ml-5">
<div id="posts" class="container-fluid md-6 sm-6">
</div>
</div>
</div>
</div>
<footer class='bg-dark p-3'>
<div class='ml-2 mt-2'>
<form>
<button class="btn btn-success" type="submit" onclick="logout()">logout</button>
</form>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
const baseUrl = "http://localhost:8081";
const token = localStorage.getItem("token");
const loggedInUserID = parseInt(localStorage.getItem("loggedInUserID"));
if (token === null /* || isNaN(loggedInUserID) */) {
window.location.href = "/login/";
} else {
axios.get(`${baseUrl}/gameall/all`)
.then((response) => {
const posts = response.data;
console.log(posts)
posts.forEach((post) => {
const postHtml = `
<div class="card sm-6" style="margin-top: 2rem;">
<div class="card-body ">
<p class="card-text">${post.title}</p>
</div>
<div class="card-footer text-muted">
<p>${post.description}</p>
<p>SGD$${post.price}</p>
</div>
<div class="card-footer text-muted">
<a class="nav-link" href="/gamesinfo/${post.gameid}">Home</a>
</div>
</div>
`;
$("#posts").append(postHtml);
});
})
.catch((error) => {
console.log(error);
});
/*
axios.get(`${baseUrl}/game/console/`)
.then((response) => {
const posts = response.data;
console.log(posts)
posts.forEach((post) => {
const postHtml = `
<div class="card sm-6" style="margin-top: 2rem;">
<div class="card-body ">
<p class="card-text">${post.title}</p>
</div>
<div class="card-footer text-muted">
${post.description}
</div>
<div class="card-footer text-muted">
<a class="nav-link" href="/gamesinfo/${post.gameid}">Home</a>
<p class="card-text">${post.price}</p>
</div>
</div>
`;
$("#posts").append(postHtml);
});
})
.catch((error) => {
console.log(error);
});*/
//acts as addpost api
$("#create-post-form").submit((event) => {
// prevents the page from refreshing
event.preventDefault();
const requestBody = {
text_body: $("#create-post-form-body").val(),
fk_poster_id: loggedInUserID
};
// create the post
axios.post(`${baseUrl}/posts/`, requestBody)
.then((response) => {
// reset form value.
$("#create-post-form-body").val("");
// fetch the post with the returned postID
axios.get(`${baseUrl}/posts/${response.data.postID}`)
.then((response) => {
const post = response.data;
const postHtml = `
<div class="card sm-6" style="margin-top: 2rem;">
<div class="card-body sm-6">
<p class="card-text">${post.text_body}</p>
</div>
<div class="card-footer text-muted">
${post.created_at}
</div>
</div>
`;
$("#posts").append(postHtml);
})
.catch((error) => {
console.log(error);
});
});
});
}
function logout() {
localStorage.removeItem('token')
localStorage.removeItem('role')
localStorage.removeItem('id')
}
function searchPC() {
axios.get(`${baseUrl}/game/PC`)
.then((response) => {
const posts = response.data;
console.log(posts)
posts.forEach((post) => {
const postPHtml = `
<div class="card sm-6" style="margin-top: 2rem;">
<div class="card-body ">
<p class="card-text">${post.title}</p>
</div>
<div class="card-footer text-muted">
<p>${post.description}</p>
<p>SGD$${post.price}</p>
</div>
<div class="card-footer text-muted">
<a class="nav-link" href="/gamesinfo/${post.gameid}">Home</a>
</div>
</div>
`;
$("#search").appendChild(postPHtml);
});
})
.catch((error) => {
console.log(error);
});
}
function searchCon() {
axios.get(`${baseUrl}/game/console`)
.then((response) => {
const posts = response.data;
posts.forEach((post) => {
const postCHtml = `
<div class="card sm-6" style="margin-top: 2rem;">
<div class="card-body ">
<p class="card-text">${post.title}</p>
</div>
<div class="card-footer text-muted">
<p>${post.description}</p>
<p>SGD$${post.price}</p>
</div>
<div class="card-footer text-muted">
<a class="nav-link" href="/gamesinfo/${post.gameid}">Home</a>
</div>
</div>
`;
$("#search").appendChild(postCHtml);
});
})
.catch((error) => {
console.log(error);
});
}
</script>
</body>
</html>```
I think you need to use **html(htmlString) **
Description: Set the HTML contents of each element in the set of matched elements
replace $("#search").replaceWith(postPHtml);
with $("#search").html(postPHtml);
see:https://api.jquery.com/html/
I have this code (Bootstrap and Jquery):
<div class="container">
<div class="modal fade" id="modalSubscriptionForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Subscribe</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fas fa-user prefix grey-text"></i>
<input type="text" id="form3" class="form-control validate val1" name="val1">
<label data-error="wrong" data-success="right" for="form3">Title</label>
</div>
<div class="md-form mb-4">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="email" id="form2" class="form-control validate val2" name="val2">
<label data-error="wrong" data-success="right" for="form2">Desc</label>
</div>
<div class="md-form mb-4">
<i class="fas fa-envelope prefix grey-text"></i>
<label data-error="wrong" data-success="right" for="form2">
Coordinates click:
<div class="coorX"></div>
x
<div class="coorY"></div>
</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-indigo saveBtn">Send <i class="fas fa-paper-plane-o ml-1"></i></button>
</div>
</div>
</div>
</div>
<div class="scalize imgpo">
<img src="img/jacket.png" alt="" class="target ">
<div class="item-point" data-top="130" data-left="300" id="point1">
<div>
</div>
</div>
<div class="item-point" data-top="180" data-left="462" id="point2">
<div>
</div>
</div>
<div class="item-point" data-top="380" data-left="215" id="point3">
<div>
</div>
</div>
<div class="item-point" data-left="357" data-top="458" id="point4">
<div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.imgpo').click(function(e) {
var posX = $(this).position().left,
posY = $(this).position().top;
$('.coorX').html((e.pageX - posX - 10));
$('.coorY').html((e.pageY - posY - 10));
$(".tooltip").tooltip("hide");
$('.formAdd').click();
});
$('.saveBtn').click(function(e) {
var val1 = $(".val1").val();
var val2 = $(".val2").val();
var values = {
'val1': val1,
'val2': val2
};
alert('Save');
$.ajax({
url: "save.php",
type: "post",
data: values,
success: function(response) {
alert('Save');
},
error: function(jqXHR, textStatus, errorThrown) {
alert('Error');
}
});
});
$('.scalize').scalize({
styleSelector: 'circle',
animationPopoverIn: 'flipInY',
animationPopoverOut: 'flipOutY',
animationSelector: 'pulse2'
});
/*
$('.tooltips').tooltip({
html: true,
trigger: 'click',
placement: 'top'
})
*/
const $tooltip = $('.tooltips');
$tooltip.tooltip({
html: true,
trigger: 'click',
placement: 'top',
});
$tooltip.on('show.bs.tooltip', () => {
$('.tooltip').not(this).remove();
});
$tooltip.on('click', (ev) => {
ev.stopPropagation();
})
});
</script>
<div class="itemsBox">
<form name="saveForm" action="#" method="post">
<div class="obiect1">Obiect 1
<div class="removeMe" id="1">X</div>
</div>
<div class="obiect2">Obiect 2
<div class="removeMe" id="2">X</div>
</div>
<div class="obiect3">Obiect 3
<div class="removeMe" id="3">X</div>
</div>
<div class="obiect4">Obiect 4
<div class="removeMe" id="4">X</div>
</div>
</div>
<input type="submit" value="Save" />
</form>
prview: http://serwer1356363.home.pl/pub/component/index2.html
In this webpage I have:
1. points on image points (id = point1 to point4),
2. objects (obiect1 to obiect4).
I have too removeMe with ID 1-4.
I would like that after clicking a div with the class removeMe, for example, ID = 2 - the page has been removed:
1. obiect2
2. point2
Could I ask you to write the code?
I would like to delete entire blocks of obiect2 and point2 together with what is inside (html content)
How to do it?
You can get the number from the id of .removeMe and use this in the selectors for point and abject to find the corresponding elements.
$('.removeMe').on('click', function() {
var number = $(this).attr('id');
$('#point' + number).remove();
$('.obiect' + number).remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="obiect1">Obiect 1
<div class="removeMe" id="1">X</div>
</div>
<div class="obiect2">Obiect 2
<div class="removeMe" id="2">X</div>
</div>
<div class="obiect3">Obiect 3
<div class="removeMe" id="3">X</div>
</div>
<div class="obiect4">Obiect 4
<div class="removeMe" id="4">X</div>
</div>
<div class="scalize imgpo">
<img src="img/jacket.png" alt="" class="target ">
<div class="item-point" data-top="130" data-left="300" id="point1">
<div>
point1
</div>
</div>
<div class="item-point" data-top="180" data-left="462" id="point2">
<div>
point2
</div>
</div>
<div class="item-point" data-top="380" data-left="215" id="point3">
<div>
point3
</div>
</div>
<div class="item-point" data-left="357" data-top="458" id="point4">
<div>
point4
</div>
</div>
</div>
I have the following snippets:
My HTML Page which uses 4 buttons to show/hide four divs, each will have their own content.
var otherDivs = ["addCustomer", "searchCustomer", "addItem", "searchItem"];
function show(target) {
var index = otherDivs.indexOf(target);
for (i = 0; i < otherDivs.length; i++) {
if (i != index) {
$(document.getElementById(otherDivs[i].toString())).hide();
} else {
$(document.getElementById(otherDivs[i].toString())).show();
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-top: 10px;">
<div class="row" name="tabs">
<button class="redButton" onclick="show('addCustomer')">Add Customer</button>
<button class="redButton" onclick="show('searchCustomer')">Search Customers</button>
<button class="redButton" onclick="show('addItem')">Add Item</button>
<button class="redButton" onclick="show('searchItem')">Search Item</button>
</div>
<div class="row trigger" name="searchCustomer" id="searchCustomer">
...
</div>
<div class="row trigger" name="addCustomer" id="addCustomer">
...
</div>
<div class="row trigger" name="addItem" id="addItem">
...
</div>
<div class="row trigger" name="searchItem" id="searchItem">
...
</div>
</div>
The problem is, only the fist button and div (addCustomer) works correctly. I have tried split methods but I would prefer to keep the single method. Any help is appreciated.
Use jQuery fully when you have it.
Although with your HTML and inline script this would work:
function show(target) {
$('.trigger').hide();
$("#"+ target).show();
}
As could this (but it would not work as a radio button more like a checkbox):
function show(target) {
$("#"+ target).toggle();
}
I strongly suggest you use unobtrusive code and move the script out of the HTML
$(function() {
$(".redButton").on("click",function() { // any button
$(".trigger").hide(); // hide the divs
$("#"+$(this).data("id")).show(); // show the relevant div
});
});
.trigger { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-top: 10px;">
<div class="row" name="tabs">
<button type="button" class="redButton" data-id="addCustomer">Add Customer</button>
<button type="button" class="redButton" data-id="searchCustomer">Search Customers</button>
<button type="button" class="redButton" data-id="addItem">Add Item</button>
<button type="button" class="redButton" data-id="searchItem">Search Item</button>
</div>
<div class="row trigger" name="searchCustomer" id="searchCustomer">
Search Customer
</div>
<div class="row trigger" name="addCustomer" id="addCustomer">
Add Customer
</div>
<div class="row trigger" name="addItem" id="addItem">
Add Item
</div>
<div class="row trigger" name="searchItem" id="searchItem">
Search Item
</div>
</div>
Actually your code working properly but the thing is that you cannot specfiy which div is opened now because all divs have the same content, so when you add numbers or a different content you can know which one is opened now
var otherDivs = ["addCustomer", "searchCustomer", "addItem", "searchItem"];
function show(target) {
var index = otherDivs.indexOf(target);
for (i = 0; i < otherDivs.length; i++) {
if (i != index) {
$(document.getElementById(otherDivs[i].toString())).hide();
} else {
$(document.getElementById(otherDivs[i].toString())).show();
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-top: 10px;">
<div class="row" name="tabs">
<button class="redButton" onclick="show('addCustomer')">Add Customer</button>
<button class="redButton" onclick="show('searchCustomer')">Search Customers</button>
<button class="redButton" onclick="show('addItem')">Add Item</button>
<button class="redButton" onclick="show('searchItem')">Search Item</button>
</div>
<div class="row trigger" name="searchCustomer" id="searchCustomer">
.11..
</div>
<div class="row trigger" name="addCustomer" id="addCustomer">
.22..
</div>
<div class="row trigger" name="addItem" id="addItem">
.33..
</div>
<div class="row trigger" name="searchItem" id="searchItem">
.44..
</div>
</div>
Simpy use the JQuery toggle function like so
function show(target) {
$('#'+target).toggle();
}
You could replace your entire JS in the snippet to just these LOC. HTML remains the same.
function show(target) {
$('#'+target).toggle();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-top: 10px;">
<div class="row" name="tabs">
<button class="redButton" onclick="show('addCustomer')">Add Customer</button>
<button class="redButton" onclick="show('searchCustomer')">Search Customers</button>
<button class="redButton" onclick="show('addItem')">Add Item</button>
<button class="redButton" onclick="show('searchItem')">Search Item</button>
</div>
<div class="row trigger" name="searchCustomer" id="searchCustomer">
...
</div>
<div class="row trigger" name="addCustomer" id="addCustomer">
...
</div>
<div class="row trigger" name="addItem" id="addItem">
...
</div>
<div class="row trigger" name="searchItem" id="searchItem">
...
</div>
</div>
Updated answer
function show(target) {
$("#Display").html( $('#' + target).html());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-top: 10px;">
<div class="row" name="tabs">
<button class="redButton" onclick="show('addCustomer')">Add Customer</button>
<button class="redButton" onclick="show('searchCustomer')">Search Customers</button>
<button class="redButton" onclick="show('addItem')">Add Item</button>
<button class="redButton" onclick="show('searchItem')">Search Item</button>
</div>
<div class="row trigger" name="searchCustomer" id="searchCustomer" hidden>
Searching Customers
</div>
<div class="row trigger" name="addCustomer" id="addCustomer" hidden>
Customers added
</div>
<div class="row trigger" name="addItem" id="addItem" hidden>
Items added
</div>
<div class="row trigger" name="searchItem" id="searchItem" hidden>
Searching Items
</div>
<div id="Display">
</div>
</div>
the usage of a semantic-ui modal window does not work if the root-element is a meteor template:
package: semantic-ui-css
Error reproduction:
hello.html:
<template name="hello">
<head>
<title>Hello Error</title>
</head>
<body>
<h1>Reproduce error</h1>
{{> navigation}}
<div class="delete openModal">OPEN<i class="close icon"></i></div>
<div id="modalView" class="ui modal">
<div class="content">
<div class="ui fluid input">
Modal Error Test
</div>
</div>
<div class="actions">
<div class="ui button cancel">Cancel</div>
<div class="ui button ok">OK</div>
</div>
</div>
</body>
</template>
<template name="navigation">
<div class="ui menu">
<a class="item" id="home" href="/">
<i class="home icon"></i> welcome
</a>
</div>
</template>
And in Javascript (hello.js) code:
if (Meteor.isClient) {
Template.hello.events({
'click .openModal': function (event,template) {
$('#modalView')
.modal({
onDeny : function(){
console.log('canceled');
},
onApprove : function() {
console.log("yeah!");
}
})
.modal('show')
;
}
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}
Router.route('/', function () {
this.render('hello');
});
The error is:
TypeError: $dimmer.on is not a function
semanti...27ec43c (Line 5786)
Does anyone know how to solve this?
The root element being a template is not the problem. The problem is having the BODY tag in the template. You wind up with two BODY tags, which leads to having two $dimmers. So when $dimmer.on is called, it is actually an array and the semantic-ui code would have to call $dimmer[i].on (where i would be 0 and 1) and it doesn't work that way.
So change hello.html to:
<template name="hello">
<div class="delete openModal">OPEN<i class="close icon"></i></div>
<div id="modalView" class="ui modal">
<div class="content">
<div class="ui fluid input">
Modal Error Test
</div>
</div>
<div class="actions">
<div class="ui button cancel">Cancel</div>
<div class="ui button ok">OK</div>
</div>
</div>
</template>
<template name="navigation">
<div class="ui menu">
<a class="item" id="home" href="/">
<i class="home icon"></i> welcome
</a>
</div>
</template>
And create a layout (layout.html):
<head>
<title>Hello Error</title>
</head>
<body>
<h1>Reproduce error</h1>
{{> navigation}}
</body>
That works.
Of course you could just remove the BODY tag from hello.html:
<template name="hello">
<head>
<title>Hello Error</title>
</head>
<h1>Reproduce error</h1>
{{> navigation}}
<div class="delete openModal">OPEN<i class="close icon"></i></div>
<div id="modalView" class="ui modal">
<div class="content">
<div class="ui fluid input">
Modal Error Test
</div>
</div>
<div class="actions">
<div class="ui button cancel">Cancel</div>
<div class="ui button ok">OK</div>
</div>
</div>
</template>
<template name="navigation">
<div class="ui menu">
<a class="item" id="home" href="/">
<i class="home icon"></i> welcome
</a>
</div>
</template>
That works too, but I think the first approach is the clean/Meteor way.
Full Disclosure: I am new to Ember.
I have an app that I have started where when the user clicks on the next button, they create an instance of the customer model and that model is saved to local storage. On the next page, I want both the first and last name to pre-populate the text inputs. I have tried to follow the intro video but I have run into a problem. It appears that I am creating the object and then storing it successfully in local storage, but when the user transitions to the next page, the model can't be found. Here is my code:
HTML:
<script type="text/x-handlebars">
<div class="navbar navbar-inverse navbar-fixed-top">
<div id="nobox" class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
</div>
</div>
<div class="container">
{{outlet}}
<footer>
</footer>
</div>
</body>
</script>
<script type="text/x-handlebars" data-template-name="index">
<div class="container main-container" id="main">
<div class="navbar">
<div class="navbar-inner">
<!--<div class="progress-bar-label-div">
Progress:
</div>
<div class="progress-bar-div">
<div class="progress progress-striped">
<div class="bar" style="width:60%;"></div>
</div>
</div>-->
<div class="btn-group pull-right">
<a class="btn btn-primary" id="captcha" {{action 'create'}}>
Next
</a>
</div>
</div>
</div>
<div id="messages">
</div>
<div class="row top">
<div class="pull-left" >
<h3 class="purple">To start the process, please fill out the captcha below</h3>
</div>
<div class="pull-right">
</div>
</div>
<div class="well">
<div class="row">
<div class="pull-left questions">
</div>
</div>
</div>
</div>
<hr>
</script>
<script type="text/x-handlebars" data-template-name="customer">
<div class="container main-container" id="main">
<div class="navbar">
<div class="navbar-inner">
<div class="btn-group pull-right">
{{#linkTo 'wsnum' action="create" classNames="btn btn-primary"}}Next{{/linkTo}}
</div>
</div>
</div>
<div id="messages">
</div>
<div class="row top">
<div class="pull-left">
<h3>Customer Information</h3>
</div>
<div class="pull-right">
</div>
</div>
<div class="row top">
<div class="pull-left">
<span class="red">*</span> = Denotes required field
</div>
<div class="pull-right form-inputs input-text">
</div>
</div>
<br>
<div class="row-b">
<div class="control-group">
<label class="control-label" for="inputfname">First Name<span class="red">*</span>:</label>
<div class="controls">
{{view Ember.TextField valueBinding='model.first'}}
</div>
</div>
</div>
<div class="row-a">
<div class="control-group">
<label class="control-label" for="inputlname">Last Name<span class="red">*</span>:</label>
<div class="controls">
{{view Ember.TextField valueBinding='model.last'}}
</div>
</div>
</div>
</div>
<input type="hidden" name="prev" value="">
<hr>
</script>
<script type="text/x-handlebars" data-template-name="wsnum">
<div class="container main-container" id="main">
<div class="navbar">
<div class="navbar-inner">
<!--<div class="progress-bar-label-div">
Progress:
</div>
<div class="progress-bar-div">
<div class="progress progress-striped">
<div class="bar" style="width:60%;"></div>
</div>
</div>-->
<div class="btn-group pull-right">
<!--<a class="btn" href="">
Prev
</a>
<a class="btn btn-primary" id="captcha">
Next
</a>-->
{{#linkTo 'customer' classNames="btn btn-primary"}}Prev{{/linkTo}}
</div>
</div>
</div>
<div id="messages">
</div>
<div class="row top">
<div class="pull-left" >
<h3>Choose the Number of Workstations or Point of Sale Accessories only</h3>
</div>
<div class="pull-right">
</div>
</div>
<div class="well">
<div class="row">
<div class="pull-left additional-questions">
How many workstations will you need?
</div>
<div class="pull-right input-text-well">
</div>
</div>
</div>
<div class="well">
<div class="row">
<div class="pull-left additional-questions">
Request Point of Sale Accessories only
</div>
<div class="pull-right radio-wsnum">
<label class="checkbox inline radio-new-pos">
<input type="checkbox" id="posonly1" name="posonly1" value="pos"> POS only
</label>
</div>
</div>
</div>
</div>
<hr>
</script>
<script type="text/x-handlebars" data-template-name="overview">
</script>
<script type="text/x-handlebars" data-template-name="new">
</script>
<script type="text/x-handlebars" data-template-name="existing">
</script>
And my app.js:
App = Ember.Application.create();
App.store = DS.Store.create({
revision: 12,
adapter: DS.LSAdapter.extend()
});
App.Router.map(function() {
// put your routes here
this.route("customer", { path: "/customer" });
this.route("wsnum", {path: "/wsnum"});
});
App.IndexRoute = Ember.Route.extend({
});
App.IndexController = Ember.Controller.extend({
create: function(){
var customer = App.Customer.createRecord({
first:"ron",
last:"testing"
});
console.log('Before the save');
customer.save();
console.log(customer.get('first'));
this.transitionToRoute('customer');
}
});
App.CustomerRoute = Ember.Route.extend({
model: function() {
var customer = App.Customer.find();
console.log(customer.get('first'));
return customer;
}
});
App.WsnumRoute = Ember.Route.extend({
});
var attr = DS.attr;
App.Customer = DS.Model.extend({
first: attr('string'),
last: attr('string')
});
Here is a working example. Any ideas?
In App.CustomerRoute.model(), this line:
var customer = App.Customer.find();
sets the customer variable is being set to result of find(). find() returns an array of all customer records. So when you call get('first') on the array it is undefined, since the array of customers does not have a property first.
Also, the route
this.route("customer", { path: "/customer" });
should probably be:
this.route("customer", { path: "/customer/:customer_id" });
since it seems to be for displaying one customer not a list of them.
With that change, CustomerRoute is not really needed at all. So app looks like:
App = Ember.Application.create();
App.store = DS.Store.create({
revision: 12,
adapter: DS.LSAdapter.extend()
});
App.Router.map(function() {
this.route("customer", { path: "/customer/:customer_id" });
this.route("wsnum", {path: "/wsnum"});
});
App.IndexController = Ember.Controller.extend({
create: function(){
var controller = this;
var customer = App.Customer.createRecord({
first:"ron",
last:"harmon"
});
customer.save().then(function() {
controller.transitionTo('customer', customer);
});
}
});
var attr = DS.attr;
App.Customer = DS.Model.extend({
first: attr('string'),
last: attr('string')
});
Working example here: http://jsbin.com/itogeh/1/edit