We Keep Coding

Laravel VueJs store array from axios request in laravel controller

I have a laravel 5.7 application which uses VueJS 2.0 for the front end.
I have two table with many-to-many relation: commandes and produits.I am currently attempting to pass data in to my commandes table but i am getting this error:
SQLSTATE[42S22]: Column not found: 1054 Unknown column '0' in 'field list' (SQL: insert into `commande_produit` (`0`, `commande_id`, `produit_id`) values (3, , 0))
If anyone can tell me how to fix or even point me in the right direction it would be much appreciated.
The html template:
<template>
<div class="container">
<div class="row justify-content-center mt-5" v-if="$gate.isAdminOrVendeur()">
<div class="col-md-12">
<form class="" #submit.prevent="envoyer()" >
<table class="table table-bordered table-striped table-responsive">
<thead class="thead-dark">
<tr>
<th class="col-sm-4">Produit</th>
<th class="col-sm-2">Quantité</th>
<th class="col-sm-2">montant</th>
<th class="col-sm-2">Total</th>
<th class="col-sm-1"></th>
<th class="col-sm-1"></th>
</tr>
</thead>
<tbody>
<tr v-for="(commande, index) in commandes" :key="index">
<td>{{ commande.produit_id }}</td>
<td>{{ commande.quantite }}</td>
<td>{{ commande.montant }} F</td>
<td>{{ (commande.quantite * commande.montant).toFixed(2) }} F</td>
<td><a class="btn btn-info btn-block" #click="modifier(index)">Modifier</a></td>
<td><a class="btn btn-warning btn-block" #click="supprimer(index)">Poubelle</a></td>
</tr>
<tr>
<td colspan="3"></td>
<td><strong> F </strong></td>
<td colspan="2"></td>
</tr>
<tr>
<td>
<div class="form-group">
<select v-model="form.produit_id" name="produit_id" class="form-control">
<option v-for="produit in produits.data" :key="produit.id" v-bind:value="produit.id">{{ produit.designation }}</option>
</select>
</div>
</td>
<td><input type="text" class="form-control" v-model="form.quantite"></td>
<td><input type="text" class="form-control" v-model="form.montant"></td>
<td colspan="3"><a class="btn btn-primary btn-block" #click="ajouter">Ajouter</a></td>
</tr>
</tbody>
<tfoot>
<a class="button btn btn-xs btn-warning" #click="toutPoubelle">Tout à la poubelle</a>
<button class="button btn btn-xs btn-success" type="submit">Valider</button>
</tfoot>
</table>
</form>
<div class="panel panel-danger" v-show="poubelle.length">
<div class="panel-heading">Poubelle</div>
<table class="table table-bordered table-striped table-responsive">
<thead>
<tr>
<th class="col-sm-4">Produit</th>
<th class="col-sm-2">Quantité</th>
<th class="col-sm-2">montant</th>
<th class="col-sm-2">Total</th>
<th class="col-sm-1"></th>
<th class="col-sm-1"></th>
</tr>
</thead>
<tbody>
<tr v-for="(commande, index) in poubelle" :key="index">
<td>{{ commande.produit }}</td>
<td>{{ commande.quantite }}</td>
<td>{{ commande.montant }} F</td>
<td>{{ (commande.quantite * commande.montant).toFixed(2) }} F</td>
<td><a class="btn btn-success btn-block" #click="retablir(index)">Rétablir</a></td>
<td><a class="btn btn-danger btn-block" #click="eliminer(index)">Supprimer</a></td>
</tr>
</tbody>
</table>
<div class="panel-footer">
<div class="btn-group">
<a class="button btn btn-xs btn-success" #click="toutRetablir">Tout rétablir</a>
<a class="button btn btn-xs btn-danger" #click="toutEliminer">Tout supprimer</a>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
My vue instance:
<script>
export default {
data () {
return {
commandes: [],
poubelle: [],
produits: {},
form: new Form({
produit_id : '',
quantite : '',
montant: '',
})
}
},
methods: {
ajouter() {
this.commandes.push({produit_id: this.form.produit_id, quantite: this.form.quantite, montant: this.form.montant});
this.form = {};
this.commandes.sort(ordonner);
},
modifier(index) {
this.form.produit_id = this.commandes[index].produit_id;
this.form.quantite = this.commandes[index].quantite;
this.form.montant = this.commandes[index].montant;
this.commandes.splice(index, 1);
},
supprimer(index) {
this.poubelle.push(this.commandes[index]);
this.commandes.splice(index, 1);
this.poubelle.sort(ordonner);
},
retablir(index) {
this.commandes.push(this.poubelle[index]);
this.poubelle.splice(index, 1);
this.commandes.sort(ordonner);
},
eliminer(index) {
this.poubelle.splice(index, 1);
},
toutPoubelle() {
this.poubelle = this.poubelle.concat(this.commandes);
this.poubelle.sort(ordonner);
this.commandes = [];
},
toutRetablir() {
this.commandes = this.commandes.concat(this.poubelle);
this.commandes.sort(ordonner);
this.poubelle = [];
},
toutEliminer() {
this.poubelle = [];
},
loadProduits(){
//if(this.$gate.isAdminOrComptable()){
axios.get("api/produit").then(({ data }) => (this.produits = data));
//}
},
envoyer() {
axios.post('api/commande', {commande: this.commandes});
this.commandes = [];
},
},
mounted() {
this.loadProduits();
console.log('Component mounted.')
}
}
var ordonner = function (a, b) {
return (a.commande.toUpperCase() > b.commande.toUpperCase())
};
</script>
This is the commandes model:
class Commande extends Model
{
protected $fillable = ['commande'];
public function produits()
{
return $this->belongsToMany('App\Models\Produit');
}
}
and the produits model:
class Produit extends Model
{
protected $fillable = ['designation'];
public function commandes()
{
return $this->belongsToMany('App\Models\Commande');
}
}
the commande controller store() method:
public function store(Request $request)
{
$this->validate($request,[
'commande' => 'required',
]);
$commande = new Commande();
$commande->produits()->attach([$request->commande]);
$commande->save();
}

