Develop Reference

V-model modifies objects with the same property

I'm working on a VueJS project and I'm having trouble using v-model with Objects. When I modify one of the object that is bound with v-model it modifies all the different objects with the same property name.
Here's my code:
HTML
<div v-if="!editMode">
<ul class="list-group">
<li class="list-group-item">Nombre de Usuario: {{userGlobal.username}}</li>
<li class="list-group-item">Nombre: {{userGlobal.first_name}}</li>
<li class="list-group-item">Apellido: {{userGlobal.last_name}}</li>
<li class="list-group-item">Email: {{userGlobal.email}}</li>
<li class="list-group-item">DNI: {{userGlobal.dni}}</li>
<li class="list-group-item">Fecha de Nacimiento: {{userGlobal.birth_date}}</li>
</ul>
<a href="#">
<button class="btn btn-block btn-primary mt-2"
#click.prevent="modifyModal">Modificar Informacion</button>
</a>
</div>
<div v-else style="padding: 1px;">
<form>
<input type="text" class="form-control" v-model="userEditable.username" />
<input type="text" class="form-control" v-model="userEditable.first_name" />
<input type="text" class="form-control" v-model="userEditable.last_name" />
<input type="text" class="form-control" v-model="userEditable.email" />
<input type="integer" class="form-control" v-model="userEditable.dni" />
<input type="text" class="form-control" v-model="userEditable.birth_date" />
</form>
<button class="btn btn-block btn-success mt-2">Guardar</button>
<button class="btn btn-block btn-danger mt-2"
#click.prevent="cancelEdit">Cancelar</button>
</div>
Script
data: function() {
return {
profile: 1,
userGlobal: "",
userEditable: [],
editMode: false
};
},
created: function() {
this.fetchUser();
},
methods: {
fetchUser: function() {
const vm = this;
axios
.get(
"http://localhost:4000/api/users/96759c00-2682-11ea-827a-48ba4e44ff52"
)
.then(function(res) {
vm.userGlobal = res.data.user[0];
})
.catch(function(err) {
console.log(err);
});
},
cancelEdit: function(){
this.userEditable = this.userGlobal;
this.editMode = false;
},
modifyModal: function() {
this.userEditable = JSON.stringify(this.userGlobal)
this.editMode = true;
},
When I modify any of the form entries of userEditable it also modifies the userGlobal variable. This happens to me on other components. (I didn't code the patch function because I want to solve this issue first).
How can I resolve this problem?

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
};

Cannot read property '0' of undefined input file in bootstrap module window

I am trying to create a form inside a Bootstrap modal. it should contain the input file field and preview a chosen image, so I can use Jcrop to crop the image.
So here is what am I doing now:
<script type="text/javascript">
$('#new-menu').on('shown.bs.modal', function (event) {
var modal = $(this);
var src = modal.find(".modal-body .upload");
var target = modal.find(".image");
src.bind("change", function () {
// fill fr with image data
modal.find(".jcrop-holder").remove();
readUrl(modal,target,src);
initJcrop(target);
});
});
function readUrl(modal,target,src){
if (src.files && src.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
target.attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
initJcrop(target, modal);
}
else alert(src.files[0]);
}
}
function showCoords(c) {
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
}
function initJcrop(img) {
jcrop_api = $.Jcrop(img);
jQuery(img).Jcrop({
aspectRatio: 16 / 9,
onChange: showCoords,
setSelect: [0, 90, 160, 0],
onSelect: showCoords
}, function () {
modal.find(".jcrop-holder").css({
left: "50%",
marginLeft: -img.width / 2 + "px"
});
});
}
</script>
But i get this error
'Cannot read property '0' of undefined'
HTML
<form action="place/{id}/new/service/">
<div class="input-group">
<img src="http://placehold.it/160x90" class="image"/>
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">
<i class="glyphicon glyphicon-apple"></i>
</span>
<input type="text" id="form-name" class="form-control"
placeholder="Назва" value="" aria-describedby="basic-addon1"/>
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon2">
<i class="fa fa-tag"></i>
</span>
<input type="number" id="form-price" class="form-control"
placeholder="Ціна" value="" aria-describedby="basic-addon1"/>
<span style="padding:2px 5px" class="input-group-addon"><i>.грн</i></span>
</div>
<div class="input-group">
<textarea class="form-control place_description" style="resize: none" rows="5"
placeholder="Короткий опис послуги"></textarea>
</div>
<div style="text-align: center">
<small class="description-info">Залишилося 160 символів</small>
</div>
<div class="input-group">
<input type="file" class="upload"/>
</div>
<button id="new-service" class="btn btn-primary" type="submit">Зареєструвати</button>
</form>

