Develop Reference

form does not return values

as soon as I send the form, it does not return the values I want. i'm using ajax to receive the data.
<form action="registro-de-dominios.php" method="POST" id="ajax-form" class="form-inline">
<label class="sr-only" for="inlineFormInputName2">WWW</label>
<input type="text" class="p-3 form-control form-control-lg mb-2 mr-sm-2 input-ro www" id="inlineFormInputName2" name="www" value="www" placeholder="www." readonly>
<label class="sr-only" for="inlineFormInputGroupUsername2">Domínio</label>
<div class="input-group justify-content-center mb-2 mr-sm-2">
<input type="text" name="dominio" id="dominio" class="input-dom form-control form-control-lg" placeholder="Digite o domínio desejado">
</div>
<div class="form-check mb-2 mr-sm-2 select-padding">
<select name="point" id="point" class="form-control form-control-lg">
<option value=".com">.com</option>
<option value=".com.br">.com.br</option>
<option value=".net">.net</option>
</select>
</div>
<button type="submit" id="salvar-form" class="btn btn-dominio btn-outline-danger" name="enviar" value="Enviar" data-toggle="modal" data-target="#ExemploModalCentralizado">
<i class="fas fa-search"></i>
</button>
</form>
AJAX:
<script>
$(document).ready(function() {
const www = $('.www').val();
const dominio = $('#dominio').val();
const com = $('#point').val();
$("#salvar-form").click(function(e) {
e.preventDefault();
$.ajax({
method: "POST",
url: "registro-de-dominios.php",
dataType: "json",
data: {
www: www,
dominio: dominio,
com: com
},
beforeSend: function() {
alert("ENVIANDO...");
},
success: function(data) {
alert('ok');
},
error: function() {
alert('tente novamente');
}
})
});
});
</script>
this is what returns:
does not return anything in the "dominio" field and returns the ".com" option, even if I choose another option

You are assigning the www, dominio, and com consts outside the button click event handler. So they are only set once, while the document is loading, not when the button is clicked. So you are getting the default values in AJAX call. They should be assigned inside the click handler, like this:
$(document).ready(function() {
$("#salvar-form").click(function(e) {
const www = $('.www').val();
const dominio = $('#dominio').val();
const com = $('#point').val();
...
});
});

Where/How to define a submit destination for my self created form (Vue) component?

I want to re-use a form component through my website, but the submit button will have to handle different things every time (display different data, depending which page is calling the form-component)
I'm a little bit new to paying around with Vue components and passing data between them, up until now I did messy one-page apps.
My current plan is have the form get the inputs/filters (from the form component), and when clicking submit, it should send this data (somehow?) to the element that called it - and will know how to handle it to the specific case from where it was called. I hope this is the right approach to this kind of scenario (?).
Is my plan a proper use of Vue / a proper way to submit a form from an external form-component?
In what way do I trigger the submit to send data / run a method outside of my DashboardForm.vue component?
How do I send fetched data of DashboardForm.vue component from ReportType1.vue and re-use this functionality in ReportType2.vue.
This is my Vue Form component (DashboardForm.vue):
<template>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<form id="mainForm" class="form-material row" method="POST">
<div class="" id="date-range">
<datepicker v-model="startDate" input-class="form-control inputDate" placeholder="Start Date" required></datepicker>
<div class="input-group-append">
<span class="input-group-text b-0 text-white"> to </span>
</div>
<datepicker v-model="endDate" input-class="form-control inputDate" placeholder="End Date" required></datepicker>
<input type="button" class="btn btn-info waves-effect waves-light" v-on:click="groupFilterDisplay(true);" value="Filter by Group"/>
<!-- <input type="button" id="submit-btn" class="btn btn-success waves-effect waves-light" v-on:click="loadNew" value="Submit"/> -->
<input type="button" id="submit-btn" class="btn btn-success waves-effect waves-light" value="Submit"/>
</div>
</form>
</div>
</div>
</div>
<transition name="fade">
<div id="groupFilter" class="popupGroupFilter" v-if="groupFilter">
<div id="filterArea">
<input type="text" v-model="searchGroupInput" placeholder="Search" class="gfSearch">
<span class="gfTitle">Filter by Group</span>
<hr>
</div>
<div class="ulTree">
<ul>
<tree_item class="item" v-bind:model="groupTree"></tree_item>
</ul>
</div>
<div v-on:click="applyGroupFilter();" class="gfClose gfApply"><span>✔ Apply</span></div>
<div v-on:click="groupFilterDisplay(false);" class="gfClose"><span>X Close</span></div>
</div>
</transition>
</div>
</template>
<script>
// import { GF } from '../mixins/GF.js';
export default {
name: 'DashboardForm',
// mixins: [GF],
data() {
return {
groupTree: window.groups,
searchGroupInput: '',
searchGroupArray: [],
groupFilterApplied: false,
groupFilterBackup: [],
selectedIds: [],
groupFilter: false,
startDate: null,
endDate: null,
mode: 0,
}
},
props: {
options: Array
},
watch: {
'searchGroupInput': function (newVal, oldVal) {
this.groupTree = this.searchGroupResult();
}
},
methods: {
recurseGroups: function (arr, action) {
},
applyGroupFilter: function () {
},
groupFilterDisplay: function (display) {
},
searchGroupResult: function () {
},
fetchGroupIds: function () {
}
}
};
</script>
This is the component that uses the DashboardForm for example (
ReportType1.vue):
<script>
import DashboardForm from "../tools/DashboardForm.vue";
export default {
components: {
DashboardForm
},
data() {
return {
};
},
created() {
},
mounted() {
},
destroyed() {
},
watch: {
},
methods: {
}
}
</script>
<!-- Template -->
<template>
<div>
<!-- Form -->
<DashboardForm/>
<!-- form result -->
<div id="resultContainer"> <datatable/> </div>
</div>
</template>

