I have a table that look like :
here i can define how many rows and columns i want on my table and the table get updated as i want, at here everything fine, the next step i need is to change the content of each cell and bind it to an array, i really don't know how to accomplish this, seems like contenteditable has some issues with v-model.
Another problem is that i don't know how to pass the data to my data object, should i pass it as a matrix? a array? i need to know each input for the specific row and columns, any help?
here is what i did so far:
<template>
<div>
<form class="form-horizontal">
<h2 class="text-center"> Table </h2>
<div class="form-group">
<div class="col-md-1">
<button #click="changeView('appTableStyle')" type="button" class="form-control btn btn-xs btn-warning">
<span class="glyphicon glyphicon-pencil"></span>
</button>
</div>
<label for="rows" class="control-label col-md-1">style:</label>
<div class="col-md-6">
<select class="form-control" v-model="table.tableStyle">
<option v-for="(item,key) in tableStyles" :value="item.Id">
{{ item.style }}
</option>
</select>
</div>
</div>
<div class="form-group">
<label for="rows" class="control-label col-md-2">rows:</label>
<div class="col-md-2">
<input type="number" min="1" v-model="table.rows" class="form-control" id="rows">
</div>
<label for="columns" class="control-label col-md-1">columns:</label>
<div class="col-md-2">
<input type="number" min="1" v-model="table.cols" class="form-control" id="cols">
</div>
<label for="columns" class="control-label col-md-2">How Many?:</label>
<div class="col-md-2">
<input type="number" min="1" v-model="insert" class="form-control" id="cols">
</div>
</div>
<table class="table table-responsive" style="background-color:lightGray">
<tbody>
<tr v-for="(row,idx2) in tableRows">
<td v-model="table.colsArr[idx]" :key="" class="table-success" v-for="(col,idx) in tableCols" contenteditable="true">{{idx}}</td>
</tr>
</tbody>
</table>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-9">
<div class="text-center">
<button type="submit" #click.prevent="addTable" class="btn btn-success margin-above2 btn-block">Add Table</button>
</div>
</div>
</div>
</form>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
table: {
rows: 1,
cols: 1,
key: 'Table',
tableStyle: 1,
colsArr: []
},
insert: 1
}
},
methods: {
},
changeView: function (view) {
this.$store.commit('changeCurrentView', view)
}
},
computed: {
tableStyles () {
return this.$store.getters.getTableStyles
},
tableRows () {
return parseInt(this.table.rows)
},
tableCols () {
return parseInt(this.table.cols)
}
}
}
</script>
Related
When I input data in text input and then click button "Save Task" data will show is list in bottom descend. Now i console.log I want to show data when after click button. I don't know how to get data show when after click button "Save Tasks" so I did console.log
app.html
<div class="form-group" *ngIf="saveTask">
<div class="form-row">
<div class="form-group col-md-12">
<label for="subjectTask" class="control-label">Subject Task</label>
<input formControlName="subjectTask" type="text" class="form-control" id="subjectTask"
placeholder="Subject Task">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="assignDev" class="control-label">Assign Dev</label>
<select formControlName="assignTasks" name="assignTasks" class="form-control" id="assignTasks">
<option value="">choose dev...</option>
<option *ngFor="let staff of Staff" [ngValue]="staff.fullName">
{{staff.firstName}} {{staff.lastName}}
</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="deadline" class="control-label">Deadline</label>
<input formControlName="deadlineDate" type="number" class="form-control" id="deadlineDate"
placeholder="Deadline">
</div>
</div>
<div class="form-row">
<div class="form-group mr-5">
<button type="button" class="btn btn-light btn-cancel">Cancel</button>
</div>
<div class="form-group">
<button type="button" class="btn btn-success" (click)="onTasksSubmit()">Save Tasks</button>
</div>
</div>
</div>
app.ts
onTasksSubmit() {
const subject = this.editTicket.controls.subjectTask.value
const assignTasks = this.editTicket.controls.assignTasks.value
const deadlineDate = this.editTicket.controls.deadlineDate.value
this.newTask = {
subject, assignTasks, deadlineDate
}
this.depositTasks.push(this.newTask)
this.clearTask()
console.log(this.newTask);
// this.saveTask = false;
}
clearTask() {
this.editTicket.patchValue({
subjectTask: '',
assignTasks: '',
deadlineDate: ''
})
}
saveTasks() {
if (this.depositTasks.length != 0) {
console.log('do');
for (let i = 0; this.depositTasks.length > i; i++) {
console.log(this.depositTasks);
this.ticketService.setAddTasks(
this.id,
this.depositTasks[i]
)
}
}
}
<p *ngFor="let task of depositTasks">{{task?.subject}}</p>
try to use the depositTasks array in template as shown above.
I am adding a vue component on button click. Its adding new form element with checkbox and radio button which contain id with for element of . How to assign a new Id to checkboxes and radio buttons every time I add a new component.
I tried passing numeric values to the id and for attributes but it doesn't work
Vue.component('persons-phone', {
props: ['index'],
template: `
<div class="row person_phone_wrapper">
<div class="col-md-4">
<div class="form-group">
<label for="person_phone">Phone Number : <span class="danger">*</span></label>
<input type="tel" class="form-control required" name="person_phone[]">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<div class="c-inputs-stacked">
<br><br>
<input type="checkbox" id="verified_number_#{{ index }}" name="verified_phone[]">
<label for="verified_number_#{{ index }}" class="block">Verified</label>
</div>
</div>
</div>
<div class="col-md-4">
<div>
<br><br>
<input name="phone_status[]" type="radio" class="with-gap" id="radio_#{{ index }}" />
<label for="radio_#{{ index }}">Active</label>
<input name="phone_status[]" type="radio" class="with-gap" id="radio_#{{ index + 1 }}"/>
<label for="radio_#{{ index + 1 }}">Inactive</label>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="remove_person_phone"> </label><br>
<button type="button" class="btn btn-danger btn-sm" #click="$emit('remove')">
<i class="fa fa-close"></i> Remove
</button>
</div>
</div>
</div>
`,
})
var app = new Vue ({
el: '#app',
data: {
personsPhoneCount: [1],
currentPhoneIndex: 1
},
methods: {
deletePersonsPhone: function(index){
this.personsPhoneCount.splice(index,1)
},
addPersonsPhone: function(){
index = this.currentPhoneIndex + 1;
this.currentPhoneIndex = index;
this.personsPhoneCount.push(index);
}
},
computed: {
}
})
<persons-phone v-for="(pPC, index) in personsPhoneCount" #remove="deletePersonsPhone(index)" :num="currentPhoneIndex">
</persons-phone>
Doing this solved my problem
Vue.component('persons-phone', {
props: {
index: {
type: Number,
required: true
},
},
template: `
<div class="row person_phone_wrapper">
<div class="col-md-4">
<div class="form-group">
<label for="person_phone">Phone Number: <span class="danger">*</span></label>
<input type="tel" class="form-control required" name="person_phone[]">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<div class="c-inputs-stacked">
<br><br>
<input type="checkbox" :id="checkbox" name="verified_phone[]">
<label :for="checkbox" class="block">Verified</label>
</div>
</div>
</div>
<div class="col-md-4">
<div>
<br><br>
<input :name="radio" type="radio" class="with-gap" :id="radio1" />
<label :for="radio1">Active</label>
<input :name="radio" type="radio" class="with-gap" :id="radio2"/>
<label :for="radio2">Inactive</label>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="remove_person_phone"> </label><br>
<button type="button" class="btn btn-danger btn-sm" #click="$emit('remove')">
<i class="fa fa-close"></i> Remove
</button>
</div>
</div>
</div>
`,
data: function() {
return {
radio: 'phone_status['+this.index+']',
radio1: 'radio_' + this.index,
radio2: 'radio_' + this.index + '_' + this.index,
checkbox: 'verified_number_'+ this.index,
}
}
})
I am trying to make dynamic form inputs with vue.js. Here is my HTML code.
<div id="multi">
<form action="{{route('flighttickets.searchMulti')}}" method="post" class="container-fluid">
{{csrf_field()}}
<div class="row" v-for="(item, index) in items">
<div class="form-group col col-sm-3">
<select v-bind:name="inputName(index, 'from')" v-model="item.from" class="form-control" required>
<option disabled selected value=''>From</option>
#foreach($locations as $location)
<option value="{{$location->id}}">{{$location->name}}({{$location->abbreviation}})</option>
#endforeach()
</select>
</div>
<div class="form-group col col-sm-3">
<select v-bind:name="inputName(index, 'to')" v-model="item.to" class="form-control" required>
<option disabled selected value=''>To</option>
#foreach($locations as $location)
<option value="{{$location->id}}">{{$location->name}}({{$location->abbreviation}})</option>
#endforeach()
</select>
</div>
<div class="form-group col col-sm-3">
<input type="date" class="form-control" v-model="item.date" v-bind:name="inputName(index, 'date')" required>
</div>
<div class="col-auto" v-if="index >= min">
<button type="button" #click="removeItem(index)" class="close pull-left" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
</div>
<div class="row form-group" v-if="items.length <= max">
<div class="col col-sm-3 offset-sm-6">
<button type="button" #click="addItem()" class="btn btn-primary pull-right"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="row form-group">
<div class="col col-sm-3 offset-sm-6">
<button type="submit" class="btn btn-primary pull-right"><i class="fa fa-search"></i> Search</button>
</div>
</div>
</form>
</div>
The script
var multi = new Vue({
el: '#multi',
data: {
min: 2,
max: 7,
item:{from:'', to:'', date:''},
items:[ { from: '', to: '', date: '' }, {from: '', to: '', date: ''} ]
},
methods: {
removeItem: function(id) {
if(this.items.length >= this.min){
this.items.splice(id, 1);
}
},
addItem: function() {
if(this.items.length <= this.max) {
var clone = JSON.parse(JSON.stringify(this.item));
this.items.push(clone);
}
},
inputName: function(index, property) {
return "items["+index+"]["+property+"]";
}
}
});
vue.js does not do looping accordingly. According to the script, the form input should show at least 2 and without cancel button when it is less than or equal to 2. But it is not working. see the picture.
It turned out like the blade engine has some issues while compiling. I put this file in a folder together with other views. I found out that the other view had an error. Only then, this file seems to work fine. That's how i fixed it. No code changes needed to this file. Thanks you everyone for your time.
I am creating the fields dynamically in HTML using this JS, and in multiselect I'm using bootstrap multiselect here is the code https://bootsnipp.com/snippets/Ekd8P when I click on the add more button it creates the form dynamically.
js code for creating a form dynamically :
$(function() {
// Remove button
$(document).on(
'click',
'[data-role="dynamic-fields"] > .form-horizontal [data-role="remove"]',
function(e) {
e.preventDefault();
$(this).closest('.form-horizontal').remove();
}
);
// Add button
var i = 1;
$(document).on(
'click',
'[data-role="dynamic-fields"] > .form-horizontal [data-role="add"]',
function(e) {
e.preventDefault();
var container = $(this).closest('[data-role="dynamic-fields"]');
new_field_group = container.children().filter('.form-horizontal:first-child').clone();
new_field_group.find('input').each(function() {
if (this.name == 'tags[0]') {
$(this).tagsinput('destroy');
$(this).tagsinput('removeAll');
this.name = this.name.replace('[0]', '[' + i + ']');
var new_container = $(this).closest('[class="form-group"]');
new_container.find(".bootstrap-tagsinput:first").remove();
} else {
$(this).val('');
}
});
new_field_group.find('select').each(function() {
if (this.name == 'addons[0]') {
$(this).multiselect('rebuild');
this.name = this.name.replace('[0]', '[' + i + ']');
var new_container = $(this).closest('[class="multiselect-native-select"]');
new_container.find(".multiselect-native-select > .multi").remove();
} else {
$(this).val('');
}
});
i += 1;
container.append(new_field_group);
}
);
});
and html code for form elements:
<form action="" method="post" novalidate="novalidate" enctype="multipart/form-data">
{{ csrf_field() }}
<div data-role="dynamic-fields">
<div class="form-horizontal">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Enter Dish Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="Name1" name="Name[]" required data-rule-minlength="2">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Enter Dish Price</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="Price" name="Price[]" required data-rule-minlength="2">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Select Food Type</label>
<div class="col-sm-8">
<select id="select1" class="form-control" name="select[]" required>
#foreach($types as $type)
<option value="{{$loop->iteration}}">{{$type->food_type_name}}</option>
#endforeach
</select>
<p class="help-block" data-toggle="tooltip" data-placement="bottom" title="xyz"><i class="md md-info"></i></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Dish Description</label>
<div class="col-sm-8">
<textarea name="Description[]" id="field-value" class="form-control" rows="1"></textarea>
</div>
</div>
</div>
<div class="col-sm-4 contacts">
<div class="form-group">
<label class="col-sm-3" for="rolename">Add Addons</label>
<div class="col-sm-8">
<select id="dates-field2" class="multiselect-ak form-control" name="addons[0]" id="trigger3" data-role="multiselect" multiple="multiple">
#foreach($addons as $addon)
<option value="{{$addon->addonid}}">{{$addon->addon_name}}</option>
#endforeach
</select>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Enter Tags</label>
<div class="col-sm-8">
<input type="text" value="" name="tags[0]" class="form-control" data-role="tagsinput" placeholder="e.g. spicy, healthy" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="col-sm-4">
<div class="checkbox checkbox-styled">
<label><em>Half Plate Price</em>
<input type="checkbox" value="" class="trigger2" id="trigger2" name="question">
</label>
</div>
</div>
<div class="col-sm-4">
<div id="hidden_fields2" class="hidden_fields2" style="display:none;">
<input type="text" id="hidden_field2" name="Price2[]" placeholder="Please Enter" class="form-control">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="col-sm-5">
<div class="checkbox checkbox-styled">
<label><em>Quarter Plate Price</em>
<input type="checkbox" value="" class="trigger" id="trigger" name="question">
</label>
</div>
</div>
<div class="col-sm-4">
<div id="hidden_fields" class="hidden_fields" style="display:none;">
<input type="text" id="hidden_field" name="Price3[]" placeholder="Please Enter" class="form-control">
</div>
</div>
</div>
</div>
<br>
<button class="btn btn-delete" data-toggle="tooltip" data-placement="bottom" title="Delete Field" data-role="remove">
Delete Item
</button>
<button class="btn ink-reaction btn-raised btn-primary" data-toggle="tooltip" data-placement="bottom" title="Add More Field" data-role="add">
Add More Items
</button>
</div>
<!-- /div.form-inline -->
</div>
<!-- /div[data-role="dynamic-fields"] -->
<div class="form-group">
<button type="submit" name="submit" href="#" class="btn ink-reaction btn-raised btn-primary" style="margin-top: -62px;margin-left: 160px;">Submit Items</button>
</div>
<!--end .form-group -->
</form>
The issue is that when I click on the add more item it reflects the multiselect dropdown twice as you see in this image.
I want that if I click on the add more item button it restates the multiselect dropdown as in the first state.
see this jsfiddle.net/akshaycic/svv742r7/7 it will clear all your doubt. on click plus button it is not reflect to "none selected" state it will remain in its initial state.
Any leads would be helpful. Thank you in advance.
I am working on a piece of code and since I dont have too much experience with jquery or javascript I need your help. I want to take the data from the row when button EditBtn is clicked and set those values to modal. I tried the code below but It was not working.
Below is my code
Table :
<table id="example" class="table table-bordered table-hover">
<thead>
<tr>
<th>Ödeme Türü</th>
<th>Ödeme Başlığı</th>
<th>İçerik</th>
<th>Son Ödeme Tarihi</th>
<th>Tutarı</th>
<th>Ödeme Durumu</th>
<th>Düzenle</th>
</tr>
</thead>
<tbody>
#foreach (OdemeList item in Model)
{
<tr id="#item.Odeme.OdemeID">
<td>#item.Odeme.OdemeType</td>
<td>#item.Odeme.OdemeTitle</td>
<td>#item.Odeme.OdemeContent</td>
<td>#item.Odeme.SonOdemeTarih</td>
<td>#item.Odeme.OdemeTutar</td>
#if (#item.KullaniciOdeme.isPay == true)
{
<td>Odendi</td>
}
else
{
<td>Odenmedi</td>
<td>
<form>
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_6pRNASCoBOKtIshFeQd4XMUh"
data-amount="#item.Odeme.OdemeTutar"
data-name="#item.Odeme.OdemeTitle"
data-image="/Content/LoginCssJs/pay.png"
data-locale="auto">
</script>
</form>
</td>
#*<td>
<a data-toggle="modal" data-target=".bootstrapmodal3"><button class="btn btn-success">Öde</button></a>
</td>*#
}
<td>
<a data-toggle="modal" id="EditBtn" class="btn edit" data-target=".bootstrapmodal"><img src="#Url.Content("~/Content/Icons/edit.png")" alt="Düzenle" /></a>
</td>
<td>
<a data-toggle="modal" data-target=".bootstrapmodal2"><img src="#Url.Content("~/Content/Icons/Delete.png")" alt="Sil" /></a>
</td>
</tr>
}
</tbody>
</table>
My modal:
<div class="modal fade bootstrapmodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button data-dismiss="modal" class="close"><span>×</span></button>
<div class="modal-title">
<h3>Ödeme Düzenle</h3>
</div>
</div>
<div class="modal-body">
<form>
<label>Ödeme Türü</label>
<select class="form-control" id="OdemeTuru">
<option>Aidat</option>
<option>Isınma</option>
<option>Bina Gideri</option>
</select><br />
<div class="form-group">
<label for="odemebasligi">Ödeme Başlığı</label>
<input type="text" class="form-control" id="odemebasligi" placeholder="OdemeTitle">
</div>
<div class="form-group">
<label for="comment">Ödeme içeriği</label>
<textarea class="form-control" rows="5" id="comment" placeholder="-OdemeContent"></textarea>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Tutar</label>
<div class="input-group">
<div class="input-group-addon">TL</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="OdemeTutar">
<div class="input-group-addon">.00</div>
</div>
</div>
<div class="form-group">
<label for="odemetarihi">Son Ödeme Tarihi</label>
<input type="text" class="form-control" id="odemetarihi" placeholder="SonOdemeTarih">
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Kaydet</button>
<button class="btn btn-danger" data-dismiss="modal"> Vazgeç</button>
</div>
</div>
</div>
</div>
Script:
<script>
$('a.edit').on('click', function() {
var myModal = $('.bootstrapmodal');
//// now get the values from the table
//var OdemeTuru = $(this).closest('tr').find('td.OdemeType').html();
var OdemeBaslik = $(this).closest('tr').find('td.OdemeTitle').html();
var OdemeIcerik = $(this).closest('tr').find('td.OdemeContent').html();
var OdemeTutar = $(this).closest('tr').find('td.SonOdemeTarih').html();
var SonOdemeTarihi = $(this).closest('tr').find('td.OdemeTutar').html();
//// and set them in the modal:
//$('#', myModal).val(OdemeTuru);
$('#odemebasligi', myModal).val(OdemeBaslik);
$('#comment', myModal).val(OdemeIcerik);
$('#exampleInputAmount', myModal).val(OdemeTutar);
$('#odemetarihi', myModal).val(SonOdemeTarihi);
// and finally show the modal
myModal.modal({ show: true });
return false;
});
</script>
In script you are targeting <td> class .find('td.OdemeTitle') and in table there are no class defined <td>#item.Odeme.OdemeTitle</td> what you only need is define class which you are targeting e.g
For
var OdemeBaslik = $(this).closest('tr').find('td.OdemeTitle').html();
HTML
<td class="OdemeTitle">#item.Odeme.OdemeTitle</td>
follow above example and set all <td> classes and you will be all set.
minimal fiddle example