I tried to add so that the admin can this connected in / login and that when he connects alone he has access 127.0.0.1:8000/dashboard/home and only him has access
welcome.blade.php
```
<div class="row">
<div class="col-lg-8">
<div class="row">
#if (count($categories) > 0)
#foreach ($categories as $category)
<div class="col-lg-12">
<!-- second section -->
<a href="{{route('category.overview', $category->id)}}">
<h4 class="text-white bg-info mb-0 p-4 rounded-top">
{{$category->title}}
</h4>
</a>
<table
class="table table-striped table-responsive table-bordered">
<thead class="thead-light">
<tr>
<th scope="col">Forum</th>
<th scope="col">Topics</th>
<!-- <th scope="col">Posts</th>
<th scope="col">Latest Post</th> -->
</tr>
</thead>
<tbody>
#if (count($category->forums) > 0)
#foreach ($category->forums as $forum)
<tr>
<td>
<h3 class="h5">
{{$forum->title}}
</h3>
<p class="mb-0">
{!!$forum->desc!!}
</p>
</td>
<td><div>{{$forum->discussions->count()}}</td>
</tr>
#endforeach
#else
<p> 0 Forums found in this category</p>
#endif
</tbody>
</table>
</div>
#endforeach
#else
<h1>No Forum categories found</h1>
#endif
</div>
</div>
<div class="col-lg-4">
<aside>
<div class="card">
<div class="card-body">
<h4 class="card-title">Members Online</h4>
<ul class="list-unstyled mb-0">
#if (count($users_online) > 0)
#foreach ($users_online as $user)
<span class="badge badge-pill badge-primary">{{$user->name}}</span>
#endforeach
#endif
</ul>
</div>
<div class="card-footer">
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Members Statistics</h4>
<dl class="row">
<dt class="col-8 mb-0">Total Categories:</dt>
<dd class="col-4 mb-0">{{$totalCategories}}</dd>
</dl>
<dl class="row">
<dt class="col-8 mb-0">Total Forums:</dt>
<dd class="col-4 mb-0">{{$forumsCount}}</dd>
</dl>
<dl class="row">
<dt class="col-8 mb-0">Total Topics:</dt>
<dd class="col-4 mb-0">{{$topicsCount}}</dd>
</dl>
<dl class="row">
<dt class="col-8 mb-0">Total members:</dt>
<dd class="col-4 mb-0">{{$totalMembers}}</dd>
</dl>
</div>
<div class="card-footer">
<div>Newest Member</div>
<div>{{$newest->name}}</div>
</div>
</div>
</aside>
</div>
</div>
</div>
```
dashboard.blade.php
``` <body>
<section id="container" class="">
#include('admin.header')
<aside>
<div id="sidebar" class="nav-collapse">
<ul class="sidebar-menu">
<li class="active">
<a class="" href="/dashboard/home">
<i class="icon_house_alt"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;" class="">
<i class="fa fa-edit"></i>
<span>Actions</span>
<span class="menu-arrow arrow_carrot-right"></span>
</a>
<ul class="sub">
<li><a class="" href="{{route('category.new')}}">Create Category</a></li>
<li><a class="" href="{{route('forum.new')}}">Create Forum</a></li>
</ul>
</li>
<li>
<a class="" href="/dashboard/users">
<i class="fa fa-users"></i>
<span>Users</span>
</a>
</li>
<li>
<a class="" href="{{route('categories')}}">
<i class="fa fa-users"></i>
<span>Categories</span>
</a>
</li>
<li>
<a class="" href="{{route('forums')}}">
<i class="fa fa-users"></i>
<span>Forums</span>
</a>
</li>
</ul>
</div>
</aside>
<div id="app">
#yield('content')
</div>
</section>
{{-- ckeditor --}}
<script>
CKEDITOR.replace( 'editor1' );
</script>
<script>
$(function() {
$(".knob").knob({
'draw': function() {
$(this.i).val(this.cv + '%')
}
})
});
$(document).ready(function() {
$("#owl-slider").owlCarousel({
navigation: true,
slideSpeed: 300,
paginationSpeed: 400,
singleItem: true
});
});
$(function() {
$('select.styled').customSelect();
});
$(function() {
$('#map').vectorMap({
map: 'world_mill_en',
series: {
regions: [{
values: gdpData,
scale: ['#000', '#000'],
normalizeFunction: 'polynomial'
}]
},
backgroundColor: '#eef3f7',
onLabelShow: function(e, el, code) {
el.html(el.html() + ' (GDP - ' + gdpData[code] + ')');
}
});
});
```
ressource/views/admin/pages/home.blade.php
```
<section id="main-content">
<section class="wrapper">
<div class="row">
<div class="col-lg-12">
<h3 class="page-header"><i class="fa fa-laptop"></i> Dashboard</h3>
<ol class="breadcrumb">
<li><i class="fa fa-home"></i>Home</li>
<li><i class="fa fa-laptop"></i>Dashboard</li>
</ol>
</div>
</div>
<div class="flash-message">
#if(\Session::has('message'))
<p class="alert
{{ Session::get('alert-class', 'alert-success') }}">{{Session::get('message') }}</p>
#endif
</div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="info-box blue-bg">
<i class="fa fa-cloud-download"></i>
#if ($categories->count() > 0)
<div class="count">{{$categories->count()}}</div>
#else
<div class="count">0</div>
#endif
<div class="title">Categories</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="info-box brown-bg">
<i class="fa fa-users"></i>
#if ($users->count() > 0)
<div class="count">{{$users->count()}}</div>
#else
<div class="count">0</div>
#endif
<div class="title">Users</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="info-box dark-bg">
<i class="fa fa-question"></i>
#if ($forums->count() > 0)
<div class="count">{{$forums->count()}}</div>
#else
<div class="count">0</div>
#endif
<div class="title">Forums</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="info-box green-bg">
<i class="fa fa-comment"></i>
#if ($topics->count() > 0)
<div class="count">{{$topics->count()}}</div>
#else
<div class="count">0</div>
#endif
<div class="title">Topics</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h2><i class="fa fa-flag-o red"></i><strong>Registered Users</strong></h2>
<div class="panel-actions">
<i class="fa fa-rotate-right"></i>
<i class="fa fa-chevron-up"></i>
<i class="fa fa-times"></i>
</div>
</div>
<div class="panel-body">
<table class="table bootstrap-datatable countries">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Rank</th>
<th>View</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
#if (count($users)> 0)
#foreach ($users as $user)
<tr>
<td>{{$user->name}}</td>
<td>{{$user->email}}</td>
<td>{{$user->rank}}</td>
<td><i class="fa fa-eye text-success"></i></td>
<td><form action="{{ route('user.delete', ['id' => $user->id]) }}" method="POST" >
#csrf
<input type="submit" class="btn btn-sm btn-danger" value="Delete">
</form></td>
</tr>
#endforeach
#endif
</tbody>
</table>
{{ $users->links() }}
</div>
</div>
</div>
</div>
</div>
</section>
</section>
#endsection ```
home.blade.php
``` #extends('layouts.app')
#section('content')
<section class="content">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="card card-primary card-outline">
<div class="card-body box-profile">
<div class="text-center">
<img class="profile-user-img img-fluid img-circle" src="{{asset('/images/profile.png')}}" alt="User profile picture">
</div>
<h3 class="profile-username text-center">{{auth()->user()->name}}</h3>
<p class="text-muted text-center">{{auth()->user()->telegram}}<span class="badge badge-success">{{auth()->user()->skills}}</span></p>
<ul class="list-group list-group-unbordered mb-3">
<li class="list-group-item">
<b>Joined</b></br>
<b>Last seen</b></br>
<b>Reaction score</b></br>
<b>Total sell</b></br>
<b>Total purchase</b></br>
<b>Messages</b> <a class="float-right">{{count(auth()->user()->topics)}}</a>
</li>
{{-- <li class="list-group-item">
<b>Following</b> <a class="float-right">543</a>
</li>
<li class="list-group-item">
<b>Friends</b> <a class="float-right">13,287</a>
</li> --}}
</ul>
</div>
</div>
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">About Me</h3>
</div>
<div class="card-body">
{{auth()->user()->education}}
</br>Contact tg : {{auth()->user()->telegram}}
</div>
</div>
</div>
<div class="col-md-9">
<div class="card">
<div class="card-header p-2">
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link active" href="#activity" data-toggle="tab">Latest activity</a></li>
<li class="nav-item"><a class="nav-link" href="#timeline" data-toggle="tab">Timeline</a></li>
<li class="nav-item"><a class="nav-link" href="#settings" data-toggle="tab">Settings</a></li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="active tab-pane" id="activity">
<div class="post">
<div class="user-block">
<img class="img-circle img-bordered-sm" width="5%" src="{{asset('/images/profile.png')}}" alt="user image">
<span class="username">
{{auth()->user()->name}}
<i class="fas fa-times"></i>
</span>
<span class="description">Shared publicly - {{$latest->created_at}}</span>
</div>
#if ($latest_user_post)
<p>
{{$latest_user_post->desc}}
</p>
#else
<p>
You have not started any discussion yet
</p>
#endif
{{-- <p>
<i class="fas fa-share mr-1"></i> Share
<i class="far fa-thumbs-up mr-1"></i> Like
<span class="float-right">
<a href="#" class="link-black text-sm">
<i class="far fa-comments mr-1"></i> Comments (5)
</a>
</span>
</p>
<input class="form-control form-control-sm" type="text" placeholder="Type a comment"> --}}
</div>
<div class="post clearfix">
<div class="user-block">
<img class="img-circle img-bordered-sm" width="5%" src="{{asset('/images/profile.png')}}" alt="User Image">
<span class="username">
{{$latest->user->name}}
<i class="fas fa-times"></i>
</span>
<span class="description">Started a discussion - {{$latest->created_at}}</span>
</div>
#if ($latest)
<p>
{!!$latest->desc!!}
</p>
#else
<p>
You have not started any discussion yet
</p>
#endif
{{-- <form class="form-horizontal">
<div class="input-group input-group-sm mb-0">
<input class="form-control form-control-sm" placeholder="Response">
<div class="input-group-append">
<button type="submit" class="btn btn-danger">Send</button>
</div>
</div>
</form> --}}
</div>
</div>
<div class="tab-pane" id="timeline">
</div>
<div class="tab-pane" id="settings">
<form action="{{route('user.update', auth()->id())}}" method="POST" class="form-horizontal">
#csrf
<div class="form-group row">
<label for="inputEducation" class="col-sm-2 col-form-label">About you</label>
<div class="col-sm-10">
<textarea type="text" value="{{auth()->user()->education}}" class="form-control" name="education" id="inputEducation" placeholder="{{auth()->user()->education}}"></textarea>
</div>
</div>
<div class="form-group row">
<label for="inputSkills" class="col-sm-2 col-form-label">Skills</label>
<div class="col-sm-10">
<input type="text" value="{{auth()->user()->skills}}" class="form-control" name="skills" id="inputSkills" placeholder="Skills">
</div>
</div>
<div class="form-group row">
<div class="offset-sm-2 col-sm-10">
```
web.php
use Illuminate\Support\Facades\Route;
Route::get('/', 'App\Http\Controllers\FrontendController#index');
Auth::routes();
Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');
Route::get('/new-topic', function () {
return view('client.new-topic');
});
Route::get('/category/overview/{id}', 'App\Http\Controllers\FrontendController#categoryOverview')->name('category.overview');
Route::get('/forum/overview/{id}', 'App\Http\Controllers\FrontendController#forumOverview')->name('forum.overview');
Route::get('dashboard/home', 'App\Http\Controllers\DashboardController#home');
Route::get('dashboard/category/new', 'App\Http\Controllers\CategoryController#create')->name('category.new');
Route::post('dashboard/category/new', 'App\Http\Controllers\CategoryController#store')->name('category.store');
Route::get('dashboard/categories', 'App\Http\Controllers\CategoryController#index')->name('categories');
Route::get('dashboard/categories/{id}', 'App\Http\Controllers\CategoryController#show')->name('category');
Route::get('dashboard/categories/edit/{id}', 'App\Http\Controllers\CategoryController#edit')->name('category.edit');
Route::post('dashboard/categories/edit/{id}', 'App\Http\Controllers\CategoryController#update')->name('category.update');
Route::get('dashboard/categories/delete/{id}', 'App\Http\Controllers\CategoryController#destroy')->name('category.destroy');
Route::get('dashboard/forum/new', 'App\Http\Controllers\ForumController#create')->name('forum.new');
Route::post('dashboard/forum/new', 'App\Http\Controllers\ForumController#store')->name('forum.store');
Route::get('dashboard/forums', 'App\Http\Controllers\ForumController#index')->name('forums');
Route::get('dashboard/forums/{id}', 'App\Http\Controllers\ForumController#edit')->name('forum');
Route::get('dashboard/forums/edit/{id}', 'App\Http\Controllers\ForumController#edit')->name('forum.edit');
Route::post('dashboard/forums/update/{id}', 'App\Http\Controllers\ForumController#update')->name('forum.update');
Route::get('dashboard/forums/delete/{id}', 'App\Http\Controllers\ForumController#destroy')->name('forum.destroy');
Route::get('client/topic/new/{id}', 'App\Http\Controllers\DiscussionController#create')->name('topic.new');
Route::post('client/topic/new', 'App\Http\Controllers\DiscussionController#store')->name('topic.store');
Route::get('client/topic/{id}', 'App\Http\Controllers\DiscussionController#show')->name('topic');
Route::post('client/topic/reply/{id}', 'App\Http\Controllers\DiscussionController#reply')->name('topic.reply');
Route::get('/topic/reply/delete/{id}', 'App\Http\Controllers\DiscussionController#destroy')->name('reply.delete');
Route::get('/updates', 'App\Http\Controllers\DiscussionController#updates');
Route::post('user/update/{id}', 'App\Http\Controllers\UserController#update')->name("user.update");
Route::get('/dashboard/users/{id}', 'App\Http\Controllers\DashboardController#show');
Route::post('/dashboard/users/{id}', 'App\Http\Controllers\DashboardController#destroy')->name('user.delete');
Route::prefix('admin')->group(function() {
Route::get('/login','Auth\AdminLoginController#showLoginForm')->name('admin.login');
Route::post('/login', 'Auth\AdminLoginController#login')->name('admin.login.submit');
Route::get('logout/', 'Auth\AdminLoginController#logout')->name('admin.logout');
Route::get('/', 'Auth\AdminController#index')->name('admin.dashboard');
}) ;
UserController
``` <?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
class UserController extends Controller
{
public function update(Request $request, $id)
{
$input = $request->all();
$user = User::find($id);
$user->fill($input)->save();
toastr()->success('Your details have been updated successfully!');
return back();
}
}
```
HomeController
``` <?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Discussion;
class HomeController extends Controller
{
/**
* Create a new controller instance.
*
* #return void
*/
public function __construct()
{
$this->middleware('auth');
}
/**
* Show the application dashboard.
*
* #return \Illuminate\Contracts\Support\Renderable
*/
public function index()
{
$latest_user_post = Discussion::where('user_id', auth()->id())->latest()->first();
$latest = Discussion::latest()->first();
return view('home', compact('latest_user_post', 'latest'));
}
}
```
But since I made his page 127.0.0.1:8000/dashboard/home is white and I have errors when I create an account I have a first error:
Trying to get property 'user' of non-object (View: /home/project/Pictures/forum/resources/views/home.blade.php)
if I comment it I have another error that appears it is this:
Trying to get property 'created_at' of non-object (View: /home/project/Pictures/forum/resources/views/home.blade.php)
Etc... I have had errors like this since I tried to make only the admin can this connect to the dashboard. I am a beginner I do not know how to adjust it, I am not sure I also have a route error. I tried to follow different tutorial on google to learn laravel until it was okay, if someone can help me and explain the problem it would be kind.
Related
I'm attempting to increment the value of the input with the + / - buttons but can't figure out where my issue is that it is currently not doing anything. Any help is appreciated. I know that jquery now offers spinner functionality in their UI file but in this case it's not a possibility and it's out of my hands.
HTML:
<article class="card card-product-list">
<div class="row no-gutters">
<aside class="col-md-2">
<a href="#" class="img-wrap">
<span class="badge badge-danger"> SOMETHING </span>
<img src="https://image.jpg">
</a>
</aside> <!-- col.// -->
<div class="col-md-7">
<div class="info-main">
<div class="row">
<div class="col-sm-12">
TEST
<div class="rating-wrap mb-3">
TEST
</div> <!-- rating-wrap.// -->
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<ul class="productListItm">
<li>
<strong>AWP:</strong> $84.32
</li>
<li>
<strong>WAC:</strong> $13.04
</li>
<li>
<strong>Manufacturer:</strong> TEST
</li>
<li>
<strong>Brand:</strong> TEST
</li>
</ul>
</div>
<div class="col-sm-12 col-md-6">
<ul class="productListItm">
<li>
<strong>Lot:</strong> 369125
</li>
<li>
<strong>Expires:</strong> 04/30/21
</li>
</ul>
</div>
</div>
</div> <!-- info-main.// -->
</div> <!-- col.// -->
<aside class="col-sm-3">
<div class="info-aside">
<i class="far fa-heart"></i>
<div class="price-wrap">
<span class="price h5"> $4.50 EA/1 </span>
<p>In Stock</p>
</div> <!-- info-price-detail // -->
<br>
<div class="form-group col-md flex-grow-0">
<div class="input-group mb-3 input-spinner">
<div class="input-group-prepend">
<button class="btn btn-light" type="button" id="button-plus"> + </button>
</div>
<input type="text" class="form-control qty" value="1" id="HotQty[A.PROD.NO]" min="0" max="100" step="1">
<div class="input-group-append">
<button class="btn btn-light" type="button" id="button-minus"> − </button>
</div>
</div>
<span class="text">Add to cart</span> <i class="fas fa-shopping-cart"></i>
</div>
</div> <!-- info-aside.// -->
</aside> <!-- col.// -->
</div> <!-- row.// -->
</article>
JQUERY:
$(document).ready(function() {
var incrementPlus;
var incrementMinus;
var buttonPlus = $("button#button-plus");
var buttonMinus = $("button#button-minus");
var incrementPlus = buttonPlus.click(function() {
var $n = $(this).parent("div.info-aside").find("input.qty");
$n.val(Number( $n.val() ) + 1 );
});
var incrementMinus = buttonMinus.click(function() {
var $n = $(this).parent("div.info-aside").find("input.qty");
var amount = Number($n.val());
if (amount > 0) {
$n.val(amount - 1);
}
});
});
parent() method traverses to the immediate parent of the elements.
Instead of parent() you should use parents() or closest():
$(document).ready(function() {
var incrementPlus;
var incrementMinus;
var buttonPlus = $("button#button-plus");
var buttonMinus = $("button#button-minus");
buttonPlus.click(function() {
var $n = $(this).parents("div.info-aside").find("input.qty");
$n.val(Number( $n.val() ) + 1 );
});
buttonMinus.click(function() {
var $n = $(this).parents("div.info-aside").find("input.qty");
var amount = Number($n.val());
if (amount > 0) {
$n.val(amount - 1);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article class="card card-product-list">
<div class="row no-gutters">
<aside class="col-md-2">
<a href="#" class="img-wrap">
<span class="badge badge-danger"> SOMETHING </span>
<img src="https://image.jpg">
</a>
</aside> <!-- col.// -->
<div class="col-md-7">
<div class="info-main">
<div class="row">
<div class="col-sm-12">
TEST
<div class="rating-wrap mb-3">
TEST
</div> <!-- rating-wrap.// -->
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<ul class="productListItm">
<li>
<strong>AWP:</strong> $84.32
</li>
<li>
<strong>WAC:</strong> $13.04
</li>
<li>
<strong>Manufacturer:</strong> TEST
</li>
<li>
<strong>Brand:</strong> TEST
</li>
</ul>
</div>
<div class="col-sm-12 col-md-6">
<ul class="productListItm">
<li>
<strong>Lot:</strong> 369125
</li>
<li>
<strong>Expires:</strong> 04/30/21
</li>
</ul>
</div>
</div>
</div> <!-- info-main.// -->
</div> <!-- col.// -->
<aside class="col-sm-3">
<div class="info-aside">
<i class="far fa-heart"></i>
<div class="price-wrap">
<span class="price h5"> $4.50 EA/1 </span>
<p>In Stock</p>
</div> <!-- info-price-detail // -->
<br>
<div class="form-group col-md flex-grow-0">
<div class="input-group mb-3 input-spinner">
<div class="input-group-prepend">
<button class="btn btn-light" type="button" id="button-plus"> + </button>
</div>
<input type="text" class="form-control qty" value="1" id="HotQty[A.PROD.NO]" min="0" max="100" step="1">
<div class="input-group-append">
<button class="btn btn-light" type="button" id="button-minus"> − </button>
</div>
</div>
<span class="text">Add to cart</span> <i class="fas fa-shopping-cart"></i>
</div>
</div> <!-- info-aside.// -->
</aside> <!-- col.// -->
</div> <!-- row.// -->
</article>
Hi there I have this problem with the calendar when I try to drag and drop, it drags the event but then it does not drop on the calendar,
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
// put your options and callbacks here
events : [
#foreach($appointments as $appointment)
{
title : '{{ $appointment->firstname }}',
start : '{{ $appointment->start_at }}',
},
#endforeach
],
})
$('#calendar').fullCalendar({
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function() {
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
});
});
</script>
<link rel="stylesheet" href="{{ asset('app/assets/libs/fullcalendar/dist/fullcalendar.min.css') }}"/>
<link rel="stylesheet" href="{{ asset('app/assets/extra-libs/calendar/calendar.css') }}"/>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<h4 class="card-title">Agents</h4>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
#foreach($agents as $key=> $agent)
<li class="nav-item"> <a class="nav-link #if($key == 0)active #endif" data-toggle="tab" href="#{{$agent->id}}" role="tab" style="text-align: center;">
<div class="user-profile dropdown m-t-20">
<div class="user-pic">
<img src="{{ asset('app/assets/images/users/1.jpg') }}" alt="users" class="rounded-circle img-fluid" />
</div></div><span class="hidden-xs-down">{{$agent->name}}</span></a>
</li>
#endforeach
</ul>
<!-- Tab panes -->
<div class="tab-content tabcontent-border">
<div class="tab-pane active" id="{{$agent->id}}" role="tabpanel">
<div class="p-20">
<div class="col-md-12">
<div class="card">
<div class="">
<div class="row">
<div class="col-lg-3 border-right p-r-0">
<div class="card-body border-bottom">
<h4 class="card-title m-t-10">Drag & Drop Event</h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-12">
<div id="calendar-events" class="">
#foreach($appointments as $appointment)
<div class="calendar-events m-b-20 draggable" data-class="bg-info"><i class="fa fa-circle text-info m-r-10"></i>
{{$appointment->firstname }} <br> {{$appointment->start_at}}</div>
#endforeach
<!-- <div class="calendar-events m-b-20" data-class="bg-success"><i class="fa fa-circle text-success m-r-10"></i> Event Two</div>
<div class="calendar-events m-b-20" data-class="bg-danger"><i class="fa fa-circle text-danger m-r-10"></i>Event Three</div>
<div class="calendar-events m-b-20" data-class="bg-warning"><i class="fa fa-circle text-warning m-r-10"></i>Event Four</div> -->
</div>
<!-- checkbox -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="drop-remove">
<label class="custom-control-label" for="drop-remove">Remove after drop</label>
</div>
<a href="javascript:void(0)" data-toggle="modal" data-target="#add-new-event" class="btn m-t-20 btn-info btn-block waves-effect waves-light">
<i class="ti-plus"></i> Add New Event
</a>
</div>
</div>
</div>
</div>
<div class="col-lg-9">
<div class="card-body b-l calender-sidebar">
<div id="calendar"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="tab-pane p-20" id="profile" role="tabpanel">2</div>
<div class="tab-pane p-20" id="messages" role="tabpanel">3</div> -->
</div>
</div>
</div>
</div>
</div>
</div>
The appointment are shown on my calendar I want to be able to drag an event and drop to the calendar the drag and drop was working, but when I added the script with the events that show the appointments inside the calendar the drop does not work and on console does not show any error. Can someone help me ?
I am getting an error for the first ui-sref inside div with class="row episode-link" although the rest work correctly:
Syntax Error: Token '}' not a primary expression at column 12 of the expression [{seriesId: }] starting at [}].
The same ui-sref if put anywhere in the rest of the html structure works perfectly.
Unable to track the bug. Please Help.
<section>
<div class="container-fluid">
<div class="row episode-link">
<a ui-sref="app.episode({seriesId: {{show._id}}})">
<div class="col-md-12 guide">
<span class="fa fa-chevron-right" style="float: right;"></span>
<h5>Episode Guide</h5>
<p>{{episodes.length}} episodes</p>
</div>
</a>
</div>
<div class="row">
<div class="col-md-12">
<div class="seriesjumbo jumbotron">
<div class="row">
<div class="col-md-4 show-img-div align-items-center">
<img class="show-img" src="{{show.poster}}" alt="{{show.seriesName}}">
</div>
<div class="col-md-8">
<h1>{{show.seriesName}}</h1>
<p class="episode-info"><i class="fa fa-calendar" aria-hidden="true"></i><span>{{show.firstAired | date: 'mm/dd/yyyy'}}</span></p>
<p class="info">{{show.network}} <span class="rating"><i class="fa fa-star fa-lg star" aria-hidden="true"></i> {{show.rating}}</span></p>
<p class="info"><em>{{show.airsDayOfWeek}}s, {{show.airsTime}} GMT </em></p>
<div class="cap">
<span class="label label-default" ng-repeat="genre in show.genre">{{genre}}</span>
</div>
<div class="menus"><span class="fa fa-list"></span></div>
<div class="menus"><span class="fa fa-heart"></span></div>
<div class="bookmark"><span class="fa fa-bookmark"></span></div>
<div class="menus"><span class="fa fa-star"></span></div>
<div>
<h3>Overview </h3>
<p>{{show.overview}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<uib-tabset active="active">
<uib-tab index="0" heading="Episodes">
<div class="row">
<div class="col-md-6">
<h5>Seasons</h5>
<ul class="season-list">
<li ng-repeat="season in seasons | orderBy: '-valueOf()'"><a ui-sref="app.episode({seriesId: {{show._id}}, season: {{season}}})">{{season}}</a></li>
</ul>
</div>
<div class="col-md-6">
<h5>Years</h5>
<ul class="season-list">
<li ng-repeat="year in firstAired | orderBy:'-toString()'"><a ui-sref="app.episode({seriesId: {{show._id}}, year: {{year}}})">{{year}}</a></li>
</ul>
</div>
</div>
</uib-tab>
<uib-tab index="1" heading="Fan Arts">
<div ui-view="fan_arts"></div>
</uib-tab>
</div>
</div>
</div>
</section>
I tried using nth child selector but it did not work. maybe the way I wrong or something
<ul>
<li class="media list-news">
<div class="row">
<div class="col-sm-8 col-md-10">
<div>
value.title
value.id
</div>
<div>
<div class="description-news"> value.description
<span class="link-date-news"> <i class="fa fa-calendar-o"></i> value.publishDate </span>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2 child-selector">
<div class="link-source btn-xs btn-source" href="javascript:void(0);">
<i class="fa fa-globe"></i> value.portalName
</div>
</div>
</div>
</li>
example: https://jsfiddle.net/03koh1w4/
You need to make a few changes (HTML and CSS)
HTML -> Don´t close your order list on all item
CSS -> Give your (odd and even) to your list, and then to your class
CSS
.link-source {
display:inline;
color:#fff;
}
li:nth-child(odd) .link-source {
background: green;
}
li:nth-child(even) .link-source {
background: red;
}
HTML
<ul>
<li class="media list-news">
<div class="row">
<div class="col-sm-8 col-md-10">
<div>
value.title
value.id
</div>
<div>
<div class="description-news"> value.description
<span class="link-date-news"> <i class="fa fa-calendar-o"></i> value.publishDate </span>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2 child-selector">
<div class="link-source btn-xs btn-source" href="javascript:void(0);">
<i class="fa fa-globe"></i> value.portalName
</div>
</div>
</div>
</li>
<li class="media list-news">
<div class="row">
<div class="col-sm-8 col-md-10">
<div>
value.title
value.id
</div>
<div>
<div class="description-news"> value.description
<span class="link-date-news"> <i class="fa fa-calendar-o"></i> value.publishDate </span>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2 child-selector">
<div class="link-source btn-xs btn-source" href="javascript:void(0);">
<i class="fa fa-globe"></i> value.portalName
</div>
</div>
</div>
</li>
<li class="media list-news">
<div class="row">
<div class="col-sm-8 col-md-10">
<div>
value.title
value.id
</div>
<div>
<div class="description-news"> value.description
<span class="link-date-news"> <i class="fa fa-calendar-o"></i> value.publishDate </span>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2 child-selector">
<div class="link-source btn-xs btn-source" href="javascript:void(0);">
<i class="fa fa-globe"></i> value.portalName
</div>
</div>
</div>
</li>
<li class="media list-news">
<div class="row">
<div class="col-sm-8 col-md-10">
<div>
value.title
value.id
</div>
<div>
<div class="description-news"> value.description
<span class="link-date-news"> <i class="fa fa-calendar-o"></i> value.publishDate </span>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2 child-selector">
<div class="link-source btn-xs btn-source" href="javascript:void(0);">
<i class="fa fa-globe"></i> value.portalName
</div>
</div>
</div>
</li>
</ul>
DEMO HERE
I'm having trouble with jQuery's on event delegation:
Here's my code:
HTML
<body>
<!-- Page Content Wrapper-->
<div id="sb-site">
<div id="overlay"> </div>
<!-- Ajax loaded here -->
<div id="ajax-loadHeader" class="homeNavbar">
</div>
</div>
<!-- End Page Content Wrapper -->
</body>
JS
$.get("header.html").done(function (data) {
var html = $(data);
var transition = $("#ajax-loadHeader").hasClass("homeNavbar");
if(transition){
html = html.attr("data-transitions","true").addClass("home");
}
$("#ajax-loadHeader").append(html);
$.slidebars({
siteClose: true, // true or false
disableOver: 767, // integer or false
scrollLock: true // true or false
});
});
The problem is on the following functions. None of them are fired when i click the buttons. But, after jQuery 1.7, $(document).on("click","selector",function(){}); should work even for dynamically loaded elements.
I've also tried: $("selector").on("click",function(){});
The
//The element is present on header.html.
$(document).on("click","#mobile-hamburger-menu-open",function(){
$("#overlay").toggleClass("overlay");
$("body").toggleClass("overlayed");
$("#mobile-hamburger-menu-close").removeClass("hide");
$("#mobile-hamburger-menu-open").addClass("hide");
$("#sb-site").addClass("locked");
});
//The element is present on header.html.
$(document).on("click","#mobile-hamburger-menu-close",function(){
$("#overlay").toggleClass("overlay");
$("body").toggleClass("overlayed");
$("#mobile-hamburger-menu-close").addClass("hide");
$("#mobile-hamburger-menu-open").removeClass("hide");
$("#sb-site").removeClass("locked");
});
//The #navbar-top element is present on header.html.
$(document).on("click","#overlay, #navbar-top nav[class*='navbar-default']",function(){
if($("#overlay").hasClass("overlay")){
$("#overlay").removeClass("overlay");
$("body").removeClass("overlayed");
$("#mobile-hamburger-menu-close").addClass("hide");
$("#mobile-hamburger-menu-open").removeClass("hide");
$("#sb-site").removeClass("locked");
}
});
HTML present in header.html
<div id="login-section" class="login-section closed container-fluid">
<div class="row">
<div class="col-md-8 col-sm-6 hidden-xs banner-login">
<div class="row">
<div class="col-md-6 col-sm-12 col-md-offset-6 col-sm-offset-0">
<div class="banner-login-text">
<div class="banner-login-title">
text
</div>
<p>
text
</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 no-gutters">
<!-- Login Content -->
<div class="row no-gutters">
<div class="col-md-6 col-sm-6 col-xs-6">
<div id="sou-cliente-btn" class="tab-btn tab-active">
text
</div>
<div class="arrow-tab"></div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div id="nao-sou-cliente-btn" class="tab-btn">
text
</div>
<div class="arrow-tab"></div>
</div>
</div>
<div class="login-content">
<div class="login-form">
<form id="form-validate-login">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="col-md-3 col-sm-4">E-mail</label>
<div class="col-md-9 col-sm-8">
<input id="usernameField" type="text" data-rule-required="true" class="login-input" placeholder="nome#example.com">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="col-md-3 col-sm-4">Senha</label>
<div class="col-md-9 col-sm-8">
<input id="passwordField" data-inputmask-regex="[a-zA-Z0-9]{8,15}" data-rule-minlength="8" data-rule-maxlength="15" type="password" data-rule-required="true" class="login-input required" placeholder="Digite sua senha">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="submit" class="btn btn-primary"> entrar </button>
</div>
</div>
</form>
<div class="row">
<div class="col-md-12 col-xs-12"> <a class="link-arrow">Esqueci meus dados</a> </div>
</div>
<div class="row no-login">
<div class="col-md-12 col-xs-12"> <span>Se você não possui login:</span> </div>
<div class="col-md-12">
<a class="btn btn-style2"> crie seu primeiro cadastro </a>
</div>
</div>
</div>
<div class="novo-cadastro-section hide">
<span class="nao-cliente-title">text</span>
<br/>
<p class="nao-cliente-subtitle">text</p>
<a class="btn btn-primary">text</a>
</div>
</div>
<!-- End Login Content -->
<div class="row area-login login-especial-input hide">
<div class="col-md-12 col-xs-12">
<select class="col-md-12 col-xs-12 padding15">
<option selected disabled="disabled">Estabelecimento</option>
</select>
</div>
</div>
<div class="col-md-8 nao-cadastrado-section-container hide">
<div class="hidden-xs nao-cadastrado-section">
<div class="row">
<div class="col-md-12"> <span class="nao-cadastrado-title">Não é cadastrado?</span> </div>
</div>
<div class="row nao-cadastrado-description">
<div class="col-md-12"> <span class="">text</span> </div>
</div>
<div class="row nao-cadastrado-btns">
<div class="col-md-6">
<div class="row area-login">
<div class="col-md-12 col-xs-12"> <strong><span class="control-label">Já sou cliente</span></strong> </div>
</div>
<div class="row area-login">
<div class="col-md-12">
<button type="submit" class="btn col-md-12 col-xs-12 primeiro-cadastro-btn"> Criar meu primeiro acesso </button>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row area-login">
<div class="col-md-12 col-xs-12"> <strong><span class="control-label">Não sou cliente</span></strong> </div>
</div>
<div class="row area-login">
<div class="col-md-12">
<button type="submit" class="btn col-md-12 col-xs-12 primeiro-cadastro-btn"> Quero testar o gerenciador</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row area-login login-especial-input hide">
<div class="col-md-12">
<div class="input-group"> <span class="input-group-addon login-description"> Código </span>
<input type="text" class="login-input" placeholder="XXXXXXXXXXXX">
</div>
</div>
</div>
</div>
<div class="primeiro-cadastro-section"> </div>
</div>
</div>
<!-- End Login -->
<!-- Header -->
<header id="navbar-top" data-transitions="false">
<div class="container-fluid over-video-container">
<nav class="navbar navbar-default over-video-navbar">
<div class="container">
<!-- Nav Left -->
<div class="col-md-1 col-sm-2 col-xs-7 col-brand">
<div class="navbar-header">
<!-- Menu hamburger -->
<button id="mobile-hamburger-menu-open" type="button" class="mobile-sidebar-menu navbar-toggle collapsed is-closed sb-open-left" aria-expanded="false" aria-controls="navbar">
<div class="label-hamburger"></div>
<div class="icon"></div>
</button>
<button id="mobile-hamburger-menu-close" type="button" class="mobile-sidebar-menu navbar-toggle collapsed is-closed sb-close hide" aria-expanded="false" aria-controls="navbar">
<div class="label-hamburger"></div>
<div class="icon"></div>
</button>
<!-- End Menu hamburger -->
<!-- Logo -->
<a class="navbar-brand" href="index.html" itemprop="url">
<img class="logo-svg" src="images/logo_rede.svg" itemprop="logo">
<!-- Logo PNG for IE8 -->
<img class="logo-png" src="images/logo_rede.png" >
</a>
<!-- End Logo -->
</div>
</div>
<!-- End Nav Left -->
<div class="col-md-4 col-sm-4 col-xs-5 pull-right nav-right-container">
<!-- Nav Right -->
<ul class="nav navbar-nav navbar-right">
<li class="col-md-4 col-md-offset-1 col-sm-5 help col-xs-6">
<!-- AJUDA Ajuda -->
</li>
<li id="my-account-section" class="my-account col-md-7 col-sm-7 col-xs-6"> <a role="button">Minha Conta<span class="arrow hidden-xs hidden-sm"></span></a> </li>
</ul>
<!-- End Nav Right -->
</div>
<div class="col-md-7 col-sm-7 col-xs-12 col-collapse">
<!-- Collapse -->
<div id="navbar-rede" class="navbar-collapse collapse" aria-expanded="false">
<!-- Menu Dropdown -->
<ul class="nav navbar-nav">
<li class="visible-xs">
<div class="col-xs-12 input-group mobile-search-bar-container">
<div class="mobile-search-bar">
<input type="text" class="col-xs-10" placeholder="Digite aqui o que procura..." />
</div>
</div>
</li>
<!-- Produtos -->
<li id="dropdown-produtos" class="dropdown dynamic-image-dropdown">
Nossos Produtos
<!-- Dropdown container -->
<ul class="dropdown-menu dropdown-menu-produtos">
<!-- Links -->
<div class="col-links">
<li data-dropdown-link="0" class="dropdown-item active"> Para celular</li>
<li data-dropdown-link="1" class="dropdown-item"> <a href="#" >Sem fio</a> </li>
<li data-dropdown-link="2" class="dropdown-item"> <a href="#" >Com fio</a> </li>
<li data-dropdown-link="3" class="dropdown-item"> Vendas online </li>
<li data-dropdown-link="4" class="dropdown-item"> <a href="#" >Grandes empresas</a> </li>
<li data-dropdown-link="5" class="dropdown-item"> <a href="#" >Adicionais</a> </li>
<li data-dropdown-link="6" class="dropdown-item"> Todos os produtos </li>
</div>
<div class="col-links">
<li class="dropdown-subitem"> Nome Produto</li>
<li class="dropdown-subitem"> <a href="#" >Nome Produto</a> </li>
<li class="dropdown-subitem"> <a href="#" >Nome Produto</a> </li>
<li class="dropdown-subitem"> Nome Produto </li>
<li class="dropdown-subitem"> <a href="#" >Nome Produto</a> </li>
<li class="dropdown-subitem"> <a href="#" >Nome Produto</a> </li>
<li class="dropdown-subitem"> Nome Produto </li>
</div>
<!-- End Links -->
<!-- Imagem -->
<div class="col-img hidden-sm hidden-xs">
<img data-related-link="0" class="img-active" src="images/menu_maquininha_celular.png" >
<img data-related-link="1" class="" src="images/menu_maquininha_celular_2.png" >
<img data-related-link="2" class="" src="images/menu_maquininha_celular_3.png" >
<img data-related-link="3" class="" src="images/menu_maquininha_celular_4.png" >
<img data-related-link="4" class="" src="images/menu_maquininha_celular.png" >
<img data-related-link="5" class="" src="images/menu_maquininha_celular_2.png" >
<img data-related-link="6" class="" src="images/menu_maquininha_celular_3.png" >
</div>
<!-- End Imagem -->
</ul>
<!-- End Dropdown container -->
</li>
<!-- End Produtos -->
<!-- Tipos Negócio -->
<li id="dropdown-tipos-negocio" class="dropdown dynamic-image-dropdown">
Tipos de Negócio
<!-- Dropdown container -->
<ul class="dropdown-menu">
<!-- Links -->
<div class="col-links">
<li data-dropdown-link="0" class="dropdown-item active"> Restaurantes, Bares </li>
<li data-dropdown-link="1" class="dropdown-item"> Táxis </li>
<li data-dropdown-link="2" class="dropdown-item"> Lojistas </li>
<li data-dropdown-link="3" class="dropdown-item"> Vendedores ambulantes, feirantes </li>
<li data-dropdown-link="4" class="dropdown-item"> Serviços de bem-estar e beleza </li>
<li data-dropdown-link="5" class="dropdown-item"> Lojas online </li>
<li data-dropdown-link="6" class="dropdown-item products-2"> <a href="#">Não encontrou seu tipo de negócio? <br/>
Veja <span class="bold">Nossos produtos</span></a>
</li>
</div>
<!-- End Links -->
<!-- Imagem -->
<div class="col-img hidden-sm hidden-xs">
<img data-related-link="0" class="img-active" src="images/menu_tipos_negocio.jpg" >
<img data-related-link="1" src="images/menu_tipos_negocio_2.jpg" >
<img data-related-link="2" src="images/menu_tipos_negocio_3.jpg" >
<img data-related-link="3" src="images/menu_tipos_negocio_4.jpg" >
<img data-related-link="4" src="images/menu_tipos_negocio_5.jpg" >
<img data-related-link="5" src="images/menu_tipos_negocio_6.jpg" >
<img data-related-link="6" src="images/menu_tipos_negocio_7.jpg" >
</div>
<!-- End Imagem -->
</ul>
<!-- End Dropdown container -->
</li>
<!-- End Tipos Negócio -->
</ul>
<!-- End Nav Right -->
</div>
<!-- End Collapse -->
</div>
</div>
</nav>
</div>
</header>
Solved it.
So freaking simple. Just put the functions inside the done function of the AJAX call.
Thanks for all those who helped me!