Okay if I understood you well, we are trying to build a reusable form component.
I will give you a quick overview of how VUE components communicate.
The component takes its necessary inputs using the props.
The component inner HTML can be passed from its user by using slot.
The component fire events to tell its user that there is something happened inside me.
Example of the three cases:
Your component my-form template:
<form>
<div class="row">
<slot></slot>
</div>
<div class="row">
<div class="col-12">
<button type="button" class="btn btn-default" #click="onSubmit"></button>
<button v-if="hasReset" class="btn btn-danger" #click="onReset"></button>
</div>
</div>
</form>
Your component js file:
export default {
name: 'my-form',
data() {
return {
}
},
props: {
reset: boolean
},
computed: {
hasReset: function(){
return this.reset;
}
}
methods: {
onSubmit: function(){
let data = { "name": "dummy data" };
this.$emit("submit", data);
},
onReset: function(){
let data = { "name": "" };
this.$emit("reset", data);
}
}
}
After that, you can use my-form component as below:
<my-form :reset="formHasReset" #submit="onFormSubmit" #reset="onFormReset">
<input class="col-12" type="text" name="name">
<input class="col-12" type="text" name="username">
<input class="col-12" type="password" name="password">
<input class="col-12" type="email" name="email">
</my-form>
And the javascript is:
data(){
formHasReset: true
},
methods: {
onFormSubmit: function(data){
console.log(data.name); //Should give you 'dummy data'
},
onFormReset: function(data){
console.log(data.name); //Should give you ''
}
}
I hope it is clear now for you :).

Vue.js - Transfer objects between two selects

I have the following HTML with 2 selects and 2 buttons to transfer options between the selects:
<div class="col-xs-1" style="width:45%">
<label for="txtDescricao">Motivos</label>
<select multiple="multiple" class="form-control" id="todosMotivos" v-model="Motivos_selected" style="width: 100%;">
<option v-for="motivo in Motivos" v-bind:value="motivo.Codigo">{{motivo.Descricao}}</option>
</select>
</div>
<div class="col-xs-1 text-center align-middle" style="width:10%">
<br />
<p><button type="button" class="btn btn-default btn-sm fa fa-arrow-right" v-on:click.prevent="adicionarItensSelect"></button></p>
<p><button type="button" class="btn btn-default btn-sm fa fa-arrow-left" v-on:click.prevent="removerItensSelect"></button></p>
</div>
<div class="col-xs-1" style="width:45%">
<label for="txtDescricao">Motivos vinculados</label>
<select multiple="multiple" class="form-control" id="selectedMotivos" v-model="Motivos_vinculados_selected" style="width: 100%;">
<option v-for="motivo in Motivos_vinculados" v-bind:value="motivo.Codigo">{{motivo.Descricao}}</option>
</select>
</div>
Here is the vue app data:
Motivos: [],
Motivos_selected: [],
Motivos_vinculados: [],
Motivos_vinculados_selected: [],
The list of "Motivos" is being loaded this way:
getMotivos: function (motivosVinculados) {
var self = this;
$.ajax({
type: "POST",
url: "../Motivo/GetMotivos",
success: function (data) {
self.Motivos = data.motivos;
},
error: function (error) {
console.log(error);
alert('Erro ao executar operação.');
}
});
},
I am trying to transfer the selected options to the second Select this way:
adicionarItensSelect: function () {
var self = this;
self.Motivos_vinculados.push(self.Motivos_selected);
},
But, instead, the option goes blank to the second Select:
I think the item is not going to the second Select as the same object. What can I do to solve this?

