How to display an input like x-editable? - html

I want to make an editable manual with ng-if in AngularJS but when I click on one of the table cells, all the table cells in Jumlah Pembelian display the input form.
before click:
after clicking on one cell:
My question: how to display form input when I click one cell
My HTML code:
<td ng-if="kons_makanan == 0" class="middle-vertical text-center"
ng-click="change_jumlah(bu.id)">{{jumlah_makanan}}</td>
<td ng-if="kons_makanan == 1">
<div class="form-inline">
<input type="text" class="form-control" number-masking
ng-model="jumlah_makanan" style="width:auto;">
<a class="btn btn-flat btn-sm btn-success"
ng-click="update_jumlah_makanan(bu.id)" title="Tambah">
<i class='fa fa-plus'></i>
</a>
</div>
</td>
My AngularJS code:
$scope.change_jumlah = function(no) {
$scope.kons_makanan = 1;
}
$scope.update_jumlah_makanan = function(no) {
$scope.kons_makanan = 0;
}

Sorry everyone, I tried and was successful
HTML code:
<td ng-if="kons_makanan != $index" class="middle-vertical text-center"
ng-click="change_jumlah($index)">{{jumlah_makanan}}</td>
<td ng-if="kons_makanan == $index">
<div class="form-inline">
<input type="text" class="form-control" number-masking
ng-model="jumlah_makanan" style="width:auto;">
<a class="btn btn-flat btn-sm btn-success"
ng-click="update_jumlah_makanan(bu.id)" title="Tambah">
<i class='fa fa-plus'></i>
</a>
</div>
AngularJS code:
$scope.change_jumlah = function(no) {
$scope.kons_makanan = no;
}
$scope.update_jumlah_makanan = function(no) {
$scope.kons_makanan = -1;
}
Thanks all for trying to help me

Related

Create a show all button to show hidden row

My code is like this: when you check the 'hide' column, the whole row is hidden. I also have a 'Show All' checkbox. When I check it, all rows (including the hidden ones) are shown. But when I uncheck it, all rows disappear. How can I make it so only the hidden rows disappear when I uncheck 'Show All', and the other rows still remain visible?
<body ng-app="myApp" ng-controller="myController">
<h1>Fruits in Vietnam</h1>
<hr>
<form name="myForm">
<div class="input-group input-group-lg">
<input type="text" class="form-control" name="mdfruitname" id="txtfruitname" ng-model="mdfruitname"
required>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" ng-click="addnew()"
ng-disabled="myForm.mdfruitname.$pristine || myForm.mdfruitname.$invalid">Add
</button>
</div>
</div>
</form>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
<th>Hide</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="fruit in fruitnameDetail" ng-show="showall" ng-hide="hidef">
<td>{{fruit.fruitname}}</td>
<td><input type="checkbox" ng-model="hidef"></td>
<td>
<a class="btn btn-xs delete-record" ng-click="removefruitname($index)">
<i class="glyphicon glyphicon-trash"></i>
</a>
</td>
</tr>
</tbody>
</table>
<div><input type="checkbox" ng-model="showall"><span>SHOW ALL</span></div>
</body>
<script>
var app = angular.module("myApp", []);
app.controller('myController', function ($scope, $window) {
$scope.fruitnameDetail = [
{
"fruitname": "Banana"
},
{
"fruitname": "Mango"
},
{
"fruitname": "Orange"
}
];
$scope.addnew = function () {
var fruitnameDetail = {
fruitname: $scope.mdfruitname
};
$scope.fruitnameDetail.push(fruitnameDetail);
$scope.mdfruitname = '';
};
$scope.removefruitname = function (index) {
var name = $scope.fruitnameDetail[index].fruitname;
if ($window.confirm("Do you want to delete " + name + " ?")) {
$scope.fruitnameDetail.splice(index, 1);
}
};
});
</script>
Do not use ng-show and ng-hide at the same time. Just change a little bit your condition for ng-repeat. Here the example that should work:
<body ng-app="myApp" ng-controller="myController">
<h1>Fruits in Vietnam</h1>
<hr>
<form name="myForm">
<div class="input-group input-group-lg">
<input type="text" class="form-control" name="mdfruitname" id="txtfruitname" ng-model="mdfruitname"
required>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" ng-click="addnew()"
ng-disabled="myForm.mdfruitname.$pristine || myForm.mdfruitname.$invalid">Add
</button>
</div>
</div>
</form>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
<th>Hide</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="fruit in fruitnameDetail" ng-show="showall || !hidef">
<td>{{fruit.fruitname}}</td>
<td><input type="checkbox" ng-model="hidef"></td>
<td>
<a class="btn btn-xs delete-record" ng-click="removefruitname($index)">
<i class="glyphicon glyphicon-trash"></i>
</a>
</td>
</tr>
</tbody>
</table>
<div><input type="checkbox" ng-model="showall"><span>SHOW ALL</span></div>
</body>

