laravel datatables html builder not sending ajax request - laravel

View
#extends('dashboard.app' , ['title'=>'Faculties'] )
#section('body')
<div class="d-grid gap-2 d-md-flex justify-content-md-end ">
<!-- Button trigger modal -->
<button class="btn btn-outline-success me-md-2 rounded-pill" data-bs-toggle="modal"
data-bs-target="#addBtn" style="width:80px;" type="button"> + Add
</button>
</div>
<br>
#if(session()->has('message'))
#if(session('type') =='error')
<div class="alert alert-light-danger alert-dismissible fade show" role="alert">
{{ session('message') }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"
aria-hidden="true"></button>
</div>
#endif
#if(session('type') == 'success')
<div class="alert alert-light-success alert-dismissible fade show" role="alert">
{{ session('message') }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"
aria-hidden="true"></button>
</div>
#endif
#endif
{!! $html->table([],true) !!}
{{--Create Faculty Table --}}
{{-- <table class="table table-striped table-hover table-bordered col-12 shadow p-3 mb-5 rounded">--}}
{{-- <thead>--}}
{{-- <tr>--}}
{{-- <th scope="col" class="col-1"> SR NO</th>--}}
{{-- <th scope="col" class="col-6"> Faculty Name--}}
{{-- <span style="text-align:right;">--}}
{{-- <i class="bi bi-arrow-up-circle-fill "--}}
{{-- data-toggle="tooltip" data-placement="top" title="Sort Ascending order">--}}
{{-- </i>--}}
{{-- <i class="bi bi-arrow-down-circle-fill "--}}
{{-- data-toggle="tooltip" data-placement="top" title="Sort Descending order">--}}
{{-- </i>--}}
{{-- </span>--}}
{{-- </th>--}}
{{-- <th scope="col" class="col-1"> No Of Departments</th>--}}
{{-- <th scope="col" class="col-3" style="text-align: right;"> Actions &nbsp</th>--}}
{{-- </tr>--}}
{{-- </thead>--}}
{{-- <tbody>--}}
{{-- #foreach( $faculties as $faculty)--}}
{{-- <tr>--}}
{{-- --}}{{-- <input type="hidden" class="deleteValueID" value="{{ $counter }}">--}}
{{-- <td scope="row"> {{ $faculty->id }} </td>--}}
{{-- --}}{{-- <input type="hidden" class="deleteValue" value="{{ $faculty->name }}">--}}
{{-- <td class="overflow-hidden" data-toggle="tooltip" data-placement="top"--}}
{{-- title="{{ $faculty->name }}">--}}
{{-- {{ $faculty->name }} </td>--}}
{{-- <td> {{ $faculty->departments->count() }} </td>--}}
{{-- <td class="d-md-flex justify-content-md-end ">--}}
{{-- <button type="" class="btn btn-outline-success rounded-circle btn-sm"--}}
{{-- data-toggle="tooltip" data-placement="top" title="Add Departments">--}}
{{-- <i class="bi bi-file-plus"> </i></button>--}}
{{-- &nbsp--}}
{{-- <button type="" class="btn btn-outline-primary rounded-circle btn-sm editData"--}}
{{-- data-bs-toggle="modal"--}}
{{-- data-bs-target="#editModal"--}}
{{-- data-toggle="tooltip"--}}
{{-- data-placement="top"--}}
{{-- title="Edit Faculty">--}}
{{-- <i class="bi bi-pen"> </i></button>--}}
{{-- &nbsp--}}
{{-- --}}{{-- <form action="{{ url('admin/faculties', $faculty->id) }}" method="post">--}}
{{-- <form action="{{ route('faculties.destroy', $faculty->id) }}" method="post">--}}
{{-- #csrf--}}
{{-- #method('delete')--}}
{{-- <button type="submit"--}}
{{-- onclick="return confirm('Do you want to delete {{ $faculty->name }} ')"--}}
{{-- class="btn btn-outline-danger rounded-circle btn-sm deletebtn"--}}
{{-- data-toggle="tooltip" data-placement="top" title="Delete Faculty">--}}
{{-- <i class="bi bi-trash"> </i></button>--}}
{{-- </form>--}}
{{-- &nbsp--}}
{{-- <a href="{{ url('admin/faculties', $faculty->id) }}"--}}
{{-- class="btn btn-outline-secondary rounded-circle btn-sm"--}}
{{-- data-toggle="tooltip" data-placement="top" title="View">--}}
{{-- <i class="bi bi-eye-fill"> </i> </a>--}}
{{-- </td>--}}
{{-- </tr>--}}
{{-- #endforeach--}}
{{-- </tbody>--}}
{{-- </table>--}}
{{-- Faculty Table Ended --}}
{{-- </div>--}}
#endsection
#push('scripts')
{!! $html->scripts() !!}
#endpush
app
<!DOCTYPE html>
<html>
#include('dashboard.head_section', ['title' => "$title"])
<body class="bg-light">
<div class="row" id="app">
#include('dashboard.navbar')
<div class="col-10" id="main">
<!-- header image and heading -->
#include('dashboard.header')
{{-- Main body of users list page started--}}
<div class="card ">
<div class="card-header">
<h2 class="font-weight-bold" style="font-weight: bold;">{{ $title }}</h2>
</div>
<div class="card-body">
#section('body')
#show
</div>
</div>
</div>
</div>
</body>
</html>
Controller
if (request()->ajax()) {
// dd('test');
return DataTables::of(Faculty::query())
->setRowClass(function ($faculty){
return $faculty->id % 2 == 0 ? 'alert-success' : 'alert-warning';
})
->setRowId(function ($faculty){
return $faculty->id;
})
->setRowAttr([
'align' => 'center'
])
->addColumn('action', '<button>kljsfd b</button>')
->editColumn('created_at', function($faculty){
return $faculty->created_at->diffForHumans();
})
->editColumn('updated_at', function($faculty){
return $faculty->updated_at->diffForHumans();
})
->make(true);
}
$html = $builder
->parameters([
'searching' => true,
'deferRender' => true,
'scrollY' => true,
'stateSave' => true,
'pagingType' => 'full_numbers',
'renderer' => 'bootstrap',
'scrollCollapse' => true,
// 'search.search' => 'Fac'
'fixedHeader.header' => true,
'responsive' => true,
// 'scroller' => true,
// 'scrollY' => 450,
'select' => true,
'select.className' => 'alert alert-success',
'select.blurable' => true,
// 'drawCallback' => 'function() { alert("Table Draw Callback") }',
// 'initComplete' => "function () {
// this.api().columns().every(function () {
// var column = this;
// var input = document.createElement(\"input\");
// $(input).appendTo($(column.footer()).empty())
// .on('keyup', function () {
// column.search($(this).val(), false, false, true).draw();
// });
// });
// }",
])
->columns([
['data' => 'id', 'name' => 'id', 'title' => 'Sr. #'],
['data' => 'name', 'name' => 'name', 'title' => 'Name'],
['data' => 'created_at', 'name' => 'created_at', 'title' => 'Created At'],
['data' => 'updated_at', 'name' => 'updated_at', 'title' => 'Updated At'],
['data' => 'action', 'name' => 'action', 'title' => 'Action', 'orderable' => false, 'printable' => false],
]);
return view('admin.faculties.index', compact('html'));
Page is visible table is rendering too but theres no ajax request
Head
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>STMS - {{ $title }} </title>
<link rel="stylesheet" href="{{ asset('assets/bootstrap5/css/bootstrap.min.css') }}">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="{{ asset('assets/bootstrap5/js/bootstrap.min.js') }}"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<link rel="stylesheet" href="{{ asset('assets/bootstrap5/custom.css') }}">
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/datatables/datatables.min.css') }}">
<script src="{{ asset('assets/datatables/datatables.min.js') }}"></script>
</head>
Same thing works on other project and on other page in same project...
Working one...
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML Builder</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/datatables/datatables.min.css') }}">
<script src="{{ asset('assets/datatables/datatables.min.js') }}"></script>
</head>
<body>
<div class="container">
#section('contents')
#show
</div>
#stack('scripts')
</body>
</html>
#extends('test.app')
#section('contents')
{!! $html->table([],true) !!}
#endsection
#push('scripts')
{!! $html->scripts() !!}
#endpush
htmlBuilder
#extends('test.app')
#section('contents')
{!! $html->table([],true) !!}
#endsection
#push('scripts')
{!! $html->scripts() !!}
#endpush
Conrtoller is same
On same controller it works on one file but not on other file...
I have tried to replace all js and bootstrap through CDN and copy pasted same of working one but same issue... it also do not give any error...

Related

move data from 1 table to another table in laravel 8

As indicated I have 2 tables that have similar content... the only difference is the 'watchlist has an extra 'reason field
what I'm trying to achieve is moving the selected data from 1 table to another table and adding ...
so the process is like
I need to select the row of data and click the button 'add to watchlist ' and input the 'reason' then submit the form. but after I have to click the submit button the following error occurs.. may I ask what part I miss? sorry, I'm just new in Laravel .. Really appreciate any help.
here is my controller
public function AddToWatchlist(Request $request, $id)
{
$watchlist = new watchlist();
//Select the data from visitor
$record = DB::table('visitors')
->select('firstname')
->select('lastname')
->select('email')
->select('phonenumber')
->where('id',$id)
->first();
//Insert data from visitor to watchlist
DB::table('watchlist')->insert([
'firstname' => $record->firstname,
'lastname' => $record->lastname,
'email' => $record->email,
'phonenumber' => $record->phonenumber,
'reason' => $request->reason
]);
//Delete the data from visitor after shifted
$record->delete();
$watchlist->save();
return redirect('visitor.visitorlist')>with('status','Student Image Added Successfully' );
}
my viewpage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
#if(session('status'))
<h6 class="alert alert-success">{{ session('status') }}</h6>
#endif
<div class="card">
<div class="card-header">
<h4> Visitor List</h4>
Add Visitor
<a href="{{ url('addwatchlist') }}" class="btn btn-primary float-end" data-bs-toggle="modal" data-bs-target="#exampleModal">
Add to watchlist
</a>
</div>
<div class="card-body">
<table class="table table-borderd table-striped">
<thead>
<tr>
<th>#</th>
<th>ID</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Phone number</th>
</tr>
</thead>
<tbody>
#foreach($visitor as $item)
<tr>
<td><input class="form-check-input" type="checkbox" value="" id="flexCheckDefault"></td>
<td>{{ $item->id}}</td>
<td>{{ $item->firstname}}</td>
<td>{{ $item->lastname}}</td>
<td>{{ $item->email}}</td>
<td>{{ $item->phonenumber}}</td>
<!-- <td>
<form action="{{ url('delete-student/'.$item->id) }}" method="POST">
#csrf
#method('DELETE')
<button type="submit" class="btn btn-danger">Delete</button>`
</form>
</td> -->
</tr>
#endforeach
</tbody>
</table>
<!-- Modal -->
<form action="{{ url('addtowatch/'.$visitor->id) }}" method="POST">
#csrf
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<label for="reason"> Indicate the reason for adding to watchlist</label>
<input type="text" name="reason " class="form-control" name="reason">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy" crossorigin="anonymous"></script>
</body>
</html>
my web.php code
Route::post('addtowatch/{id}', [WatchlistController::class, 'AddToWatchlist']);
update new problem
now the problem are being solve but there is no error ,on getting the property item of 'firstname'.. any idea ?

ok i got your point.
Please use the laravel comment {{-- body --}} instead of the because it is the blade template engine, not your html file.
Your mistake is that you call the modal outside your foreach loop,
so that the visitor id not found because it is the array not model.
so...
Replace your blade file code with this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
#if (session('status'))
<h6 class="alert alert-success">{{ session('status') }}</h6>
#endif
<div class="card">
<div class="card-header">
<h4> Visitor List</h4>
Add Visitor
<a href="{{ url('addwatchlist') }}" class="btn btn-primary float-end" data-bs-toggle="modal"
data-bs-target="#exampleModal">
Add to watchlist
</a>
</div>
<div class="card-body">
<table class="table table-borderd table-striped">
<thead>
<tr>
<th>#</th>
<th>ID</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Phone number</th>
</tr>
</thead>
<tbody>
#foreach ($visitor as $item)
<tr>
<td><input class="form-check-input" type="checkbox" value=""
id="flexCheckDefault"></td>
<td>{{ $item->id }}</td>
<td>{{ $item->firstname }}</td>
<td>{{ $item->lastname }}</td>
<td>{{ $item->email }}</td>
<td>{{ $item->phonenumber }}</td>
{{-- <td>
<form action="{{ url('delete-student/'.$item->id) }}" method="POST">
#csrf
#method('DELETE')
<button type="submit" class="btn btn-danger">Delete</button>`
</form>
</td> --}}
</tr>
<!-- Modal -->
<form action="{{ url('addtowatch/' . $item->id) }}" method="POST">
#csrf
<div class="modal fade" id="exampleModal" tabindex="-1"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title
</h5>
<button type="button" class="btn-close"
data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<label for="reason"> Indicate the reason for adding to
watchlist</label>
<input type="text" name="reason " class="form-control"
name="reason">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save
changes</button>
</div>
</div>
</div>
</form>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.min.js"></script>
</body>
</html>

Twitter API app, does not showing pictures or videos

I created Twitter API app in Laravel. The application provide very weird layout. I cannot set up profile picture, or picture for tweet. I am getting only text pretty much.
I spent whole day to figure out, why my APP does not have picture, url or videos.
I appreciate any suggestions what might be wrong
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-
UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous">
<link rel="stylesheet" href="{{asset('/css/app.css')}}">
<title>Nancy's Twitter API App</title>
</head>
<body>
<h1 class="text-info text-center mt-5">Nancy's Tweets Api</h1>
<div class="container">
<div class="col align-self-center mb-5">
<form class="well" action="{{route('post.tweet')}}"
method="POST" enctype="multipart/form-data">
#csrf
#if(count($errors) > 0)
#foreach ($errors->all() as $error)
<div class="alert alert-danger"> {{$error}}</div>
#endforeach
#endif
<div class="form-group">
<label>Your Tweet</label>
<textarea class="form-control" name="tweet"
rows="3"></textarea>
</div>
<div class="form-group">
<label>Upload Filet</label>
<input type="file" class="form-control-file"
name="images[]" multiple>
</div>
<div class="from-group">
<button class="btn btn-success">Create
Tweet</button>
</div>
</form>
</div>
</div>
<div class="container">
<h3>Tweets:</h3>
#if(!empty($data))
#foreach ($data as $key => $tweet )
<div class="card text-primary bg-white mb-3" style="max-width:
150rem;">
<div class="card-body">
<p class="card-text"><h3>{{$tweet->text}}</h3></p>
#if(!empty($tweet->extented_entities->media)){
#foreach ($tweet->extented_entities->media as $i)
<img src="{{$i->media_url_https}}"
style="width:100px;">
#endforeach}
#endif
<div class="card-header">
<i class="fas fa-heart">{{$tweet-
>favorite_count}}</i>
<i class="fas fa-redo"> {{$tweet-
>retweet_count}}</i>
</div>
</div>
</div>
#endforeach
#else
<p>No Tweets Found</p>
#endif
</div>
</body>
</html>
class TwitterController extends Controller
{
//
public function twitterUserTimeline(){
$count = 10;
$format = 'array';
$data = Twitter::getUserTimeline([$count, $format]);
return view('twitter', compact('data'));
}
public function tweet(Request $request){
$this->validate($request, [
'tweet' => 'required'
]);
$newTweet = ['status' => $request->tweet];
if(!empty($request->images)){
foreach($request->images as $key => $value){
$uploadMedia = Twitter::uploadMedia(['media' => File::get($value-
>getRealPath())]);
if(!empty($uploadMedia)){
$newTweet['media_ids'][$uploadMedia->media_id_string] =
$uploadMedia->media_id_string;
}
}
}
$twitter = Twitter::postTweet($newTweet);
return back();
}
}

VueJS : v-for not rendering

I'm trying vueJS (+ laravel) and i'm encountering a problem.
I made an OrdersComponent.vue with a v-for (for each order which I retrieved from my API), but nothing happens
OrderComponent.vue : (h1 is rendering, and console.log(this.orders) is working)
<template>
<div>
<h1> Commandes </h1>
<div class="card card-body" v-for="order in orders" v-bind:key="order.idCommande">
<h2> {{ order.date }} </h2>
<span> {{ order.statut }} </span>
</div>
</div>
</template>
<script>
import Vue from 'vue'
export default Vue.extend({
data() {
return {
orders: [],
order: {
idCommande: '',
date: '',
prix: '',
statut: '',
},
orderId: '',
edit: false
}
},
methods: {
fetchOrders() {
fetch('api/orders')
.then(res => res.json())
.then(res => {
this.orders = res.data;
console.log(this.orders);
})
}
},
created() {
this.fetchOrders();
}
})
</script>
Page which call the component (orders.blade.php) :
#extends('layouts.app')
#section('content')
<orders></orders>
#endsection
finally, layouts.app file :
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light navbar-laravel">
<div class="container">
<a class="navbar-brand" href="{{ url('./') }}">
MyOnlineCV
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
#guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
#else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->username .' '. Auth::user()->email }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('commandes') }}"> Mes commandes </a>
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ url('/logout') }}" method="GET" style="display: none;">
#csrf
</form>
</div>
</li>
#endguest
</ul>
</div>
</div>
</nav>
<main class="py-4">
<div id="app">
<div class="container">
#yield('content')
</div>
</div>
</main>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

Maybe you have already fixed it but in my case I was using an arrow function in methods but it was not working this way. I had to change it to "normal" function declaration like so:
methods: {
fetchOrders: function() {
fetch('api/orders').then(res => res.json())
.then(res => {
this.orders = res.data;
console.log(this.orders);
});
}
},

Try to remove this from your component`s data() method:
...
order: {
idCommande: '',
date: '',
prix: '',
statut: '',
},
orderId: '',
...
You declare "order" in v-for section:
v-for="order in orders"

May be you forgot to recompile your app after making change.
Remove order object from data()
order:{
idCommande: '',
date: '',
prix: '',
statut: '',
}
and recompile the app using:
npm run dev
Moreover:
We create this kind of objects when we are going to submit some data using a form.
For example
For signup/register, we get user name, email, age, etc and save it into an object like below by calling each value in a template (e.g. user.name)
user:{
name:'',
email:'',
age: '',
}
and then we just send user object via axios or fetch to the server.

How to call edit method of the resource controller using AJAX in Laravel5.6

In my laravel project I am using resource controller for update. but it is not working. I tried but it failed.
my blade
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<title>{{ config('app.name') }}</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('css/style.css') }}" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<h1>{{ config('app.name') }}</h1>
<form class="dis-none" id="FormAjax">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="address">Address</label>
<textarea class="form-control" rows="3" id="address"></textarea>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="country">Country</label>
<input type="text" class="form-control" id="country" />
</div>
</div>
</div>
<button type="submit" id="SaveAjax" class="btn btn-success">Save Form</button>
<button type="button" id="cancel" class="btn btn-danger">Cancel</button>
</form>
<div id="ShowAjax" class="row">
<button type="button" id="AddForm" class="btn btn-success">Add Form</button>
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Address</th>
<th>Country</th>
<th>Action</th>
</tr>
</thead>
<tbody id="data">
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$("#AddForm").click(function () {
$("#FormAjax").fadeIn();
$("#ShowAjax").hide();
$('#UpdateForm').text('Save Form');
});
$("#SaveAjax").click(function () {
$("#FormAjax").hide();
$("#ShowAjax").fadeIn();
});
$(document).on('click', '#cancel', function () {
$('#name').val('');
$('#country').val('');
$('#address').val('');
});
$(document).on('click', '#edit', function () {
$("#FormAjax").fadeIn();
$("#ShowAjax").hide();
name = $(this).parent().parent().find('#ename').text();
address = $(this).parent().parent().find('#eaddress').text();
country = $(this).parent().parent().find('#ecountry').text();
$('#name').val(name);
$('#address').val(address);
$('#country').val(country);
$('#SaveAjax').text('Edit');
$('#SaveAjax').prop('id', 'UpdateForm');
$('#UpdateForm').attr('data-id', $(this).data('id'));
});
$(document).on('click', '#UpdateForm', function () {
name = $('#name').val();
country = $('#country').val();
address = $('#address').val();
url = "peoples";
id = $(this).data('id');
editUrl = url + '/' + id + '/edit';
$.get( {{ route('editUrl') }}, {name:name, country:country, address:address, id:id}, function (data) {
console.log('success');
});
});
});
</script>
</body>
</html>
route/web.php
Route::resource('peoples', 'PeopleController');
PeopleController.php
public function edit(People $people)
{
if($request->ajax()) {
$request->validate([
'name' => 'required',
'address' => 'required',
'country' => 'required',
]);
$people = People::find($request->id);
$people->name = $request->name;
$people->address = $request->address;
$people->country = $request->country;
$people->save();
return response()->json();
}
}
When I try type in browser http://localhost:8000/peoples I see this error.
Route [editUrl] not defined. (View: C:\xampp\htdocs\Tutorials
Laravel\Ajax\resources\views\peoples.blade.php)

You cannot use the route() helper here as you have not named your routes. Instead, try using the url() helper to generate the URL.
url(id . '/edit')
But, here I see another problem as the id will come in dynamically when the JS executes by which time the Laravel helper would have already executed. So, I would suggest the following approach:
url = {{ base_url() }} + '*apiPrefix*' + '/peoples/' + id + '/edit'

Displaying feeds and blogs according to the created time

I'm having a home page where all the feeds along with comments and blogs are being displayed. Right now it is showing first all the feeds and then the blog. But I want it should be displayed according to the created time, mixer of feeds and blog not like first feed will come and then the blog. Can anyone tell me how to acheive that. This is my index.blade.php
#extends('layouts/default')
{{-- Page title --}}
#section('title')
Home
#parent
#stop
{{-- page level styles --}}
#section('header_styles')
<!--page level css starts-->
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/frontend/action.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/frontend/tabbular.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/frontend/jquery.circliful.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/owl.carousel/css/owl.carousel.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/owl.carousel/css/owl.theme.css') }}">
<!--end of page level css-->
#stop
{{-- content --}}
#section('content')
<div class="row">
<div class="column col-md-1 col-xs-1 col-sm-1"></div>
<div class="column col-md-3 col-xs-3 col-sm-3"><!--gm-editable-region--> </div>
<div class="column col-md-4 col-xs-4 col-sm-4">
#include ('action.partials.form')
#include ('action.partials.error')
#include ('action.partials.feed')
#include ('action.partials.blogfeed')
</div>
<div class="column col-md-3 col-xs-3 col-sm-3"><!--gm-editable-region--></div>
<div class="column col-md-1 col-xs-1 col-sm-1"></div>
#stop
{{-- footer scripts --}}
#section('footer_scripts')
<!-- page level js starts-->
<script type="text/javascript" src="{{ asset('assets/js/frontend/jquery.circliful.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/vendors/owl.carousel/js/owl.carousel.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/frontend/carousel.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/frontend/index.js') }}"></script>
<!--page level js ends-->
#stop
This is action.partials.feed
#foreach($feeds as $feed)
<article class="media">
<div class="well">
<div class="pull-left">
<img class="profile" src="{{ URL::to('/uploads/users/'.$feed->user->pic) }}" class="img-responsive" alt="Image" style="width:48px;height:48px;padding-right : 10px;padding-bottom: 5px;">
</div>
<strong>{{ $feed->user->first_name }}
{{ $feed->user->last_name }}
<small> posted </small>
</strong>
{{ $feed->created_at->diffForHumans() }}<br><hr>
{{ $feed->feed_content }}
<hr>
{!! Form::open(['url' => 'home/{storecomment}']) !!}
<div><input type="hidden" name="feed_id" value="{{ $feed->feed_id }}" /></div>
<div class="form-group">
{!! Form::text('comment', null, ['class'=>'form-control', 'rows'=>3, 'placeholder'=>"Comment"]) !!}
</div>
<div class="form-group feed_post_submit">
{!! Form::submit('Comment', ['class' => 'btn btn-default btn-xs']) !!}
</div>
{!! Form::close() !!}
#foreach($feed->comments as $comment)
<div class="pull-left">
<img class="profile" src="{{ URL::to('/uploads/users/'. $comment->user->pic) }}" class="img-responsive" alt="Image" style="width:48px;height:48px;padding-right : 10px;padding-bottom: 5px;">
</div>
{{ $comment->user->first_name }}
{{ $comment->created_at->diffForHumans() }}
{{ $comment->comment }}<hr>
#endforeach
</div>
</article>
#endforeach
action.partials.blogfeed
#foreach($blogs as $blog)
<article class="media">
<div class="well">
<div class="pull-left">
<img class="media-object" src="{{ URL::to('/uploads/users/'.$blog->user->pic) }}" class="img-responsive" alt="Image" style="width:48px;height:48px;padding-right : 10px;padding-bottom: 5px;">
</div>
<strong>{{ $blog->user->first_name }}
{{ $blog->user->last_name }}
<small> posted blog</small>
</strong>
{{ $blog->created_at->diffForHumans() }}<br><hr>
<h4>{{ $blog->title }}</h4>
<div class="featured-post-wide thumbnail">
#if($blog->image)
<img src="{{ URL::to('/uploads/blog/'.$blog->image) }}" class="img-responsive" alt="Image">
#endif
</div>
</div>
</article>
#endforeach
This is my feedcontroller
<?php
namespace App\Http\Controllers;
use Request;
use Auth;
use Sentinel;
use App\Feed;
use App\Http\Requests;
use App\Blog;
use App\Http\Controllers\Controller;
use App\Comment;
class FeedsController extends Controller
{
public function index() {
// $comments = Comment::latest()->get();
$feeds = Feed::with('comments', 'user')->where('user_id', Sentinel::getUser()->id)->latest()->get();
$blogs = Blog::latest()->simplePaginate(5);
$blogs->setPath('blog');
return view('action.index', compact('feeds', 'blogs'));
}
public function store(Requests\CreateFeedRequest $request)
{
$request->merge( [ 'user_id' => Sentinel::getuser()->id] );
Feed::create($request->all());
return redirect('home');
}
public function storecomment(Requests\CommentRequest $request, Feed $feed)
{
$comment = new Comment;
$comment->user_id =Sentinel::getuser()->id;
$comment->feed_id = $request->feed_id;
$comment->comment = $request->comment;
$comment->save();
return redirect('/home');
}
}
Can any one tell me how to display feeds and blogs according to the published time.

In your controller index method, try something like this:
public function index() {
// $feeds = Feed::with('comments', 'user')->where('user_id', Sentinel::getUser()->id)->latest()->get();
// $blogs = Blog::latest()->simplePaginate(5);
// $blogs->setPath('blog');
$feeds = Feed::with('comments', 'user')->where('user_id', Sentinel::getUser()->id)->latest()->get();
$blogs = Blog::latest()->paginate(5);
$feeds = $feeds->merge($blogs)->sortByDesc('created_at');
return view('action.index', compact('feeds'));
}
The biggest problem you're going to have is that your Feed object is likely different than your Blog object. Meaning each will have unique column names that the other doesn't have. This is going to make doing the foreach a bit of a mess...
Remove #include ('action.partials.blogfeed'). This is not longer relevant for us.
In action.partials.feed...we'll output it all (hopefully without too many "hacks" and conditionals):
#foreach($feeds as $feed)
<article class="media">
<div class="well">
<div class="pull-left">
<img class="profile" src="{{ URL::to('/uploads/users/'.$feed->user->pic) }}" class="img-responsive" alt="Image" style="width:48px;height:48px;padding-right : 10px;padding-bottom: 5px;">
</div>
<strong>
{{ $feed->user->first_name }}
{{ $feed->user->last_name }}
<small> posted </small>
</strong>
// We'll use #if(isset($feed->title)) to check if it's a blog post, aka ugly hack.
#if(isset($feed->title))
{{ $blog->created_at->diffForHumans() }}
<br><hr>
<h4>{{ $blog->title }}</h4>
<div class="featured-post-wide thumbnail">
#if($blog->image)
<img src="{{ URL::to('/uploads/blog/'.$blog->image) }}" class="img-responsive" alt="Image">
#endif
</div>
#else
{{ $feed->created_at->diffForHumans() }}<br><hr>
{{ $feed->feed_content }}
<hr>
{!! Form::open(['url' => 'home/{storecomment}']) !!}
<div><input type="hidden" name="feed_id" value="{{ $feed->feed_id }}" /></div>
<div class="form-group">
{!! Form::text('comment', null, ['class'=>'form-control', 'rows'=>3, 'placeholder'=>"Comment"]) !!}
</div>
<div class="form-group feed_post_submit">
{!! Form::submit('Comment', ['class' => 'btn btn-default btn-xs']) !!}
</div>
{!! Form::close() !!}
#foreach($feed->comments as $comment)
<div class="pull-left">
<img class="profile" src="{{ URL::to('/uploads/users/'. $comment->user->pic) }}" class="img-responsive" alt="Image" style="width:48px;height:48px;padding-right : 10px;padding-bottom: 5px;">
</div>
{{ $comment->user->first_name }}
{{ $comment->created_at->diffForHumans() }}
{{ $comment->comment }}<hr>
#endforeach
#endif
</div>
</article>
#endforeach

Because Illuminate\Database\Eloquent extends Illuminate\Support\Collection, we can easily merge them together. Because both $feeds and $blogs are an Eloquent Collection, we can easily merge them into one collection:
$feeds_and_blogs = collect($feeds->toArray(), $blogs->toArray());
Now you will have a combination of both. Because you've used $table->timestamps() in your migration to get your columns, we can easily perform a comparison against the created_at timestamp to get the sorting that you want:
$sorted_feeds_and_blogs = $feeds_and_blogs->sortBy(function($item){
return $item->created_at;
});
However, you likely want them to be sorted by newest first. Thankfully, collections have a sortByDesc function which will do exactly what we want.
Although in the grand scheme of things you probably really want a Polymorphic relationship.

Resources