You need to bind the object to the options like so:
<option v-for="motivo in Motivos" v-bind:value="motivo>{{motivo.Descricao}}</option>
var appEquipamento = new Vue({
el: "#equipamentoApp",
data: {
Motivos: [
{ Codigo: 1, Descricao: "Motivo 1" },
{ Codigo: 2, Descricao: "Motivo 2" },
{ Codigo: 3, Descricao: "Motivo 3" }
],
Motivos_selected: [],
Motivos_vinculados: [],
Motivos_vinculados_selected: []
},
methods: {
adicionarItensSelect: function () {
var self = this;
self.Motivos_vinculados = self.Motivos_vinculados.concat(self.Motivos_selected);
}
}
});
<script src="https://unpkg.com/vue"></script>
<section id="equipamentoApp" class="content">
<div class="col-xs-1" style="width:45%">
<label for="txtDescricao">Motivos</label>
<select multiple="multiple" class="form-control" id="todosMotivos" v-model="Motivos_selected" style="width: 100%;">
<option v-for="motivo in Motivos" v-bind:value="motivo">{{motivo.Descricao}}</option>
</select>
</div>
<div class="col-xs-1 text-center align-middle" style="width:10%">
<br />
<p><button type="button" class="btn btn-default btn-sm fa fa-arrow-right" v-on:click.prevent="adicionarItensSelect"> -> </button></p>
<p><button type="button" class="btn btn-default btn-sm fa fa-arrow-left" v-on:click.prevent="removerItensSelect"> <- </button></p>
</div>
<div class="col-xs-1" style="width:45%">
<label for="txtDescricao">Motivos vinculados</label>
<select multiple="multiple" class="form-control" id="selectedMotivos" v-model="Motivos_vinculados_selected" style="width: 100%;">
<option v-for="motivo in Motivos_vinculados" v-bind:value="motivo.Codigo">{{motivo.Descricao}}</option>
</select>
</div>
</section>
hope it helps :)

I think you are pushing an entire array (Motivos_selected) into the Motivos_vinculados array. This would result in a nested array.
you should probably use:
self.Motivos_vinculados.concat(self.Motivos_selected);
if you want to join the two arrays, override the entire array:
self.Motivos_vinculados = self.Motivos_selected;
or loop through the first array and push the items to the second:
self.Motivos_vinculados.map(item => { self.Motivos_selected.push(item) });
EDIT---------
After looking at the fiddle, my solution was as followed:
adicionarItensSelect: function () {
var self = this;
self.Motivos_vinculados = this.Motivos.filter(motivo => {
return self.Motivos_selected.indexOf(motivo.Codigo) !== -1;
});
}
Hope this helps!

Form in ajax post method sends empty object

