im building a project with angular and php and im trying to delete a row from database table. i don't know what to do with this error can someone help please? this is my code
php for retrieve- get-allCustomers.php
<?php header('Content-Type: text/html; charset=utf-8');
$con = mysqli_connect('localhost','root','','hamatkin');
if(!$con){
die("couldnt connect".mysqli_error);
}
$query = "SELECT `customer_id`, `kind_Of_Customer`, `first_name`, `last_name`, `id`, `city` FROM `customers`";
$result = $con->query($query);
$r = array();
if( $result->num_rows>0){
while($row = $result->fetch_assoc()){
$r[] = $row;
}
}
$res = json_encode($r);
echo json_encode($res);
?>
html code for retrieveing:
<!DOCTYPE html>
<html >
<head >
</head>
<body>
<h2>כרטיסי לקוחות</h2>
<!-- לחץ לפרטי כרטיס לקוח -->
<div class="search">
<label>חיפוש:</label>
<input type="text" ng-model="search_query">
<label>מיון לפי:</label>
<select ng-model="order_query">
<option value="kind_Of_Customer" >סוג לקוח</option>
<option value="first_name">שם</option>
<option value="id">ת"ז</option>
</select>
<label>מיון הפוך:</label>
<input type="checkbox" ng-model="reverse_query" value="reverse" >
</div>
<div class="table-responsive">
<table class="customer-list table table-striped">
<thead>
<tr>
<!-- <th>#</th> -->
<th class="Column-Header">מספר לקוח</th>
<th class="Column-Header">סוג לקוח</th>
<th class="Column-Header">שם פרטי</th>
<th class="Column-Header">שם משפחה</th>
<th class="Column-Header">ת.ז</th>
<th class="Column-Header">עיר</th>
<!-- <th>כתובת</th> -->
<!-- <th>מס' טלפון</th> -->
<!-- <th>מס' טלפון 2</th> -->
<!-- <th>אימייל</th> -->
<!-- <th>פקס</th> -->
<!-- <th>הופנה דרך</th> -->
<!-- <th>הערות</th> -->
</tr>
</thead>
<tbody>
<tr ng-repeat="x in customers | filter:search_query | orderBy: order_query:reverse_query">
<!-- <td>{{$index + 1}}</td> -->
<td>{{ x.customer_id}}</td>
<td>{{ x.kind_Of_Customer}}</td>
<td>{{ x.first_name }}</td>
<td>{{ x.last_name }}</td>
<td> {{ x.id}} </td>
<td> {{ x.city}} </td>
<td><button ng-click="delete(customers.customer_id, $index)">Delete</button><td>
<!-- <td> {{ x.address}} </td> -->
<!-- <td> {{ x.phone}} </td> -->
<!-- <td> {{ x.phone_2}} </td> -->
<!-- <td> {{ x.email}} </td> -->
<!-- <td> {{ x.fax}} </td> -->
<!-- <td> {{ x.referrer}} </td> -->
<!-- <td> {{ x.comments}} </td> -->
</tr>
</tbody>
</table>
</div>
</body>
</html>
php - deleteCustomer.php :
<?php error_reporting(E_ALL); ini_set('display_errors', 1);
$connect=mysqli_connect('localhost', 'root', '', 'hamatkin');
if(isset($_GET['customer_id'])){
$id=$_GET['customer_id'];
$del="DELETE FROM customers WHERE customer_id='".$id."'";
mysqli_query($connect,$del);
}
?>
controller - this controller get all customers table data and showing it. it works fine. the rest is what i tried for delete.:
"use strict";
angular.module('dataSystem').controller('customerCardsCtrl', function($scope,$route,$location,$http) {
$http({method:'GET', url:'api/get-allCustomers.php/'})
.then(function(response) {
var arr = JSON.parse(JSON.parse(response.data));
$scope.customers = arr;
})
// This will log you the error code and trace, if there is an error.
.catch(function(err) {
console.log('err', err)
});
$scope.delete = function(deletingId, index){
var params = $.param({"customer_id":deletingId})
$http({
url: "api/deleteCustomer.php",
method:"GET",
data:params
}).success(function(data){
$scope.customers = data;
$scope.customers.splice(index,1);
console.log(data)
});
}
Replace $scope.data.splice(index, 1); with simply data.slice(index, 1);
The data being returned doesn't live in $scope.
Initialize a $scope.variable = []; outside the scope of the function and then
.success(function(data){
$scope.variable = data;
$scope.variable.splice(index,1);
});
I think what you are trying to do in the success callback is to remove the deleted customer from the view.
Try with.
$scope.customers.splice(index,1);
in the success callback
Related
Laravel 8 with User & teamwork together
I am working on data-table javascript, and controller but the error is still there, and it bugged me as I am not knowledgeable with laravel as I only work on laravel for one month (it's perfect code and way better than WordPress PHP). I look at details on google, but most of them are details write dropdowns based on the hardcode selection list.
I'm using
<label for="selectTeam">{{ __('Team')}}</label>
<select class="form-control" id="selectTeam">
#foreach($teamlistfliter as $row)
<option>{{ $row->team }}</option>
#endforeach
</select>
and it is working fine and but not related to data table show user in the list
but when I want this dropdown can query to list of users, that where it became error
here are the controller pages I wrote
class TeamUserListController extends Controller
{
public function index(Request $request)
{
if ($request->ajax())
{
$teamlistfliter = User::join('teams', 'teams.id', '=', 'users.current_team_id')
->get(['users.name as username', 'teams.name as team', 'users.firstname as first_name', 'users.surname as surname']);
return Datatables::of($teamlistfliter)
->filter(function ($instance) use ($request) {
if ($request->get('team') == '0' || $request->get('team') == '1') {
$instance->where('team', $request->get('team'));
}
if (!empty($request->get('search'))) {
$instance->where(function($w) use($request){
$search = $request->get('search');
$w->orWhere('name', 'LIKE', "%$search%")
->orWhere('email', 'LIKE', "%$search%");
});
}
})
->rawColumns(['team'])
->make(true);
}
return view('teamlistfliter');
}
}
and blade pages
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-header d-block">
<div class="col-md-6">
<div class="form-group">
<label for="selectTeam">{{ __('Team')}}</label>
<select class="form-control" id="selectTeam">
#foreach($teamlistfliter as $row)
<option>{{ $row->team }}</option>
#endforeach
</select>
</div>
</div>
</div>
<div class="card-body">
<div class="dt-responsive">
<table id="simpletable"
class="table table-striped table-bordered nowrap">
<thead>
<tr>
<th>{{ __('First Name')}}</th>
<th>{{ __('Surname')}}</th>
<th>{{ __('Username')}}</th>
<th>{{ __('Team')}}</th>
</tr>
</thead>
<tbody>
#foreach($teamlistfliter as $row)
<tr>
<td>{{ $row->first_name }}</td>
<td>{{ $row->surname }}</td>
<td>{{ $row->username }}</td>
<td>{{ $row->team }}</td>
</tr>
#endforeach
</tbody>
<tfoot>
<tr>
<th>{{ __('First Name')}}</th>
<th>{{ __('Surname')}}</th>
<th>{{ __('Username')}}</th>
<th>{{ __('Team')}}</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- push external js -->
#push('script')
<script src="{{ asset('plugins/DataTables/datatables.min.js') }}"></script>
<script src="{{ asset('js/datatables.js') }}"></script>
<script type="text/javascript">
$(function () {
var table = $('#selectTeam').DataTable({
processing: true,
serverSide: true,
ajax: {
url: "{{ route('teamlistfliter.index') }}",
data: function (d) {
d.approved = $('#selectTeam').val(),
d.search = $('input[type="search"]').val()
}
},
columns: [
{data: 'firstname', name: 'firstname'},
{data: 'surname', name: 'surname'},
{data: 'username', name: 'username'},
{data: 'email', name: 'email'},
{data: 'team', name: 'team'},
]
});
$('#selectTeam').change(function(){
table.draw();
});
});
</script>
#endpush
#endsection
I fear I miss something as I assume the issue is $teamlistfilter outside the statement.
[2021-09-03 19:28:18] local.ERROR: Undefined variable: teamlistfliter (View: C:\Ergnation-rowing\resources\views\teamlistfliter.blade.php) {"view":{"view":"C:\\Ergnation-rowing\
esources\\views/teamlistfliter.blade.php","data":{"errors":"<pre class=sf-dump id=sf-dump-1080913330 data-indent-pad=\" \"><span class=sf-dump-note>Illuminate\\Support\\ViewErrorBag</span> {<a class=sf-dump-ref>#1449</a><samp data-depth=1 class=sf-dump-expanded>
#<span class=sf-dump-protected title=\"Protected property\">bags</span>: []
</samp>}
</pre><script>Sfdump(\"sf-dump-1080913330\", {\"maxDepth\":3,\"maxStringLength\":160})</script>
"}},"userId":1,"exception":"[object] (Facade\\Ignition\\Exceptions\\ViewException(code: 0): Undefined variable: teamlistfliter (View: C:\\Ergnation-rowing\
esources\\views\\teamlistfliter.blade.php) at C:\\Ergnation-rowing\
esources\\views/teamlistfliter.blade.php:45)
Try get basic value from controller and use JavaScript to write on blade pages
public function index()
{
$teamlistfliter = User::join('teams', 'teams.id', '=', 'users.current_team_id')
->get(['users.name as username', 'teams.name as team', 'users.firstname as first_name', 'users.surname as surname']);
return view('teamlistfliter', compact('teamlistfliter'));
}
and use JavaScript on blade pages
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-header d-block">
<h3>{{ __('Team')}}</h3>
<div class="Team-filter">
<select id="TeamFilter" class="form-control">
<option value="">Show All</option>
#foreach($teamlistfliter as $row)
<option>{{ $row->team }}</option>
#endforeach
</select>
</div>
</div>
<div class="card-body">
<div class="dt-responsive">
<table id="filterTable"
class="table table-striped table-bordered nowrap">
<thead>
<tr>
<th>{{ __('First Name')}}</th>
<th>{{ __('Surname')}}</th>
<th>{{ __('Username')}}</th>
<th>{{ __('Team')}}</th>
</tr>
</thead>
<tbody>
#foreach($teamlistfliter as $row)
<tr>
<td>{{ $row->first_name }}</td>
<td>{{ $row->surname }}</td>
<td>{{ $row->username }}</td>
<td>{{ $row->team }}</td>
</tr>
#endforeach
</tbody>
<tfoot>
<tr>
<th>{{ __('First Name')}}</th>
<th>{{ __('Surname')}}</th>
<th>{{ __('Username')}}</th>
<th>{{ __('Team')}}</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- push external js -->
#push('script')
<script src="{{ asset('plugins/DataTables/datatables.min.js') }}"></script>
<script src="{{ asset('js/datatables.js') }}"></script>
<script>
$("document").ready(function () {
$("#filterTable").dataTable({
"searching": true
});
//Get a reference to the new datatable
var table = $('#filterTable').DataTable();
//Take the Team filter drop down and append it to the datatables_filter div.
//You can use this same idea to move the filter anywhere withing the datatable that you want.
$("#filterTable_filter.dataTables_filter").append($("#TeamFilter"));
//Get the column index for the Team column to be used in the method below ($.fn.dataTable.ext.search.push)
//This tells datatables what column to filter on when a user selects a value from the dropdown.
//It's important that the text used here (Team) is the same for used in the header of the column to filter
var TeamIndex = 0;
$("#filterTable th").each(function (i) {
if ($($(this)).html() == "Team") {
TeamIndex = i; return false;
}
});
//Use the built in datatables API to filter the existing rows by the Team column
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var selectedItem = $('#TeamFilter').val()
var Team = data[TeamIndex];
if (selectedItem === "" || Team.includes(selectedItem)) {
return true;
}
return false;
}
);
//Set the change event for the Team Filter dropdown to redraw the datatable each time
//a user selects a new filter.
$("#TeamFilter").change(function (e) {
table.draw();
});
table.draw();
});
</script>
#endpush
#endsection
that should should be working
This is what I'm looking for and thank you so much!
I'm trying to get the selected value from a dropdown in my view through my controller, but it's always returning null. I really don't know why.
Here is my select dropdown:
UPDATED: Here is my full blade view!
#extends('backpack::layout')
#section('header')
<section class="content-header">
<h1>
<span class="text-capitalize">Thành tích tốt nhất ngày</span>
</h1>
<ol class="breadcrumb">
<li>Admin</li>
<li>Thành tích tốt nhất ngày</li>
<li class="active">List</li>
</ol>
</section>
#endsection
#section('content')
<form method="GET">
Lọc round:
<select id="tablefilter" name="tablefilter">
<option value="0">Hiện tại</option>
#foreach($max as $item)
<option value="{{$item->countRound}}">{{$item->countRound}}</option>
#endforeach
</select>
</form>
<table id="currentRound" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Câu lạc bộ</th>
<th>Quãng đường</th>
<th>Quãng đường trung bình</th>
<th>Xếp hạng</th>
<th>Số thành viên</th>
<th>Ngày xếp hạng</th>
</tr>
</thead>
<tbody>
#foreach ($result as $item)
<tr>
<td>{{$item->name}}</td>
<td align="right">{{number_format($item->total_distance/1000, 2)}} km</td>
<td align="right">{{number_format($item->avg_distance/1000, 2)}} km</td>
<td align="right">{{number_format($item->rank)}}</td>
<td align="right">{{$item->total_member}}</td>
<td>{{$item->created_at}}</td>
</tr>
#endforeach
</tbody>
</table>
<script>
$(document).ready(function () {
$('#currentRound').DataTable({
"paging" : true,
"aaSorting": [[3, 'asc']],
"dom": '<"top"f>rt<"bottom"lp><"clear">',
});
});
</script>
#endsection
#section('after_styles')
<!-- DATA TABLES -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<!-- CRUD LIST CONTENT - crud_list_styles stack -->
#stack('crud_list_styles')
#endsection
#section('after_scripts')
<script type="text/javascript" charset="utf8"
src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8"
src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap.min.js"></script>
#endsection
And in my controller:
public function index(Request $request) {
$round = $request->input('tablefilter');
//dd($round);
$mMile = new MilestoneEarth();
$max = $mMile->getRound();
return view('admin.cacheClubEarth.index',['result' => $result, 'max' => $max]);
}
It's return [] with $request->all() and null with $request->tablefilter
I really don't know how to do with this!
Can you help me!
Thank you very much!
You can do : dd(request->all()); for check the data.
I think you don't have to use the input function. Try this :
$round = $request->tablefilter;
you need to send the form value either submit using button or use ajax for it
here the basic submitting data via form (i specified action in case you go to different page)
<form method="GET" action="{{url('/to/index/controller/you-want')}}>
Lọc round:
<select id="tablefilter" name="tablefilter">
<option value="0">Hiện tại</option>
#foreach($max as $item)
<option value="{{$item->countRound}}">{{$item->countRound}}</option>
#endforeach
</select>
<button class="something">Update</button>
</form>
#foreach($max as $item)
<option value="{{$item}}">{{$item}}</option>
#endforeach
I am working on a Symfony project where I have a product entity and I need an Ajax search bar to search for through my products and select some of them. The problem is I have a search bar which gives me live results from the database but if I select the product it should show the data in my table. For some reason I am not able to show the selected results in my table.
js
$('.js-data-example-ajax').select2({
ajax: {
url: '/product/api/search',
dataType: 'json',
}
});
Controller
public function viewActionSearch(Request $request)
{
$query = $request->get('term');
$result = [
'results' => [],
];
if ($query !== null){
$products = $this->productRepository->getSearchList($query);
$result['results'];
foreach ($products as $product) {
$result['results'][] = [
'id' => $product['id'],
'text' => $product['name'],
];
}
} else {
$products = $this->productRepository->getResultList(1);
foreach ($products as $entity) {
$result['results'][] = [
'id' => $entity['id'],
'text' => $entity['name'],
];
}
}
return new JsonResponse($result);
}
ProductList
public function getPage(Request $request)
{
$products = $this->productRepository->getAllProducts($currentPage);
return $this->render(
'#app_bar/Product/productList.twig',
[
'products' => $products,
]
);
}
Twig
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- select2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/gh/ttskch/select2-bootstrap4-theme#master/dist/select2-bootstrap4.min.css" rel="stylesheet">
<div class="container mt-5">
<form>
<div class="form-group">
<select class="js-data-example-ajax form-control"></select>
</select>
</div>
</form>
</div>
<table class="table table-hover table-responsive">
<thead>
<tr>
<th>id</th>
<th>Title</th>
<th>SKU</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for product in products %}
<tr>
<td>
{{ product.id }}
</td>
<td>
{{ product.name }}
</td>
<td>
{{ product.sku }}
</td>
<td>
<a href="{{ path('app_product_getproduct', {'id': product.id}) }}" class="btn btn-success btn-sm" >
<span class="glyphicon glyphicon-pencil"></span>
</a>
<a href="{{ path('app_product_delete', {'id': product.id}) }}" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure?')">
<span class="glyphicon glyphicon-trash"></span>
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
If I visit the route /product/api/search/ it's giving my a result back but i am not able to show these selected products in my table.
You missing something here. Symfony does not work like frontend frameworks like vue.js or similar. What you are doing you are rendering serverside request and after that, you just fetch data via AJAX and you do nothing with that data. jQuery needs instructions on what to do with data you get from the server. You can always use Symfony alongside some frontend framework, but you need to understand the difference when serverside renders your twig template and when frontend framework renders it.
http://api.jquery.com/jquery.ajax/
Hint:
$('.js-data-example-ajax').select2({
ajax: {
url: '/product/api/search',
dataType: 'json',
success: function (data) {
$.each(response, function () {
$('#mytable').append('<tr><td>' + this.product_name + '</td><td>' + this.product_price + '</td></tr>');
});
}
}
});
There are different methods of what you can render, you can reload whole table or just rows that you need.
I'm new to AngularJS and I'm trying to get one of my routed pages to load data from a MySQL database. After looking online at a few different tutorials, I seem to be doing something wrong and can't figure out why it's not working.
INDEX PAGE:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="/angtest/">
<title>AngularJS Test</title>
</head>
<body ng-app="myApp">
<p>
Home - About - Items
<br>
Click on the links to go to new pages.
</p>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular-route.js"></script>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(['$routeProvider','$locationProvider',
function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when("/", {
templateUrl : "home.html"
}).when("/home", {
redirectTo : "/"
}).when("/about", {
templateUrl : "about.html"
}).when("/items", {
templateUrl : "items.html",
controller : "usercontroller"
}).otherwise({
redirectTo : "/"
});
}]);
app.controller("usercontroller", function($scope, $http){
$http.get("select.php")
.then(function(data){
$scope.items = data;
});
});
</script>
</body>
</html>
When going to /home, /about or /items, the pages load correctly, but /items isn't grabbing the database information.
Title and description are the columns from the items table I would like shown.
ITEMS PAGE:
<h1>MySQL Database</h1>
<div ng-controller="usercontroller">
<table>
<tr>
<th>Item Name</th>
<th>Item Description</th>
</tr>
<tr ng-repeat="x in items">
<td>{{ x.title }}</td>
<td>{{ x.description }}</td>
</tr>
</table>
</div>
SELECT SCRIPT:
<?php
$connect = mysqli_connect("localhost", "USERNAME", "PASSWORD", "DBNAME");
$output = array();
$query = "SELECT * FROM items";
$result = mysqli_query($connect, $query);
if(mysqli_num_rows($result) > 0) {
while($row = mysqli_fetch_array($result)) {
$output[] = $row;
}
echo json_encode($output);
}
?>
In the console window, no errors show up.
UPDATE
To check the console window, I changed my controller to:
app.controller("usercontroller", function($scope, $http){
$http.get("select.php")
.then(function(data){
console.log(data);
$scope.items = data;
});
});
The log is showing:
Item page
<h1>MySQL Database</h1> <div> <table> <tr> <th>Item Name</th> <th>Item Description</th> </tr> <tr ng-repeat="x in items"> <td>{{ x.title }}</td> <td>{{ x.description }}</td> </tr> </table> </div>
So I am using angularjs to display contents that are retrieved from mySQL. I am trying to create a pagination with angularjs to display them a certain amount of them at each page. My problem is that in the VIEW, it displays the contents based on the limit I defined in the controller, however, it is not displaying the page numbers that I can use to navigate through the pages. any thoughts???
Here is my code:
<!-- the VIEW -->
<div class="container testing" ng-controller="musicControl">
<table>
<tr ng-repeat="post in posts | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
<td style="padding:15px">{{ post.postType }}</td>
<td style="padding:15px">{{ post.postTitle | uppercase }}</td>
<td style="padding:15px">{{ post.postDescription }}</td>
<td style="padding:15px">{{ post.postDate | date }}</td>
<td style="padding:15px">
<?php
include "functions.php";
placeMusic('{{ post.src | trustAsResourceUrl }}');
?>
</td>
</tr>
</table>
<div ng-show="filteredItems > entryLimit">
<div pagination="" page="currentPage"
on-select-page="setPage(page)"
boundary-links="true" total-items="filteredItems"
items-per-page="entryLimit"
class="pagination-small" previous-text="«"
next-text="»">
</div>
</div>
<br>
</div>
Module -->
var app = angular.module("myApp", ["ngRoute"]);
<!-- controller -->
app.controller('musicControl', function($scope, $http) {
$http.get("pages/db_section/music.php")
.then(function (response) {
$scope.posts = response.data.records;
$scope.currentPage = 1; //current page
$scope.entryLimit = 2; //max no of items to display in a page
$scope.filteredItems = $scope.posts.length; //Initially for no filter
$scope.totalItems = $scope.posts.length;
});
$scope.setPage = function(pageNo) {
$scope.currentPage = pageNo;
};
});
<!-- filter -->
app.filter('trustAsResourceUrl', ['$sce', function($sce) {
return function(val) {
return $sce.trustAsResourceUrl(val);
};
}]);
app.filter('startFrom', function() {
return function(input, start) {
if(input) {
start = +start; //parse to int
return input.slice(start);
}
return [];
}
});