Need to get in tile.js account info that available in tile.html
Got 4 different components: selector, list(nesting selector), details(nesting selector), tile(nesting list). From apex controller passing query of accounts to list, and then 1 account with parameters to each tile. Need to get click from tile and pass clicked account info to detail component.
Passing this.account.id in CustomEvent gives nothing or error. So how can i get any account data in js that i got in html(for example i got name {account.name} in html, but i cant get name like this.account.name in js), and be a pass it to parent component? Thanks in advance.
tile.html
<template>
<a onclick={tileClick}>
<img src={account.image__c} width="200" height="200" >
Account Name: {account.Name}
Account Owner: {account.OwnerId}
Account Budget: {account.Budget__c}
Account Employees Number: {account.NumberOfEmployees}
Account Type : {account.type}
</a>
</template>
tile.js
import { LightningElement, api, track } from 'lwc';
export default class Tile extends LightningElement {
#api account;
tileClick() {
const event = new CustomEvent('tileclick', {
detail: this.account.id
});
this.dispatchEvent(event);
}
}
Related
I'm trying to understand if I can achieve with vue.js the same handy process I use to follow with vanilla/jquery to collect simultaneously all (or only some of) the form fields I need.
When dealing with forms usually I never submit them the old school way, instead, I add a class my-update to the form fields I want to send and then I loop them this way:
let objectToUpdate = {};
$(".my-update").each(function(index, element) {
objectToUpdate[$(this).data("db-field")] = $(this).val();
});
Then I just pass the object to an Ajax POST call and send it to the backend API.
With Vue, it's way simple to get data since we have the property (usually called data) already available within the Vue instance but the problem is if I just send the this.$data it will catch not only the properties (all of them without choice) but also all methods included in the object (getter/setter, ...).
Do you have any best practice or suggestions to share to achieve the same I usually do with a couple of lines of jquery but in Vue?
Usually in Vue form controls are binded to data via v-model. Let's say my Vue instance/component is like:
new Vue({
data: {
user: {
name: '',
surname: '',
phone: '',
}
},
methods: {
send() {
// send this.user through http
}
}
});
And my template is like:
<form #submit="send">
<input name="username" v-model="user.name" />
<input name="surname" v-model="user.surname" />
<input name="phone" v-model="user.phone" />
<button> send </button>
</form>
In such scenario, you have all the user information in your component/instance via this.user. You don't need to send this.$data at all if you create an object to manage your form fields (like this.user in this example).
I'm creating a quiz making/sharing website using angular2 but am not sure how to share the quizzes. i was thinking of using each of my quizzes identifiers as URLs. The quizzes are made using forms and are saved on a docmentdb as JSON. they have unique ID's to identify them. Any ideas as to how i could do this?
Those URLs must be dynamically created, as new quizzes can be submitted and thereafter accessed.
You can use the same base url for your page with quiz, but differentiate quizzes by path parameter like:
quizsite.com/#/quiz/12 (12 being quiz id)
Inside your component you can read what path parameters are located in your url and their values by accessing ActivateRoute object:
Component
import { Component } from '#angular/core';
import { ActivatedRoute } from '#angular/router';
#Component({
templateUrl: 'quizComponent.html',
})
export class QuizComponent {
constructor(private activatedRoute: ActivatedRoute){}
ngOnInit() {
// Reason for this being a observable is that you can watch
parameter changing (manually in url, or programmatically)
and without any page refresh, read new parameter and change you quiz
this.activatedRoute.params.subscribe(params => {
console.log(params.quizId);
// With this parameter you can make call to your REST API and return
data for that quiz
});
}
}
I am using Ember.Js to create a web application, I have User collection in my MongoDb, in User collection there is a Role attribute which can take two values, "admin" or "customer".
What I want to do is the following :
When someone logs in, he is going to be redirected either to the admin dashboard or customer interface, depending on his Role.
How can I achieve this ? what is the best practice ?
It is a good idea or I should better create a collection for admin and another for customer ?
I would personally make use of the Application route's afterModel hook.
export default Ember.Route.extend({
model: function(){
//I DK if you use Ember Data. I don't but this could be a store lookup.
return this.userService.getCurrentUser()
},
afterModel: function(resolvedModel, transition){
var user = resolvedModel;
if(user.role === 'ADMIN'){
this.transitionTo('admin-dashboard');
}else{
this.transitionTo('customer-interface');
}
}
});
You could then have different menu structures that only link-to admin and customer routes respectively or both. I'd also have a mixin that all of my other Admin only routes extend:
import Ember from 'ember';
export default Ember.Mixin.create({
beforeModel: function(){
var currentUser = this.modelFor('application');
if(currentUser.role !== 'ADMIN'){
//handle this howerver
this.transitionTo('unauthorized');
}
}
});
So your admin-dashboard route would look like:
import Ember from 'ember';
import AdminRoute from 'app_name/mixins/admin-route';
export default Ember.Route.extend(AdminRoute, {});
I am writing a Grails app where I would like to setup a form that allows a user to type in an image ID number and this value will be passed to a controller / action that retrieves the image from S3 for the given image ID.
The desired url would be of the format example.com/results/1234. I have setup the following URL mappings:
class UrlMappings {
static mappings = {
"/$controller/$action?/$id?"{
constraints {
// apply constraints here
}
}
"/results/$id?" {
controller = "s3Image"
action = "getS3Image"
}
"/"(view:"/index")
"500"(view:'/error')
}
}
The following is how I have setup a form:
<g:form controller="results" method="get">
<input type="text" name="id" class="input-xxlarge" placeholder="http://www.example.com">
<button class="btn btn-inverse">Submit</button>
</g:form>
However this seems to submit the form to example.com/results?id=12345.
How would I alter my form or mappings such that I can produce the desired url after form submission?
Thanks!
<g:form controller="results" method="get">
will generate an HTML form whose action URL is /results (the reverse URL mapping for a controller named "results" with no action or id). When this form is submitted, the browser will add ?id=1234 to the end of this URL because the form method is GET. This is not something you can influence in your URL mappings on the server side.
Instead, you should have your form POST to a different controller action that redirects to the getS3Image action. The redirect will have access to the ID on the server side, so can generate the friendly-looking URL for the redirect.
UrlMappings:
"/results/$id?" {
controller = "s3Image"
action = "getS3Image"
}
"/findImage" {
controller = "s3Image"
action = "find"
}
S3ImageController:
def find() {
redirect(action:"getS3Image", id:params.id)
}
def getS3Image() {
// as before
}
GSP:
<g:form controller="s3Image" action="find" method="post">
<input type="text" name="id" class="input-xxlarge" placeholder="http://www.example.com">
<button class="btn btn-inverse">Submit</button>
</g:form>
Derek,
what you are seeing is correct behaviour. For the GET request you have two things
URL of request
Parameters
Parameters are appended after urls using urlencode and separated by &, so, when you have form with URL http://mydomain.com/controller/action/, and in this form you have two fields: id, name, then, upon submission, they will be passed like this: http://mydomain.com/controller/action/?id=3&name=someName
URLMappings are mapping only URL part of it. So, in your example UrlMapping are matched only to /results/ and id is not passed.
But that is ok, since you can still access the id parameter in your controller, just do it like this (inside s3Image controller):
def getS3Image() {
def id = params.id
}
Try very simple change in UrlMapping:
"/results/$id?" {
controller = "s3Image"
action = "getS3Image"
id = $id
}
and then for sure you have the id accessible in the s3Image controller via:
def id = params.id
I think you have two problems here. First, UrlMappings rules are matched in order of appearance, from top to bottom. First rule that grails matches is "/$controller/$action?/$id?". Move your rule "/results/$id?" above and it should take precedence. - check comment below post.
Your second mistake is declaration of form. I think you've meant:
<g:form controller="s3Image" method="getS3Image">
Ok guys i have a question, if this is my Form , and is generated for every item in the DB, i want to send the item with the quantity specified.
to send the quantity , from this razor view
#using (Html.BeginForm("AddToCart", "Prices"))
{
string qtname = "qt" + #item.id;
<div>
<input id="#qtname" name="#qtname" class="quantity" type="text" value="0" readonly="readonly" />
</div>
<input type="submit" value="Adauga" class="addToCart" />`
}
i need just these?
[HttpPost]
public ActionResult AddToCart(ProductsModel Products, string qtname)
{ }
and do i need some html.hidden for passing along the item.id too?
In the form you are sending only the qtname parameter as input field, whereas your controller action also expects a ProductsModel parameter which is never sent. If you want to bind it you will have to create input fields for all properties of this view model.
But in your case a better solution would be to simply include the id of the product as hidden field and then fetch the corresponding product from your datastore given this id:
[HttpPost]
public ActionResult AddToCart(string id, string qtname)
{
ProductsModel products = _repository.GetProduct(id);
...
}