I have a webform with several fields I want to capture in an object and send it to a controller method. The form has this code:
<div class="panel-footer">
#using (Html.BeginForm("NuevaOpcion", "Home", FormMethod.Post, new { #id = "frm_nueva_opcion" })) {
#Html.HiddenFor(m => m.Id)
<div class="row">
<div class="col-md-6">
<div class="form-group" style="margin-bottom: .7em;margin-top: .7em;">
<button class="btn btn-success btn-xs" type="button" onclick=" $('#row-nueva-opcion').toggle()" id="add-opcion">
<span class="glyphicon glyphicon-plus-sign"></span> Añadir nueva opción
</button>
</div>
</div>
</div>
<div class="row" id="row-nueva-opcion" style="display:none">
<div class="col-md-10">
<label>
<input type="checkbox" id="opcion-extra" onclick=" $('#nuevo-precio').attr('disabled', !this.checked);" />
Es opción extra
</label>
<div class="input-group" style="margin-bottom:1.7em;">
<input type="text" placeholder="Opción" class="form-control" name="nombre" style="max-width:70%;">
<input type="number" placeholder="Cantidad" min="1" value="1" class="form-control" name="cantidad" style="max-width:15%;">
<input type="number" placeholder="Precio" class="form-control" id="nuevo-precio" name="precio" style="max-width:15%;" disabled>
<input type="hidden" name="idrespuesta" id="idrespuesta" value="#listItems.Select(x=>x.Value).FirstOrDefault()" />
<div class="input-group-addon">€</div>
<span class="input-group-btn">
<a class="btn btn-primary" data-title="Confirmación de acción" data-toggle="modal" data-target="#modal_confirm" onclick="confirmar('frm_nueva_opcion')">
<span class="glyphicon glyphicon-floppy-disk"></span> Guardar
</a>
</span>
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<label>
¿Para que pregunta es la opción?
#Html.DropDownList("OptionSelectedItem", listItems, new { #class = "form-control" })
</label>
</div>
</div>
</div>
}
</div>
To manage it, I have a script that looks like this:
function mostrarModal(idmodal, mensaje, tipo) {
$(idmodal + ' .modal-body h4').addClass(tipo == 'error' ? 'text-danger' : 'text-secondary').html(mensaje);
$(idmodal).modal('show');
}
function enviar(form) {
debugger;
var NuevoPrecio = $('#' + form).attr("nuevo-precio");
if( (NuevoPrecio == null) || (typeof NuevoPrecio === "undefined") ) { var NuevoPrecio = 0; }
var datos = {
Id: $('#' + form).attr("#Id"),
IdPresupuestador: $('#' + form).attr("#idPresupuestador"),
IdRespuesta: $('#' + form).attr("#idrespuesta"),
Cantidad: $('#' + form).attr("#cantidad"),
Nombre: $('#' + form).attr("#nombre"),
Precio: NuevoPrecio,
}
$.post("NuevaOpcion", {
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(datos),
});
}
var modalConfirm = function (callback) {
$("#modal-btn-si").on("click", function () {
callback(true);
$("#modal-confirm").modal('hide');
});
$("#modal-btn-no").on("click", function () {
callback(false);
$("#modal-confirm").modal('hide');
}); };
function confirmar(form, text) {
$("#modal-confirm").modal('show');
modalConfirm(function (confirm) {
if (confirm) {
enviar(form);
}
}); };
Trouble is, I've changed the script on several points and now looks like this because the best I could manage was taking all the form in a single object. I can't work with the properties contained in that object, not on the script and neither on the controller method.
So, the question is, how am I selecting the fields wrong? I've tried with "#", ".", just the name between quotes, and as I said, the best I could get was the entire form in a single object. Thanks in advance.

ui-grid: problems to access $scope