Attach a input element with a Form using jQuery

How to attach a input element with a Form using jQuery ?
I have a Form like below.
<form action="{{ route('update_profile') }}" method="POST" id="buildyourform"
enctype="multipart/form-data">
<div class="form-group">
<label for="exampleFormControlFile1">Company Logo</label>
<div id="company_logo">
<i class="ri-close-line" title="Click to Update Image"></i>
</div>
</div>
<div class="flex-row">
<div class=" d-flex justify-content-end ">
<button type="submit" class="btn btn-primary mb-5 mt-3">Update</button>
</form>
</div>
</div>
I am trying to place <input type="file" class="form-control-file" name="company_logo" /> inside <div id="company_logo"></div> using jQuery.
I am using below jQuery code.
var fName = $("<input type=\"file\" class=\"form-control-file\" name=\"company_logo\" />");
$("#company_logo .ri-close-line").click(function() {
$("#company_logo").html(fName);
});
But this code is not working when I submit the Form.
Below code is working.
var fName = $("<input type=\"file\" class=\"form-control-file\" name=\"company_logo\" />");
$("#company_logo .ri-close-line").click(function() {
$("#buildyourform").append(fName);
});
How to attach a input element with a Form using jQuery ?

I want to show product items into shopping cart when i click add to card button using laravel 6.0?

