This Meteor code uses patrickml:braintree, since I do not have access to the braintree submit event in order to send a price to the server for processing.
How can I pass an $$ amount from a html element on the page where the client is clicking to the server?
//client
Template.account.onRendered(function () { //6a
Meteor.call('getClientToken', function (error, clientToken) {
if (!error) {
braintree.setup(clientToken, "dropin", {
container: "payment-form",
onPaymentMethodReceived: function (response) {
var nonce = response.nonce;
Meteor.call('btCreateCustomer', function(error) {
if (error) {
throw new Meteor.Error('customer-creation-failed');
} else {
Meteor.call('createTransaction', nonce, function (error) {
if (error) {
throw new Meteor.Error('transaction-creation-failed');
}
});
}
});
}
});
}
});
});
<template name="account">
<div id="account">
<p>Select invoice period:</p>
<select class={{this.class}} data-id={{_id}} name={{name}}>
{{#each values}}
<option class={{class}} selected={{selected}} name={{name}} value={{value}}>{{{label}}}</option>
{{/each}}
</select>
<br><br>
<form role="form">
<div class="row">
<div class="col-md-6 col-xs-12">
<div id="payment-form"></div>
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
</template>
Related
I have a Vue application that is connected to Firebase and is using Vue router. I have a Login page and UserProfile page, when user enters their credentials, I want to redirect them to the UserPage using router, like this:
submit() {
firebase
.auth()
.signInWithEmailAndPassword(this.form.email, this.form.password)
.then(data => {
console.log("data", data);
this.$router.push({ name: "profile" }).catch(err => {
console.log("err");
});
})
.catch(err => {
this.error = err.message;
});
}
The weird thing is, that when I try to login, first attempt displays 'data' in the console and then the 'err" (which is undefined) and it doesnt redirect, but still logs in to user account. When I click submit button again, then it shows 'data' again but no 'err' and redirects to the UserProfile page. I cant figure out why its happening, any help would be appreciated!
The form and button code:
<form action="#" #submit.prevent="submit">
<div class="form-group row">
<label for="email" class="col-md-4 col-form-label text-md-right">Email</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control"
name="email" value required autofocus v-model="form.email"/>
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 col-form-label text-md-right">Password</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control"
name="password" required v-model="form.password"/>
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-8 offset-md-4">
<button type="submit" class="btn btn-primary">Login</button>
</div>
</div>
</form>
plus submit method:
methods: {
submit() {
firebase
.auth()
.signInWithEmailAndPassword(this.form.email, this.form.password)
.then(data => {
console.log("data", data);
this.$router.push({ name: "profile" }).catch(err => {
console.log("err", err);
});
})
.catch(err => {
this.error = err.message;
});
}
}
Router config (index.js):
Vue.use(Router);
const router = new Router({
mode: "history",
base: process.env.BASE_URL,
routes: [
{
path: "*",
redirect: "/games"
},
{
path: "/games",
name: "games",
component: Games
},
{
path: "/games/:game",
name: "game",
component: Game
},
{
path: "/profile",
name: "profile",
component: Profile,
meta: {
requiresAuth: true
}
},
{
path: "/login",
name: "login",
component: Login
},
{
path: "/register",
name: "Register",
component: Register
}
]
});
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
// this route requires auth, check if logged in
// if not, redirect to login page.
if (!store.getters.user.loggedIn) {
next({ name: "login" });
} else {
next(); // go to wherever I'm going
}
} else {
next(); // does not require auth, make sure to always call next()!
}
});
export default router;
There are probably some side effects due to the action value. You actually don't need to submit your form, just to call the Firebase signInWithEmailAndPassword() method.
I would change your code as follows:
template:
<form>
<div class="form-group row">
<label for="email" class="col-md-4 col-form-label text-md-right">Email</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control"
name="email" value required autofocus v-model="form.email"/>
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 col-form-label text-md-right">Password</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control"
name="password" required v-model="form.password"/>
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-8 offset-md-4">
<button type="button" #click="login" class="btn btn-primary">Login</button>
</div>
</div>
</form>
script:
methods: {
login() {
firebase
.auth()
.signInWithEmailAndPassword(this.form.email, this.form.password)
.then(data => {
console.log("data", data);
this.$router.push({ name: "profile" })
});
})
.catch(err => {
this.error = err.message;
});
}
}
I am using ASP.NET Core and AngularJS (not AngularJS 2). I followed this link AngularJS Tutorial for Login with MVC but my mvc controller (AuthenticateUser) gets null value. Though I am getting this value through my script
JSON:
Password: "test"
UserName: "test"
Source:
{"UserName":"test","Password":"test"}
And though I append [FromBody], the controller (AuthenticateUser) still gets null value.
Here is my code:
Service.js
app.service("myAppService", function ($http) {
this.UserLogin = function (User) {
var response = $http({
method: "post",
url: "../Administrator/AuthenticateUser",
data: JSON.stringify(User),
dataType: "json"
});
return response;
}
});
Controller.js
app.controller("MyAppController", function ($scope, MyAppService) {
$scope.LoginCheck = function () {
var User = {
UserName: $scope.usrName,
Password: $scope.usrPassword
};
var getData = MyAppService.UserLogin(User);
getData.then(function (d) {
alert(d.UserName);
});
debugger;
}
});
Index.cshtml
<div class="container">
<div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">Sign In</div>
<div style="float:right; font-size: 80%; position: relative; top:-10px">Forgot password?</div>
</div>
<div style="padding-top:30px" class="panel-body">
<div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>
<form id="loginform" class="form-horizontal" role="form">
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" ng-model="usrName" placeholder="Username">
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input type="password" class="form-control" ng-model="usrPassword" placeholder="Password">
</div>
<div style="margin-top:10px" class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<button type="button" class="btn btn-success" ng-click="LoginCheck();">Login</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
AdministratorController.cs
public class AdministratorController : Controller
{
private TestDBOnlineContext _context;
// GET: /<controller>/
public IActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult AuthenticateUser(UserAccessViewModel _users)
//public string AuthenticateUser(UserAccessViewModel userAccess)
{
//string msg = string.Empty;
//if (userAccess.UserName == null || userAccess.UserPassword == null)
// return "Please fill-out all entries";
//else
//{
var users = _context.UserAccess.Where(w => w.Username.Equals(_users.UserName) &&
w.Userpassword.Equals(_users.UserPassword));
// if (users != null)
// return "Thanks for logging.";
// else
// return "Invalid username or password.";
//}
return Json(users);
}
}
Hope that you can help me on this. I stuck for many days already. Thanks in advance.
I am using the trumbowyg editor control in my vuejs spa. From the documentation I know that I can use the following code to set the contents of the editor.
$('#editor').trumbowyg('html','<p>Your content here</p>');
$('#editor').trigger('tbwchange');
However, it is not working for me in my VueJs App. I have an object that has a description key defined. I can console.log the description , but when I try to assign it to the editor control as mentioned above, it fails . I can see no error in the console but the text just won't show up in the editor.
Here is what I am going at the moment.
<template>
<div class="modal fade" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
<span v-if="anouncement">Edit Anouncement</span>
<span v-else>New Anouncement</span>
</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" placeholder="enter anouncement summary here" class="form-control" v-model="anouncementObj.summary">
</div>
<div class="form-group">
<input type="text" placeholder="enter location here" class="form-control" v-model="anouncementObj.location">
</div>
<textarea class="note-view__body" id="anonDescription" v-model="description" placeholder="enter event description"></textarea>
</div>
<div class="modal-footer">
<button type="button" v-on:click="clear()" class="btn btn-link" data-dismiss="modal">Close</button>
<button type="button" v-on:click="performSave()" class="btn btn-link">Save</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props : {
anouncement : Object
},
data() {
return {
anouncementObj :{}
}
},
mounted () {
this.makeTextBoxReady();
this.anouncementObj = Object.assign({},this.anouncementObj, this.anouncement || {});
$('#anonDescription').trumbowyg('html',this.anouncement.description);
$('#anonDescription').trigger('tbwchange');
console.log(this.anouncement.description);
},
methods : {
makeTextBoxReady: function() {
$(document).ready(function() {
if (!$('html').is('.ie9')) {
if ($('.note-view__body')[0]) {
$('.note-view__body').trumbowyg({
autogrow: true,
btns: [
'btnGrp-semantic', ['formatting'],
'btnGrp-justify',
'btnGrp-lists', ['removeformat']
]
});
}
}
});
},
performSave : function() {
let description = $('#anonDescription').trumbowyg('html');
let formData = new FormData();
for (name in this.anouncementObj) {
formData.append(name, this.anouncementObj[name]);
}
if( !this.anouncementObj.id) {
this.anouncementObj.id = 0;
}
formData.append('description',description);
this.$http.post('/admin/anouncement/createOrUpdate', formData).then(response => {
// console.log(response);
if(response.data.status==200) {
alert(response.data.message);
this.$emit('getAnouncements');
}
})
},
clear: function() {
this.anouncementObj= {};
}
}
}
</script>
Can you please let me know what I am doing wrong here? I have also tried the nexttick approach but even that is not working.
I got it working. I was not using the correct bootstrap modal id. Please see this related question for more information.
This is the correct code.
if(this.anouncementObj && this.anouncementObj.description && this.anouncementObj.id) {
$('#'+this.anouncementObj.id+' #anonDescription').trumbowyg('html',this.anouncementObj.description);
$('#'+this.anouncementObj.id+' #anonDescription').trigger('tbwchange');
}
I have created search code, but the values cannot display. Can anyone help me?
This my code:
<template name="search">
<form >
<input type="text" id="categories" />
<button>Search</button>
</form>
<hr/>
<h3></h3>
<ol>
{{#each profil}}
<li>{{brand}}</li>
{{/each}}
</ol>
Template.search.events({
"submit ": function (e) {
e.preventDefault();
Session.set("categories", $("#categories").val());
}
});
Template.search.helpers({
profil: function() {
return Profil.find({
categories: Session.get('categories'),
});
}
});
I'm not sure how to code in publish (server).
Try this :
Put this in search.html
<template name="search">
<form id="searchForm">
<input type="text" id="categories" />
<button>Search</button>
</form>
<hr/>
<ol>
{{#each profil}}
<li>{{brand}}</li>
{{/each}}
</ol>
</template>
This in search.js :
Template.search.events({
"submit #searchForm": function (e) {
e.preventDefault();
Session.set("categories", e.target.text.value);
}
});
Template.search.helpers({
profil: function() {
return Profil.find({
categories: Session.get('categories'),
});
}
});
And make sure that "autopublish" package is added. This would do the trick!
Here is my template:
<template name="list">
<div class="col-md-12">
{{#if jobsLoaded}}
<ul class="list-group" id="jobs">
{{#each jobs}}
<li>
<span class="pull-right">{{address}}</span>
<span id="jobTitle">{{{ jobUrl url title }}}</span>
<span id="company">{{company}}</span>
<span id="date"><em>{{dateacquired}}</em></span>
</li>
{{/each}}
</ul>
{{else}}
{{> spinner}}
{{/if}}
</div>
{{#if jobsLoaded}}
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-2">
{{#if jobs}}
<select id="perPage" class="selectpicker select-block" _val="{{selected_opt}}">
<option value="10">10 Per Page</option>
<option value="25">25 Per Page</option>
<option value="50">50 Per Page</option>
<option value="100">100 Per Page</option>
</select>
{{/if}}
</div>
<div class="col-md-10">
{{{pagination}}}
</div>
</div>
</div>
{{/if}}
</div>
</template>
Client Side JS:
Deps.autorun(function(){
Meteor.subscribe('cities');
Meteor.subscribe('jobs', Session.get('currentIndustryOnet'), function(){
Session.set('jobsLoaded', true);
});
});
Template.list.jobsLoaded = function () {
return Session.equals('jobsLoaded', true);
};
Template.list.rendered = function(){
var select = $('#perPage');
var option = select.attr('_val');
$('option[value="' + option + '"]').attr("selected", "selected");
select.selectpicker({
style: 'btn-info col-md-4',
menuStyle: 'dropdown-inverse'
});
}
Template.list.jobs = function() {
Deps.autorun(function(){
var jobs = Jobs.find();
if(Session.get('currentIndustryOnet')) {
jobs = Jobs.find({onet: Session.get('currentIndustryOnet')});
}
Session.get('jobCount', jobs.count());
return Pagination.collection(jobs.fetch());
});
}
Server Side JS:
Meteor.publish('jobs', function(onet_code){
var cursor, options = {sort: {dateacquired: -1}};
console.log(onet_code);
if(onet_code){
cursor = Jobs.find({onet: onet_code}, options);
} else {
cursor = Jobs.find({}, options);
}
return cursor;
});
Meteor.publish('cities', function(){
return Cities.find({}, {sort: {pop: -1}, limit: 100});
});
For some reason when you load the page, the pagination appears, but the {{#each jobs}} isn't populated with the collection results.
Update:
Template.list.jobs = function() {
var options = {}, jobs;
if(Session.get('currentMapArea')) {
var c = Cities.findOne({_id: Session.get('currentMapArea')});
options.address = c.city.capitalize() + ", " + c.state;
}
if(Session.get('currentIndustryOnet')) {
options.onet = Session.get('currentIndustryOnet');
}
if($.isEmptyObject(options)) {
jobs = Jobs.find();
} else {
jobs = Jobs.find(options);
}
Session.set('jobCount', jobs.count());
return Pagination.collection(jobs.fetch());
}
Update 3:
Pagination:
Template.list.pagination = function() {
return Pagination.links('/jobs', Session.get('jobCount') || 1, {currentPage: Session.get('page') || 1, perPage: Session.get('perPage') || 10});
}
<template name="list">
<div class="col-md-12">
{{#if jobsReady}}
<ul class="list-group" id="jobs">
{{#each jobs}}
<li>
<span class="pull-right">{{address}}</span>
<span id="jobTitle">{{{ jobUrl url title }}}</span>
<span id="company">{{company}}</span>
<span id="date"><em>{{dateacquired}}</em></span>
</li>
{{/each}}
</ul>
{{else}}
{{> spinner}}
{{/if}}
</div>
{{#if jobsReady}}
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-2">
<select id="perPage" class="selectpicker select-block" _val="{{selected_opt}}">
<option value="10">10 Per Page</option>
<option value="25">25 Per Page</option>
<option value="50">50 Per Page</option>
<option value="100">100 Per Page</option>
</select>
</div>
<div class="col-md-10">
{{{pagination}}}
</div>
</div>
</div>
{{/if}}
</div>
</template>
I believe the problem is with this code -- it doesn't return anything:
Template.list.jobs = function() {
Deps.autorun(function(){
var jobs = Jobs.find();
if(Session.get('currentIndustryOnet')) {
jobs = Jobs.find({onet: Session.get('currentIndustryOnet')});
}
Session.get('jobCount', jobs.count());
return Pagination.collection(jobs.fetch());
});
}
Think about what the return does. It return from the function in the Deps.autorun. The outer function returns nothing.
I think you can simply lose the Deps.autorun and do this, which should still be reactive:
Template.list.jobs = function() {
var jobs = Jobs.find();
if(Session.get('currentIndustryOnet')) {
jobs = Jobs.find({onet: Session.get('currentIndustryOnet')});
}
Session.get('jobCount', jobs.count()); // should this be a 'Session.set'?
return Pagination.collection(jobs.fetch());
}
Also note the question in the comment.