I have a problem with my ui-grid setup.
There is one ui-grid with an expandable row template loading a html file containing another ui-grid.
In this "subgrid" there is another expandable row template with another html-file containing 3 divs and a third ui-grid.
It works fine and shows all data needed.
In the most inner (is that a word?) expandable row (that with the 3 divs and the third grid) I want to use some functions to show and hide data with ng-show and some crud actions to edit the content of the third ("subsubgrid") ui-grid.
Since functions in the scope are not directly accessible I added an appScopeProvider and put the function in the subGridScope.
Now the function is accessed (I checked it with an alert).
In the function I set some boolean variables (e.g. $scope.showcreate = true), the divs contain ng-show directives (ng-show="showcreate") to hide or show the content of the div.
I debugged the function in the subGridScope and it sets the right values in $scope.showxyz, but the div is not hidden when set to false.
Do I need to re-render the page to "see" the change?
Do I need to change the ng-show directive?
Is there any good tutorial explaining this problem?
How would I access the "CRUD" actions? Would grid.appScope.function work even if the scope is kinda "stacked"?
If you need any more information, just ask, I will provide you with all information needed.
Here is the code:
app.js:
var alarmwesen = angular.module('alarmwesen', ['ui.grid', 'ui.grid.expandable']);
alarmwesen.controller('AlarmwesenCtrl', [
'$scope', '$http', '$log', '$templateCache', 'i18nService', '$interval', 'uiGridConstants', function ($scope, $http, $log, $templateCache, i18NService, $interval, uiGridConstants) {
$http.get('/api/action1)
.success(function (data) {
$scope.Beauftragter = data;
});
$scope.gridOptions = {
enableScrollbars : false,
expandableRowTemplate: 'expandableRowTemplate.html',
expandableRowHeight: 1400,
rowHeight: 36,
expandableRowScope: { subGridVariable: 'subGridScopeVariable' },
enableFiltering: true,
treeRowHeaderAlwaysVisible: false,
columnDefs: [
{ name: 'Trigraph',field:'ZeigeTrigraphen', width: '10%' },
{ name: 'Titel', field: 'Titel' },
],
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
gridApi.expandable.on.rowExpandedStateChanged($scope, function(row) {
if (row.isExpanded) {
row.entity.subGridOptions = {
appScopeProvider: $scope.subGridScope,
enableScrollbars: false,
expandableRowTemplate: 'expandableRowTemplate2.html',
expandableRowHeight: 700,
enableFiltering: false,
expandableRowScope: { subGridVariable: 'subsubGridScopeVariable' },
columnDefs: [
{ name: 'LfdAngabe', field:'LfdAngabe', width: '10%' },
{ name: 'Text', field: 'Text' }],
onRegisterApi:function(gridapi) {
this.subgridApi = gridapi;
gridapi.expandable.on.rowExpandedStateChanged($scope, function(row) {
if (row.isExpanded) {
row.entity.subsubGridOptions = {
appScopeProvider: $scope.subGridScope,
columnDefs: [
{ name: 'Durchführungsverantwortliche',width:'25%' }, { name: 'Auftrag' },
{ name: 'Aktionen', field: 'EinzelauftragId', width: '10%', cellTemplate: '<a id="Details" ng-click = "grid.appScope.BearbeiteAuftrag(row.entity.EinzelauftragId)" class="btn btn-success" )"><i class="glyphicon glyphicon-edit"</a><a id="Details" ng-click = "grid.appScope.LoescheAuftrag(row.entity.AuftragId)" class="btn btn-danger" )"><i class="glyphicon glyphicon-remove"</a>' }
]
};
$http.get('/api/action2')
.success(function(data) {
row.entity.subsubGridOptions.data = data;
});
}
});
}
};
$http.get('/api/action3?trigraph=' + row.entity.ZeigeTrigraphen)
.success(function(data) {
row.entity.subGridOptions.data = data;
});
}
});
}
};
$scope.subGridScope = {
NeuerAuftrag: function () {
$scope.showcreate = true;
$scope.showedit = false;
$scope.showdelete = false;
alert("Geht doch!");
}
};
$http.get('/api/AlarmwesenWebAPI/HoleAlle').then(function (resp) {
$scope.gridOptions.data = resp.data;
$log.info(resp);
});
}]);
html-files
<button class="btn btn-success" ng-click="grid.appScope.NeuerAuftrag()"><i class="glyphicon glyphicon-plus"></i> &#160 Neuen Auftrag erstellen</button>
<div class="well" ng-show="showcreate">
<div class="well-header">Einzelauftrag erstellen</div>
<form role="form" ng-submit="ErstelleEinzelauftrag()" ng-model="Einzelauftrag" name="einzelauftragcreate" id="einzelauftragcreate">
<fieldset>
<input type="text" id="createEinzelauftragsId" class="" ng-model="Einzelauftrag.EinzelauftragsId" />
<input type="text" id="createAlarmkalenderId" class="" ng-model="Einzelauftrag.AlarmkalenderId" />
<input type="text" id="createAlarmmassnahmeTrigraph" class="" ng-model="Einzelauftrag.AlarmmassnahmeTrigraph" />
<input type="text" id="createEinzelmassnahmeLfdAngabe" class="" ng-model="Einzelauftrag.EinzelmassnahmeLfdAngabe" />
<div class="form-group">
<label for="createBeauftragterId">Durchführungsverantwortlicher:</label>
<select name="editBeauftragterId" id="createBeauftragterId"
ng-options="Beauftragter.Bezeichnung for Beauftragter in $scope.Beauftragter track by $scope.Beauftragter.BeauftragterId"
ng-model="$scope.Beauftragter.BeauftragterId"></select>
</div>
<div class="form-group">
<label for="createAuftragstext">Auftrag:</label>
<textarea class="form-control" rows="10" id="createAuftragstext" ng-model="Einzelauftrag.Auftragstext"> </textarea>
</div>
<button type="submit" class="btn btn-default">Auftrag erstellen</button>
</fieldset>
</form>
</div>
<div class="well" ng-show="showedit">
<div class="well-header">Einzelauftrag ändern</div>
<form role="form" ng-submit="BearbeiteEinzelauftrag()" ng-model="Einzelauftrag" name="einzelauftragedit" id="einzelauftragedit">
<fieldset>
<input type="text" id="editEinzelauftragsId" class="" ng-model="Einzelauftrag.EinzelauftragsId" />
<input type="text" id="editAlarmkalenderId" class="" ng-model="Einzelauftrag.AlarmkalenderId" />
<input type="text" id="editAlarmmassnahmeTrigraph" class="" ng-model="Einzelauftrag.AlarmmassnahmeTrigraph" />
<input type="text" id="editEinzelmassnahmeLfdAngabe" class="" ng-model="Einzelauftrag.EinzelmassnahmeLfdAngabe" />
<div class="form-group">
<label for="editBeauftragterId">Durchführungsverantwortlicher:</label>
<select name="editBeauftragterId" id="editBeauftragterId"
ng-options="beauftragter.Bezeichnung for beauftragter in data.Beauftragter track by Beauftragter.BeauftragterId"
ng-model="data.beauftragter.BeauftragterId"></select>
</div>
<div class="form-group">
<label for="editAuftragstext">Auftrag:</label>
<textarea class="form-control" rows="10" id="editAuftragstext" ng-model="Einzelauftrag.Auftragstext"> </textarea>
</div>
<button type="submit" class="btn btn-default">Änderung speichern</button>
</fieldset>
</form>
</div>
<div class="well" ng-show="showdelete">
<div class="well-header">Einzelauftrag löschen</div>
<form role="form" ng-submit="LoescheEinzelauftrag()" ng-model="Einzelauftrag" name="einzelauftragdelete" id="einzelauftragdelete">
<fieldset>
<input type="text" id="deleteEinzelauftragsId" class="" ng-model="Einzelauftrag.EinzelauftragsId" />
<input type="text" id="deleteAlarmkalenderId" class="" ng-model="Einzelauftrag.AlarmkalenderId" />
<input type="text" id="deleteAlarmmassnahmeTrigraph" class="" ng-model="Einzelauftrag.AlarmmassnahmeTrigraph" />
<input type="text" id="deleteEinzelmassnahmeLfdAngabe" class="" ng-model="Einzelauftrag.EinzelmassnahmeLfdAngabe" />
<div class="form-group">
<label for="deleteBeauftragterId">Durchführungsverantwortlicher:</label>
<input type="text" class="form-control" id="deleteBeauftragterId" ng-model="Einzelauftrag.BeauftragterId">
</div>
<div class="form-group">
<label for="deleteAuftragstext">Auftrag:</label>
<textarea class="form-control" rows="10" id="deleteAuftragstext" ng-model="Einzelauftrag.Auftragstext"> </textarea>
</div>
<button type="submit" class="btn btn-default">Auftrag löschen</button>
</fieldset>
</form>
</div>
<div ui-grid="row.entity.subsubGridOptions" style="height: 700px;"></div>

I believe you want to execute the method 'BearbeiteAuftrag' from 3rd Grid while clicking the hyperlink on second column. For that you can try the following changes.
On the 3rd Grid definition (row.entity.subsubGridOptions=), replace the line "appScopeProvider: $scope.subGridScope," with "appScopeProvider: $scope,"
Add the following function just after the "$scope.gridOptions =...."
$scope.BearbeiteAuftrag = function (einzelauftragId){
alert(einzelauftragId);
//Add code for the logic here with the parameter einzelauftragId
};