The src you are passing in function readUrl(modal,target,src) is a jQuery element when you need is to access the DOM element. Have
src.get(0).files && src.get(0).files
Instead of
src.files && src.files[0]

Autocomplete multiple fields based on one field (jQuery Autocomplete)

My JSON information:
{
"RES_ID":"2622959",
"PROP_ID":"76055",
"RES_CHECK_IN":"2015-04-21",
"RES_CHECK_OUT":"2015-04-25",
"RES_N_ADULTS":"6",
"RES_GUEST_FIRSTNAME":"Nicolas",
"RES_GUEST_LASTNAME":"Prantzos"
}
I want the RES_ID as autocomplete for the following input:
<input id="reservation_id" class="ui-autocomplete-input form-control" />
And when the input reservation_id will be filled take the rest RES_CHECK_IN and RES_CHECK_OUT and autofill them in
<input type="text" class="form-control" name="start">
<span class="input-group-addon">to</span>
<input type="text" class="form-control" name="end">
I tried to mix ajax + autocomplete do achieve that without any luck.
(function autocomplete_search() {
//this function take the #res_id input
$("#reservation_id").autocomplete({
source: "/police/get_res"
});
})();
How I show RES_ID as autocomplete and how i fill the rest of the inputs based on the RES_ID?

$("#reservation_id").kendoAutoComplete( {
dataTextField: "name",
dataSource: {
transport: {
read: {
url: "JSON File name",
serverPaging:true,
type: "POST",
data: {
json: JSON.stringify([{"name": "Karan"}, {"name": "Singh"}] )
}
}
}
}
} );
and in HTMl Side
<input id="reservation_id" />
Go : Link
or :
var data = [{
"RES_ID":"2622959",
"PROP_ID":"76055",
"RES_CHECK_IN":"2015-04-21",
"RES_CHECK_OUT":"2015-04-25",
"RES_N_ADULTS":"6",
"RES_GUEST_FIRSTNAME":"Nicolas",
"RES_GUEST_LASTNAME":"Prantzos"
}];
$("#reservation_id").autocomplete({
source: function (request, response) {
response($.map(data, function(v,i){
return {
label: v.RES_ID,
value: v.RES_GUEST_LASTNAME
};
}));
}
});
Final Fiddle :-Final

So I haven't found an easy solution for this. had to code myself.
jQuery:
(function autocomplete_search() {
//this function take the #res_id input
var ac_config = {
source: "/police/get_res",
select: function(event, ui) {
$("#reservation_id").val(ui.item.RES_ID);
$("#checkin").val(ui.item.RES_CHECK_IN);
$("#checkout").val(ui.item.RES_CHECK_OUT);
$("#firstname").val(ui.item.RES_GUEST_FIRSTNAME);
$("#lastname").val(ui.item.RES_GUEST_LASTNAME);
},
minLength: 1
};
$("#reservation_id").autocomplete(ac_config);
})();
HTML:
<div class="form-group">
<label class="col-md-3 control-label" for="inputTooltip">Firstname <span class="required">*</span>
</label>
<div class="col-md-6">
<input type="text" title="" data-toggle="tooltip" data-trigger="hover" class="form-control" data-original-title="What is your name?" id="firstname" aria-describedby="tooltip332323">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="inputTooltip">Lastname <span class="required">*</span>
</label>
<div class="col-md-6">
<input type="text" title="" data-toggle="tooltip" data-trigger="hover" class="form-control" data-original-title="What is your Last name?" id="lastname" aria-describedby="tooltip332323">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Checkin / Checkout:</label>
<div class="col-md-6">
<div class="input-daterange input-group" data-plugin-datepicker="">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="text" class="form-control" id="checkin" name="checkin" value="">
<span class="input-group-addon">to</span>
<input type="text" class="form-control" id="checkout" name="checkout" value="">
</div>
</div>
</div>
Codeigniter model which generates the JSON:
function get_res($q) {
$this->db->select('RES_ID, PROP_ID, RES_CHECK_IN, RES_CHECK_OUT, RES_N_ADULTS, RES_GUEST_FIRSTNAME, RES_GUEST_LASTNAME');
$this->db->like('RES_ID', $q);
$query = $this->db->get('reservations');
if($query->num_rows() > 0){
foreach ($query->result_array() as $row){
//build an array
$row['value'] = $row['RES_ID'];
$row['label'] = "{$row['RES_ID']}";
$matches[] = $row;
}
echo json_encode($matches); //format the array into json data
exit;
}
}
Controller:
function get_res(){
if (isset($_GET['term'])){
$q = strtolower($_GET['term']);
$this->Police_model->get_res($q);
}
}
Hope It will help someone!