I am trying to show product items into shopping cart when i click add to card button how to fix it error? Call to undefined function Gloudemans\Shoppingcart\array_get()
https://flareapp.io/share/B5ZeYg7o#F46
Controller
public function cart()
{
return view('frontend/cart');
}
public function addCart(Request $request)
{
$product = Product::findOrFail($request->id);
$cartItem = Cart::add([
'id' => $product->id,
'product_name' => $product->name,
'product_brand'=>$product->product_brand,
'qty' => $request->qty,
'product_price' => $product->product_price,
]);
Cart::associate($cartItem->rowId, 'App\Product');
return redirect()->route('cart.index');
}
}
model product
class product extends Model
{
protected $fillable =[ 'id', 'product_name', 'product_price',
'product_image',
'product_brand'];
}
html view
<tbody class="cart-table__body">
#foreach (Cart::content() as $item)
<tr class="cart-table__row">
<td class="cart-table__column cart-table__column--image">
<a href=""><img src="{{ asset($item->model->image) }}" alt="product">
</a>
</td>
<td class="cart-table__column cart-table__column--product">
{{$item->model->product_name}}
</td>
<td class="cart-table__column cart-table__column--price" data-title="Price">
{{$item->model->product_price}}</td>
<td class="cart-table__column cart-table__column--quantity" data-
title="Quantity">
<div class="input-number">
<input class="form-control input-number__input" type="number" min="1" value="
{{$item->qty}}">
<div class="input-number__add"></div>
<div class="input-number__sub"></div>
</div>
</td>
<td class="cart-table__column cart-table__column--total" data-title="Total">
</td>
<td class="cart-table__column cart-table__column--remove">
<a href="" class="btn btn-light btn-sm btn-svg-icon">
<svg width="12px" height="12px">
<use xlink:href="{{url('public/assets/images/sprite.svg#cross-12')}}"></use>
</svg>
</a>
</td>
</tr>
#endforeach
</tbody>
form html view
<form action="{{route('cart.action')}}" method="post"
class="product__options">
{{ csrf_field() }}
<input type="hidden" name="id" value="{{$single_products->id}}">
<input type="hidden" name="product_name" value="
{{$single_products->product_name}}">
<input type="hidden" name="product_image" value="
{{$single_products-
>product_image}}">
<input type="hidden" name="product_brand" value="
{{$single_products->product_brand}}">
<input type="hidden" name="product_price" value="
{{$single_products->product_price}}">
<div class="form-group product__option">
<label class="product__option-label" for="product-
quantity">Quantity</label>
<div class="product__actions">
<div class="product__actions-item">
<div class="input-number product__quantity">
<input id="product-quantity" name="qty" class="input-
number__input form-control
form-control-lg" type="number" min="1" value="1">
<div class="input-number__add"></div>
<div class="input-number__sub"></div>
</div>
</div>
<div class="product__actions-item product__actions-item--
addtocart">
<button class="btn btn-primary btn-lg">Add to
cart</button>
</div>
<div class="product__actions-item product__actions-item--
wishlist">
<button type="button" class="btn btn-secondary btn-svg-
icon btn-lg" data-
toggle="tooltip" title="Wishlist">
<svg width="16px" height="16px">
<use xlink:href="
{{url('public/assets/images/sprite.svg#wishlist-
16')}}"></use>
</svg>
</button>
</div>
<div class="product__actions-item product__actions-item--
compare">
<button type="button" class="btn btn-secondary btn-svg-
icon btn-lg" data-
toggle="tooltip" title="Compare">
<svg width="16px" height="16px">
<use xlink:href="
{{url('public/assets/images/sprite.svg#compare-16')}}">
</use>
</svg>
</button>
</div>
</div>
</div>
</form>
Route::get('/cart','CartController#cart')->name('cart.index');
Route::post('cart/action','CartController#addcart')-
name('cart.action');
Laravel introduced breaking changes around 5.8/6.0 wherein they removed a lot of the helper functions in favor of using the facades.
The problem is that this function:
arr_get()
which is the cause of the error, is unfortunately no longer part of the standard Laravel build. If it was in your own class, you could change this out to use the facade:
use Illuminate\Support\Arr;
and then in your method:
Arr::get();
Instead of changing the vendor code, you could check to see if you have the latest version of the shopping cart package, which would be compatable with Laravel's later versions... or you can add the helper package from Laravel that will bring back those helpers into your base Laravel distro.

Show Partial view in Bootstrap modal

I am creating MVC app and using Bootstrap Modal to give an opportunity to user to check input data, and to send those data to controller using Ajax. Modal window:
<div class="modal" tabindex="-1" role="dialog" id="myModal" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Check input data</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
#using (Ajax.BeginForm("SelectReservationDateTime", new AjaxOptions { UpdateTargetId = "divChangeRegion" }))
{
<div class="modal-body">
<table class="table">
<tr>
<td>Category name: </td>
<td><b>#Model.CategoryName </b></td>
</tr>
<tr>
<td>Date: </td>
<td><label id="SelectedDateTimeLabel"></label></td>
</tr>
<tr>
<td>Client name: </td>
<td><input type="text" name="ClientName" id="ClientName" value="#Model.ClientName" /></td>
</tr>
<tr>
<td>Client code: </td>
<td><input type="text" name="ClientCode" id="ClientCode" value="#Model.ClientCode" /></td>
</tr>
</table>
</div>
<input type="hidden" name="CategoryId" id="CategoryId" value="#Model.CategoryId" />
<input type="hidden" name="SelectedDateTime" id="SelectedDateTime" />
<div class="modal-footer" id="divChangeRegion">
<input type="submit" class="btn btn-info" value="OK" data-backdrop="static">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
}
</div>
</div>
</div>
And after pressing the submit button I execute controller's method which save inputed data in database and send back partial view, whcih I want to input in those Modal
Controller's code:
public ActionResult SelectReservationDateTime(ReservationTimeModel PartialViewModel)
{
...
return PartialView(newModel);
}
Partial view code:
#model EQueue.Data.Ticket
<div class="row">
<div class="col-md-4 offset-md-4">
<table>
<tr>
<td class="border" id="printThis">
You get ticket №<b>#Model.CodeTicket</b><br />
Category Name <br />
<b>"#Model.TicketCategory.NameCategory"</b><br />
</td>
</tr>
<tr>
<td><input type="button" class="btn btn-primary text-center" value="Print ticket" onclick="printTicket('printThis')" data-dismiss="modal"></td>
<td><input type="button">
</tr>
</table>
</div>
</div>
<script>
function printTicket(partForPrint)
{
var printContents = document.getElementById(partForPrint).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
But I get new window instead of creating partial view in existing Modal, can anybody help me?
Firstly I would change this line:
#using (Ajax.BeginForm("SelectReservationDateTime", new AjaxOptions { UpdateTargetId = "divChangeRegion" }))
To:
#using(Html.BeginForm(null, null, FormMethod.Post, new {id = "whatever"}))
Then have some jquery that uses the id of the form to check if it's been submitted. Once it has you should fire an ajax call to that method of yours that returns a partialview. To implement a partialview you need to specify a div where it will be place using an id and then in your success use this line of code to put the partialview into that div.
$("id of the div").html(result);

second page is not updating while using tr dir-paginate

I am using onaftersave() function to save the table data. In dir-paginate i am using ng-repeat to read the table row values. I kept itemsperpage is 5. obviously 6th row will be display in second Page. When I try to edit the second page row values it is not updating the second page rows. How to resolve it?
<form editable-form name="tableform1" oncancel="cancel()" onaftersave="saveTable(Manage_Role.Description)">
<div class="row">
<div class="col-xs-12">
<div class="panel panel-default panel-table">
<div class="panel-heading">
<div class="row">
<div class="col col-xs-6">
</div>
<div class="col col-xs-6 text-right">
<button type="button" data-toggle="modal" data-target="#myModal" class="btn btn-sm btn-primary btn-create" title="Add New Role">Add New Role</button>
</div>
</div>
</div>
<div class="panel-body scrollbar">
<table class="table table-striped table-bordered table-list">
<thead>
<tr>
<th style="width: 25%" align="center">
Name
</th>
<th style="width: 35%">
Description
</th>
<th style="width: 30% " align="center">
IsActive?
</th>
<th style="width: 10% " align="center"><a href="" ng-click="orderByField='IsActive';
reverseSort = !reverseSort" title="Assign">Assign</a></th>
<th style="width: 1%" align="center" ng-show="false">DirtyFlag</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" id="RoleNameID" ng-model="Manage_Role1.RoleName" placeholder="search" class="searchbox" onkeydown="return (event.keyCode!=13);"
/>
</td>
<td>
<input type="text" id="DescriptionID" ng-model="Manage_Role1.Description" placeholder="search" class="searchbox" onkeydown="return (event.keyCode!=13);"
/>
</td>
<td>
<select name="DropFilter" ng-model="Manage_Role1.IsActive" class="searchbox">
<option value="">All</option>
<option value=false>False</option>
<option value=true>True</option>
</select>
</td>
<!--<td></td>-->
</tr>
<tr dir-paginate="Manage_Role in Manage_Roleser | itemsPerPage:5 | filter:DropFilter | filter:Manage_Role1 | orderBy:orderByField:reverseSort "
ng-class-odd="'odd'">
<td ng-click="tableform1.$show()">
<span e-ng-change="applyHighlight($data,$index)" editable-text="Manage_Role.RoleName" ng-attr-title="{{Manage_Role.RoleName}}"
e-form="rowform" ng-click="rowform.$show()">
{{ Manage_Role.RoleName | uppercase }}
</span>
</td>
<td ng-click="tableform1.$show()">
<div>
<span e-ng-change="applyHighlight($data,$index)" editable-text="Manage_Role.Description" e-form="rowform" ng-attr-title="{{Manage_Role.Description}}"
ng-click="rowform.$show()">
{{ Manage_Role.Description || 'empty' }}
</span>
</div>
</td>
<td ng-click="tableform1.$show()" align="center">
<span e-ng-change="applyHighlight($data,$index)" ng-checked="Manage_Role.IsActive" editable-checkbox="Manage_Role.IsActive"
e-form="rowform" ng-click="applyHighlight($data,$index);tableform.$show()">
<input type="checkbox" ng-model="Manage_Role.IsActive" width="20" ng-attr-title="{{Manage_Role.IsActive}}" />
</span>
</td>
<td align="center">
<input type="image" data-toggle="modal" ng-click="Rolepopupclick(Manage_Role._id,Manage_Role.RoleName)" title="Assign UI"
data-target="#Div1" src="App_Themes/Images/AssignUser.png"
alt="Submit" width="28" height="28" />
</td>
<td ng-show="false">
<input type="text" ng-model="Manage_Role.DirtyFlag" ng-show="false" />
</td>
</tr>
</tbody>
</div>
</table>
</div>
<div class="panel-footer">
<div class="row">
<div class="col col-xs-8">
<dir-pagination-controls max-size="5" direction-links="true" boundary-links="true">
</dir-pagination-controls>
</div>
<div class="col col-xs-4">
<div class="btn-form" ng-show="tableform1.$visible" style="float:right">
<button type="submit" ng-disabled="tableform1.$waiting" title=" Save Changes" class="btn btn-primary fa fa-save" ng-click="NotifyClick()"> Save</button>
<input type="button" ng-disabled="tableform1.$waiting" title=" Close Edit Form Without Saving Changes" ng-click="refreshUI();tableform1.$cancel()"
class="btn btn-danger fa fa-close" value="X Cancel" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
controller code:
$scope.saveTable = function ()
{
debugger;
if(NotifyCount!=1){
var RoleNamechk = '';
for (var i = 0; i < $scope.Manage_Roleser.length; i++) {
RoleNamechk = $scope.Manage_Roleser[i].RoleName;
for (var j = 0; j < $scope.Manage_Roleser.length; j++) {
var RoleName = $scope.Manage_Roleser[j].RoleName;
if (RoleNamechk == RoleName) {
count++;
}
}
}
if (count == $scope.Manage_Roleser.length)
{
for (var i = 0; i < $scope.Manage_Roleser.length; i++) {
var id = $scope.Manage_Roleser[i]._id;
var rolename = $scope.Manage_Roleser[i].RoleName;
var isactive = $scope.Manage_Roleser[i].IsActive;
var description = $scope.Manage_Roleser[i].Description;
if (description == "")
{
description = 'empty';
}
if ($scope.Manage_Roleser[i].DirtyFlag == "True")
{
$scope.LoggedinUsers = $cookieStore.get('LoggedinUser');
var updatedBy= $scope.LoggedinUsers;
$http.put('/Roleupdate/' + id + '/' + rolename + '/' + isactive + '/' + description + '/' + updatedBy).then(function (response) {
refresh();
});
}
count=0;
}
$notify.success('Success', 'Role is Updated Successfully');
}
else {
$notify.warning('Warning', 'Role Name is Already Exists');
count = 0;
return '';
}
}
};
in ng-change I am checking dirty flag of selected index because it is updating all the row values. for that I am updating only selected($dirty) row alone. In second page it is not taking table index correctly. If I select 2nd page 3 row it will assume or taking index of the particular page. It should take index of selected row from the over all table row
$scope.applyHighlight = function ($data,index) {
$scope.Manage_Roleser[index].DirtyFlag = "True";
var dataSpan = $(event.currentTarget).closest('td');
if (!dataSpan.hasClass("highlighted")) {
$(dataSpan).addClass("highlighted");
}
}