Several things may not work as expected in your code:
You are trying to attach produits on a non-existing model.
By using new Commande you are just preparing the object Commande and not yet saving it to the database. You can't attach anything on it since it doesn't have an id yet.
Solution: use Create instead of New
The method attach() is not used properly
As per the doc (https://laravel.com/docs/7.x/eloquent-relationships#updating-many-to-many-relationships) attach() is expecting an array of ids. You are trying to pass a custom array so the method won't work.
Solution: extract the Ids from your $request->command and then use attach()

Her is the final store() function:
public function store(Request $request)
{
$this->validate($request,[
'commande' => 'required',
]);
$commande = new Commande();
$commande->save();
$produitsId = array_column($request->commande, 'produit_id');
$commande->produits()->attach($produitsId);
}
Hope it help someone.

C# MVC Textbox on the specific table row (disable) when the button is clicked

I have a table whose values are looped with my product list and I have a textbox for 'Quantity' and a button for 'Add to Cart'. I am trying to do when I click on 'Add to Cart' button, it will check the Quantity value if it has value or not then the 'Quantity' textbox will get disabled for that specific row only.
Product.cshtml
<table id ="productList" class="table table-dark">
<tr>
<th>Product ID</th>
<th>Title</th>
<th>Description</th>
<th>Quantity</th>
<th>Add to cart</th>
</tr>
#foreach (var item in Model)
{
<tr class="active">
<td>#item.Id</td>
<td>#item.Title</td>
<td>#item.Description</td>
<td>#Html.TextBox("Quantity", "0", new { #class = "form-control" })</td>
<td><button class="btn btn-default pull-left" onclick="disableText(Quantity);" id="btn-addToCart">Add To Cart</button></td>
</tr>
}
</table>
javascript
function disableText(QtyVal) {
if(QtyVal.value == '')
{
document.getElementById("Quantity").value = 1;
}
}
Currently the output of my project is everytime I click any submit button, it will always update the first row (which is incorrect).
The goal is it will update the Quantity and disable it for that specific row

Your problem lies in this button definition:
<button class="btn btn-default pull-left" onclick="disableText(Quantity);" id="btn-addToCart">Add To Cart</button>
The foreach loop generates duplicate id attribute values for all buttons, which builds invalid HTML and causing undesired behavior. Since your table also contains <input> tag, you should use for loop instead of foreach and put distinct class name to the button, e.g. buttonadd:
<!-- assumed that #model List<Product> is used -->
<table id ="productList" class="table table-dark">
<tr>
<th>Product ID</th>
<th>Title</th>
<th>Description</th>
<th>Quantity</th>
<th>Add to cart</th>
</tr>
#for (int i = 0; i < Model.Count; i++)
{
<tr class="active">
<td>#Model[i].Id</td>
<td>#Model[i].Title</td>
<td>#Model[i].Description</td>
<td>#Html.TextBox("Quantity", "0", new { #class = "form-control" })</td>
<td><button type="button" class="btn btn-default pull-left buttonadd">Add To Cart</button></td>
</tr>
}
</table>
Then you can reference buttonadd class as selector to find out which row the button contained, and setting <input> state to readonly (not disabled because you want to send quantity values on form submit; all inputs with disabled attribute are not included during submit) as in example below:
$(document).on('click', '#productList .buttonadd', function () {
var row = $(this).closest('tr');
// find quantity text box in the same row as clicked button
var qty = row.find('input');
// set quantity value and prevent user input
qty.val(parseInt(qty.val()) + 1);
qty.attr('readonly', 'readonly');
});
Note: If you want to use strongly-typed helper, use #Html.TextBoxFor:
#Html.TextBoxFor(m => m[i].Quantity, new { #class = "form-control" })
Live example: .NET Fiddle

Since all of your textboxes have the same Id you cannot specify which one you are trying to update in your js. Try giving a unique ID to your TextBox then when you getElementById("UniqueID") you can ensure you are selecting the correct text box.

You just need to add bellow code at button click event
(this).prev('input').attr("disabled", "disabled")

Use a partial view, save some headache.
<table id ="productList" class="table table-dark">
<tr>
<th>Product ID</th>
<th>Title</th>
<th>Description</th>
<th>Quantity</th>
<th>Add to cart</th>
</tr>
#foreach (var item in Model)
{
#Html.Partial("~/Views/_OrderRowPartial.cshtml", item)
}
</table>
_OrderRowPartial.cshtml:
#model item
<tr class="active">
<td>#item.Id</td>
<td>#item.Title</td>
<td>#item.Description</td>
<td>#Html.TextBoxFor(m => m.Quantity, new { #class = "form-control quantity" })</td>
<td><button class="btn btn-default pull-left" onclick="disableText();">Add To Cart</button></td>
</tr>
Javascript:
function disableText(t, el) {
var qty = el.parentElement.previousElementSibling.getElementsByTagName('input')[0];
mytd.style.border = "1px solid #00FF00";
console.log(qty.value);
if (qty.value == '') {
qty.value = 1;
}
}
Here is an example where I set borders on stuff to make it obvious what is going on. Unclear if you want to disable input or button so I did both.
function disableText(t, el) {
el.style.border = "2px solid #FF0000";
var mytd = el.parentElement;
mytd.style.border = "1px solid #00FF00";
var mytr = mytd.parentElement;
var qtytd = mytd.previousElementSibling;
var qty = qtytd.getElementsByTagName('input')[0];
qtytd.style.border = "2px solid orange";
qty.style.border = "2px solid cyan";
console.log(qty.value);
if (qty.value == '') {
qty.value = 1;
}
// disable button
el.setAttribute("disabled", "disabled");
qty.setAttribute("disabled", "disabled");
}
<table id="productList" class="table table-dark">
<tr>
<th>Product ID</th>
<th>Title</th>
<th>Description</th>
<th>Quantity</th>
<th>Add to cart</th>
</tr>
<tr class="active">
<td>1234d</td>
<td>Cherry Pie</td>
<td>Gooey cherry pie</td>
<td><input type="text" class="form-control quantity" value="2" .>
<td><button class="btn btn-default pull-left" onclick="disableText('',this);">Add To Cart</button></td>
</tr>
<tr class="active">
<td>1234hd</td>
<td>Hot Dog</td>
<td>Dog, With mustard</td>
<td><input type="text" class="form-control quantity" /></td>
<td><button class="btn btn-default pull-left" onclick="disableText('',this);">Add To Cart</button></td>
</tr>
</table>

Why my pagination datatable doesn't work when use Javascript?

I want to disable some button with condition..
Im already disable that button but my pagination doesn't work. Both function is work but when im using both function in the same time, it is doesn't work. Can you help me?
This is my HTML/JSP
<div id="dt_example" class="example_alt_pagination">
<table class="table
id="data-table" >
<thead>
<tr>
<th class="text-center">Un-Used</th>
<th class="text-center">Total</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
<s:iterator value="checkList" status="status">
<tr >
<td class="text-center" id="unUsedWarkat<s:property value="%{#status.index}"/>"><s:property value="unUsedWarkat" /></td>
<td class="text-center" id="totalWarkat<s:property value="%{#status.index}"/>"><s:property value="totalWarkat" /></td>
<td class="text-center"><s:property value="statusWarkat" /></td>
<td class="text-center">
<s:url id="delete" action="warkat_book_maintenance_delete" escapeAmp="false">
<s:param name="idwebTknUrl" value="idwebTknUrl" />
</s:url>
<a href="<s:property value="delete"/>">
<button onClick="disableDelete()" class ="btn btn-xs btn-primary" id="delete<s:property value="%{#status.index}"/>">
Delete
</button>
</a>
</td>
</tr>
</s:iterator>
</tbody>
</table>
</div>
Ths is my Javascript/jQuery
function myFunction() {
var x = document.getElementsByTagName("tr");
var i;
var unUsed;
var totalWarkat;
for (i = 0; i < x.length;i++) {
unUsed = document.getElementById('unUsedWarkat'+i).innerHTML;
totalWarkat = document.getElementById('totalWarkat'+i).innerHTML;
if(unUsed != totalWarkat){
document.getElementById("delete"+i).disabled = true;
}
else{
document.getElementById("delete"+i).disabled = false;
}
}
$(document).ready(function() {
myFunction();
var table = $('#data-table').DataTable({
"iDisplayLength": 5,
"sPaginationType": "full_numbers",
"sDom": '<"pull-left top"t><"col-sm-4">tr<"clear"><"bottom"ilp>',
"bSort" : false,
});
});
}
Thanks.. and sorry for bad english.

How to change the value of a data-attribute and a td in a table HTML e Jquery

I have this table in html, and I load it with Php Laravel
<div class="form-row col-md-12">
<table id="contacts" class="table table-striped">
<tbody>
<tr>
<th>Id</th>
<th>Cel</th>
<th>Tel</th>
<th>Email</th>
<th>Actions</th>
</tr>
#if(isset($contacts) && count($contacts)>0)
#foreach($contacts $c)
<tr>
<td class="inf" data-id="{{ $c->id }}"> {{ $c->id }} </td>
<td class="inf" data-cel="{{ $c->cel}}"> {{ $c->cel}} </td>
<td class="inf" data-tel="{{ $c->tel}}"> {{ $c->tel}}</td>
<td class="inf" data-email="{{ $c->email }}"> {{ $c->email }} </td>
<td>
<button class='btn btn-primary btnAlterarContato' type="button">Alterar</button>
</td>
</tr>
#endforeach
#endif
</tbody>
</table>
</div>
You can see that each row has its data attribute for creating data. I made a method that I can retrieve the data from the TD and alter them, however I can not change the data of the data. how do I change how information that is without data attribute?
$('.btnAlterarContato').click(function(){
var Row= $(this).closest('tr');
var Posicao = 1;
// Switch: 1 = Id, 2 = Cel, 3 = Tel, 4 = Email
Row.find('td').each(function(){
switch(Posicao)
{
case 2: $(this).text('new value '); $(this).attr('data-cel', 'Hi');
$(this).data('data-cel','Hi') ;break;
}
Posicao++;
});
});
I have a repeat loop to walk on every table td, and in case position 2 is the value of cel, I would like to change your display item and your cell-date when I do $ (this) .text ('new value ') this works, but I can not change the mobile date, how do I do this?

For changing data attribute use .data() like below:-
$(this).data('cel', 'Hi');
Note:- Once clear your browser cache and check

Change cell color via ng-click

I have change color of my cell when I click in my button but when I click second time my color cell is not keep.
I wish that when I click a second time on another button my first cell keeps color
First click:
Second click:
HTML:
<table class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr class="warning">
<th>Key</th>
<th>Valeur version {{application.version}}</th>
<th></th>
<th>Valeur version {{applicationcible.version}}</th>
</tr>
</thead>
<tbody ng-repeat="group in groups">
<tr>
<td class="danger" colspan="4" ng-click="hideGroup = !hideGroup">
<a href="" ng-click="group.$hideRows = !group.$hideRows">
<span class="glyphicon" ng-class="{ 'glyphicon-chevron-right': group.$hideRows, 'glyphicon-chevron-down': !group.$hideRows }"></span>
<strong>{{group.name}}</strong>
</a>
</td>
</tr>
<tr ng-repeat-start="member in group.members" ng-hide="hideGroup">
<td rowspan="2">
{{ member.name }}
</td>
<td rowspan="2" ng-class="{selected: $index==selectedRowLeft}">{{ member.valueRef }}</td>
<td class="cube" >
<div ng-if="group.id != 1">
<button type="button" ng-click="moveLeft($index, group)" ><span class="glyphicon glyphicon-chevron-left"></span></button>
</div>
</td>
<td rowspan="2" ng-class="{selected: $index==selectedRowRight}">{{ member.valueCible }}</td>
</tr>
<tr ng-repeat-end ng-hide="hideGroup" >
<td class="cube" >
<div ng-if="group.id != 2">
<button type="button" ng-click="moveRight($index, group)"><span class="glyphicon glyphicon-chevron-right"></span></button>
</div>
</td>
</tr>
</tbody>
</table>
CSS:
.selected { background-color: #ffff05; }
JS:
scope.moveLeft = function (index, group) {
move(scope.properties, group.id, index, 'left');
};
scope.moveRight = function (index, group) {
move(scope.propertiescible, group.id, index, 'right');
};
var move = function (properties, groupId, origin, destination) {
unregister();
var value;
if (destination === 'right') {
scope.selectedRowRight = origin;
} else {
scope.selectedRowLeft = origin;
}
...

You might need to create an array to keep the cells that are selected thus background color is changed.
Also you will need to change the ng-click function to check the array, and implement the following logic "if there is a record for the clicked row as selected change it's bg-color to yellow"

You will need to do something like this
<td ng-repeat="group in groups" ng-class="{'selected': check == group.title}" ng-click="select(group)">{{group.title}}</li>
in css make sure you have this selected class defined
.selected {
background: 'red';
}
in controller
$scope.check = '';
$scope.select = function (group) {
$scope.check = group.title
};
See this plunker http://plnkr.co/edit/pLbLMWsJ7A6Zr1Z9uAmz?p=preview