How to use two types of editing like popup and Inline in a single kendo Grid in asp?

I want to use two types of editing like inline editing and popup editing for a single kendo grid
inline editing for Commands
popup editing for Toolbar,,
alredy i searched google but i didnt get related pages
in popup editing i want to use template
<script id="customPopUpTemplate" type="text/x-kendo-template">
<form id="myForm" action="" method="post">
<div align="right">
<span id="Spn2" class ="span">* Mandatory Fields</span>
</div>
<div align="center">
<span id="Spn1" class ="span1" ></span>
</div>
<div class="heig"> </div>
<div class="k-edit-field">
<input name="FirstName" class="k-textbox"/>
<span id="sta1" style="color: Red; font-size:medium ;">
</span>
</div>
<div class="div">First Name: </div>
<div class="k-edit-field">
<input name="LastName" class="k-textbox"/>
<span id="sta2" style="color: Red; font-size:medium ;">
</span>
</div>
<div class="div">Last Name: </div>
<div class="k-edit-field">
<input name="LoginName" class="k-textbox"/><
<span id="sta3" style="color: Red; font-size:medium;">
</span>
</div><div class="div">Login Name: </div>
<div class="k-edit-field">
<input name="Password" type="Password" class="k-textbox"/>
<span id="sta4" style="color: Red; font-size:medium ;">
</span>
</div>
<div class="div">Password: </div>
<div class="k-edit-field">
<input name="ReTypePassword" type="Password" class="k-textbox"/>
<span id="sta5" style="color: Red; font-size:medium ;"> * </span>
</div> <div class="div">ReTypePassword: </div>
<div class="k-edit-field">
<input name="ScopeId"
data-bind="value:ScopeId"
data-value-field="ScopeId"
data-text-field="ScopeName"
data-source="dropDownDataSource"
data-role="dropdownlist" />
<span id="sta6" style="color: Red; font-size:medium ;"> * </span>
</div>
<div class="div">Scope: </div>
</form>
</script>
my template id is customPopUpTemplate
My toolbar code is
toolbar: [ { text : "Add new record", name: "popup", iconClass: "k-icon k-add"} ],
editable: "inline",
columns:
[
{
field: "LoginName",
title: "Login Name",
width:"175px"
},
{
field: "FirstName",
title: "First Name",
width:"115px"
},
{
field: "LastName",
title: "Last Name",
width:"100px"
}
$(".k-grid-popup", grid.element).on("click", function () {
grid.options.editable = "popup";
grid.addRow();
grid.options.editable = "inline";
});
its working fine but it will display normal columns,,
in my template i add extra columns ,,
how to i use my template for popup editing...
thanks in advance.!!!!!!!!!!

Assign a json values having options templates ,mode.. to grid.options.editable
$(".k-grid-popup", grid.element).on("click", function () {
var popupWithOption = {
mode: "popup",
template: kendo.template($("#customPopUpTemplate").html()),
window: {
title: "Your Title"
}
};
grid.options.editable = popupWithOption ;
grid.addRow();
grid.options.editable = "inline";
});
i hope this will help you