'uncaught typeerror $(...).sortable is not a function laravel
I am Using jQuery UI sortable to make a playlist sortable and save the new position in database i have done the same code in php and jquery and it is working but when i am implementing the same code in laravel it is not working. I've followed the directions in the jQuery UI documentation but still I'm getting the error that .sortable is not a function. Here the layout code:
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Billboard.v.02</title>
<!-- plugins:css -->
<link rel="stylesheet" href="{{ asset('simple-line-icons/css/simple-line-icons.css') }}">
<link rel="stylesheet" href="{{ asset('flag-icon-css/css/flag-icon.min.css') }}">
<link rel="stylesheet" href="{{ asset('css/vendor.bundle.base.css') }}">
<!-- endinject -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css"> -->
<!-- Plugin css for this page -->
<link rel="stylesheet" href="{{ asset('select2/select2.min.css') }}">
<link rel="stylesheet" href="{{ asset('select2-bootstrap-theme/select2-bootstrap.min.css') }}">
<!-- End plugin css for this page -->
<!-- inject:css -->
<!-- endinject -->
<!-- Layout styles -->
<link rel="stylesheet" href="{{ asset('css/style.css') }}" />
<link rel="shortcut icon" href="{{ asset('images/favicon.png') }}" />
@yield('css')
</head>
<body>
<div class="container-scroller">
<!-- partial:../../partials/_navbar.html -->
<nav class="navbar default-layout-navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row">
<div class="navbar-brand-wrapper d-flex align-items-center">
<a class="navbar-brand brand-logo" href="{{ route('dashboard') }}">
<img src="{{ asset('images/logo.svg') }}" alt="logo" class="logo-dark" />
</a>
<a class="navbar-brand brand-logo-mini" href="#"><img src="{{ asset('images/logo-mini.svg') }}" alt="logo" /></a>
</div>
<div class="navbar-menu-wrapper d-flex align-items-center flex-grow-1">
<h5 class="mb-0 font-weight-medium d-none d-lg-flex">Welcome to xx dashboard!</h5>
<ul class="navbar-nav navbar-nav-right ml-auto">
<div class="ml-3 relative">
</div>
<li class="nav-item dropdown d-none d-xl-inline-flex user-dropdown">
<a class="nav-link dropdown-toggle" id="UserDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
@if (Laravel\Jetstream\Jetstream::managesProfilePhotos())
<img class="img-xs rounded-circle ml-2" src="{{ Auth::user()->profile_photo_url }}"> <span class="font-weight-normal">{{ Auth::user()->name }}</span>
@else
<span class="inline-flex rounded-md">
<button type="button" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition">
{{ Auth::user()->name }}
<svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</span>
@endif
</a>
<div class="dropdown-menu dropdown-menu-right navbar-dropdown" aria-labelledby="UserDropdown">
<div class="dropdown-header text-center">
@if (Laravel\Jetstream\Jetstream::managesProfilePhotos())
<img class="img-md rounded-circle" src="{{ Auth::user()->profile_photo_url }}" alt="Profile image">
@endif
<p class="mb-1 mt-3">{{ Auth::user()->name }}</p>
<p class="font-weight-light text-muted mb-0">{{ Auth::user()->email }}</p>
</div>
<a class="dropdown-item" href="{{ route('profile.show') }}"><i class="dropdown-item-icon icon-user text-primary"></i> My Profile</a>
<a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();"><i class="dropdown-item-icon icon-power text-primary"></i>Sign Out</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
@csrf
</form>
</div>
</li>
</ul>
<button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-toggle="offcanvas">
<span class="icon-menu"></span>
</button>
</div>
</nav>
<div class="container-fluid page-body-wrapper">
<nav class="sidebar sidebar-offcanvas" id="sidebar">
<ul class="nav">
<li class="nav-item nav-category">
<span class="nav-link">Dashboard</span>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('dashboard') }}">
<span class="menu-title">Dashboard</span>
<i class="icon-screen-desktop menu-icon"></i>
</a>
</li>
<li class="nav-item nav-category">
<span class="nav-link">Display</span>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('add.display') }}">
<span class="menu-title">Add Display</span>
<i class="icon-screen-desktop menu-icon"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('view.display') }}">
<span class="menu-title">All Display</span>
<i class="icon-screen-desktop menu-icon"></i>
</a>
</li>
<li class="nav-item nav-category"><span class="nav-link">Content</span></li>
<li class="nav-item">
<a class="nav-link" href="{{ route('view.media') }}">
<span class="menu-title">Media & Content</span>
<i class="icon-grid menu-icon"></i>
</a>
</li>
<li class="nav-item nav-category"><span class="nav-link">Playlist</span></li>
<li class="nav-item">
<a class="nav-link" href="{{ route('add.playlist') }}">
<span class="menu-title">Add Playlist</span>
<i class="icon-chart menu-icon"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('view.playlist') }}">
<span class="menu-title">All Playlist</span>
<i class="icon-chart menu-icon"></i>
</a>
</li>
</ul>
</nav>
<div class="main-panel">
@yield('content')
<footer class="footer">
<div class="d-sm-flex justify-content-center justify-content-sm-between">
<span class="text-muted d-block text-center text-sm-left d-sm-inline-block">Copyright © manikgoswami.com 2022</span>
</div>
</footer>
</div>
</div>
</div>
@yield('script')
<!-- container-scroller -->
<!-- plugins:js -->
<script src="{{ asset('js/vendor.bundle.base.js') }}"></script>
<!-- endinject -->
<!-- Plugin js for this page -->
<script src="{{ asset('select2/select2.min.js') }}"></script>
<script src="{{ asset('typeahead.js/typeahead.bundle.min.js') }}"></script>
<!-- End plugin js for this page -->
<!-- inject:js -->
<script src="{{ asset('js/off-canvas.js') }}"></script>
<script src="{{ asset('js/misc.js') }}"></script>
<!-- endinject -->
<!-- Custom js for this page -->
<script src="{{ asset('js/typeahead.js') }}"></script>
<script src="{{ asset('js/select2.js') }}"></script>
<!-- End custom js for this page -->
</body>
</html>
Here is my code:
@section('css')
<style>
.contenthide{
display: none;
}
.contentbody{
height: 400px;
padding: 10px;
background: #ECF0F4;
margin-top: 10px;
overflow-y: scroll;
}
.contentbodyform1{
height: 400px;
padding: 10px;
background: #ECF0F4;
margin-top: 10px;
overflow-y: scroll;
}
.contentbodyform2{
height: 10px;
padding: 10px;
background: #fff;
margin-top: 10px;
}
.actionbody{
margin-top: 10px;
padding-top: 15px;
padding-left: 400px;
padding-bottom: 64px;
}
.contentcard{
width: 100px;
height: 100px;
margin: 5px;
padding: 5px;
}
.imgcard{
position: relative;
}
.imgcheck:checked{
/* border: 1px solid blue; */
z-index: 99;
}
/* .imgcheck:checked .imgcheck:parent{
border: 1px solid #0D6EFD;
} */
.imgcard:hover .imgcheck{
z-index: 99;
}
.imgcheck{
position: absolute;
top: 2px;
left: 2px;
z-index: -1;
margin: 0 !important;
}
.plsc{
background: #CCE5FF;
height: 90px;
}
.plcolclass{
padding-top: 32px;
}
.plcolinclass{
padding-top: 26px;
}
</style>
<style>
.op{
border: 1px solid #bdc4cc;
font-family: "Open Sans", sans-serif;
font-size: 0.8125rem;
width: 64px;
}
input[type="file"] {
display: block;
}
.imageThumb {
max-height: 75px;
border: 2px solid;
padding: 1px;
cursor: pointer;
}
.pip {
display: inline-block;
margin: 10px 10px 0 0;
}
</style>
@endsection
@extends('layouts.master')
@section('content')
<div class="content-wrapper">
<div class="page-header">
<h3 class="page-title"> Add {{$playlist->name}} Content </h3>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
<li class="breadcrumb-item"><a href="{{ route('view.playlist') }}">All Playlist</a></li>
<li class="breadcrumb-item active" aria-current="page"> Create {{$playlist->name}} Content </li>
</ol>
</nav>
</div>
<div class="row">
<div class="col-md-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
@if (session('msgsuccess'))
@if(session('msgsuccess')!=NULL)
<div class="alert alert-success alert-dismissible fade show" role="alert">
{{ session('msgsuccess') }}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
@endif
@endif
@if (session('msgfail'))
@if(session('msgfail')!=NULL)
@foreach(session('msgfail') as $msg)
<!-- arrayIsEmpty -->
<div class="alert alert-danger alert-dismissible fade show" role="alert">
{{ $msg }}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
@endforeach
@endif
@endif
<div class="row">
<div class="col-6">
<ul class="nav nav-tabs">
<li class="active"><a id="imagetab" href="#imagediv" data-href="" class="card-title">Image</a></li>
<li><a id="Videotab" href="#videodiv" data-href="" class="card-title">Video</a></li>
<!-- <li><a id="webtab" href="#webdiv" data-href="" class="card-title">Web</a></li> -->
</ul>
<div class="row">
<div class="col">
<div id="imagediv" class="row">
<div id="imagedivbody" class="contentbody d-flex flex-wrap">
</div>
</div>
<div id="videodiv" class="contenthide">
<div id="videodivbody" class="contentbody d-flex flex-wrap">
</div>
</div>
<!-- <div id="webdiv" class="contenthide">
<div class="contentbody">
web
</div>
</div> -->
</div>
</div>
</div>
<div class="col-6">
<h4>{{$playlist->name}}</h4>
<div>
<input type="text" value="{{$playlist->name}}">
<input name="currentplaylistid" id="currentplaylistid" type="text" value="{{$playlist->id}}" hidden>
</div>
<form id="playlistcontentform" action="{{ route('test.images') }}" method="POST">
@csrf
<table id="playlistcontent" class="table table-stripped table-hovered">
<thead>
<th>Playlist Content</th>
</thead>
<tbody>
</tbody>
</table>
<!-- <div id="playlistcontentdiv" class="contentbodyform1 d-flex flex-wrap">
</div> -->
<div class="contentbodyform2">
<button id="" type="submit" class="btn btn-danger mr-2">add</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
Here is my js
@section('script')
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function () {
$('table tbody').sortable({
update: function (event, ui) {
$(this).children().each(function (index) {
if ($(this).attr('data-position') != (index+1)) {
$(this).attr('data-position', (index+1)).addClass('updated');
}
});
saveNewPositions();
}
});
});
function saveNewPositions() {
var positions = [];
$('.updated').each(function () {
positions.push([$(this).attr('data-index'), $(this).attr('data-position')]);
$(this).removeClass('updated');
});
$.ajax({
url: 'index.php',
method: 'POST',
dataType: 'text',
data: {
update: 1,
positions: positions
}, success: function (response) {
console.log(response);
}
});
}
</script>
<script>
function imagecontent()
{
var div = $('#imagedivbody');
div.empty();
var id= {{$playlist->id}};
var imgui = "{{ route('get.images'), ':id'}}";
imgui = imgui.replace(':id', id);
$.getJSON(imgui, function(data){
$.each( data, function( key, value ) {
div.append(`
<div class="contentcard">
<div class="imgcard">
<img class="w-100 h-100 imgtagvalue" src="{{ asset('`+value.path+`/`+value.code+`') }}" alt="" data-id="`+value.id+`">
</div>
</div>
`);
});
});
}
function videocontent()
{
var div = $('#videodivbody');
div.empty();
var id= {{$playlist->id}};
if(id==null)
{
var vdui = "{{ route('get.videos') }}"
}
else
{
var vdui = "{{ route('get.videos'), ':id'}}"
vdui = vdui.replace(':id', id);
}
$.getJSON(vdui, function(data){
$.each( data, function( key, value ) {
div.append(`
<div class="contentcard">
<div class="imgcard videotagvalue" data-id="`+value.id+`">
<video width="100" height="100" controls>
<source src="{{ asset('`+value.path+`/`+value.code+`') }}" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
`);
});
});
}
function ajaxfun(formdata)
{
var ref = $('#playlistcontentdiv');
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: "POST",
url: "{{ route('add.playlist_content') }}",
data: formdata,
contentType: false,
processData: false,
success: function(result) {
ref.empty();
playlistcontent({{$playlist->id}});
}
});
}
function playlistcontent(id)
{
var ref = $('table tbody');
ref.empty();
var yui = "{{ route('view.playlist_content', ':id') }}";
yui = yui.replace(':id', id);
$.getJSON(yui, function(data) {
$.each(data, function(key, val){
if(val.type=='image')
{
ref.append(`
<tr><td data-index="`+val.id+`" data-position="`+val.slno+`">
`+val.name+`
</td></tr>
`);
}
else if(val.type=='video')
{
ref.append(`
<tr><td data-index="`+val.id+`" data-position="`+val.slno+`">
`+val.name+`
</td></tr>
`);
}
});
});
}
playlistcontent({{$playlist->id}});
imagecontent();
var imagediv= $('#imagediv');
var videodiv= $('#videodiv');
var webdiv= $('#webdiv');
$(document).on('click', '#imagetab', function(e){
e.preventDefault();
if(!(videodiv.hasClass('contenthide')))
{
videodiv.addClass('contenthide');
}
if(!(webdiv.hasClass('contenthide')))
{
webdiv.addClass('contenthide');
}
if((imagediv.hasClass('contenthide')))
{
imagediv.removeClass('contenthide');
}
});
$(document).on('click','.imgtagvalue', function(e){
console.log($(this).attr('data-id'));
var playlist_id = $('#currentplaylistid').val();
var cid = $(this).attr('data-id');
var parent = $(this).parent();
var gparent = parent.parent();
gparent.attr('hidden',true);
formdata = new FormData();
formdata.append("playlist_id", playlist_id);
formdata.append("content_id", cid);
formdata.append("content_duration", '10');
formdata.append("content_type", 'image');
ajaxfun(formdata);
});
$(document).on('click', '#deleteimagebtn', function(e){
e.preventDefault();
var items = [];
$("input[name='hulk[]']:checked").each(function(){items.push($(this).val());});
console.log(items);
});
$(document).on('click','.videotagvalue', function(e){
console.log($(this).attr('data-id'));
var playlist_id = $('#currentplaylistid').val();
var cid = $(this).attr('data-id');
var src = $(this).children();
var pathsrc = src.children();
var parent = $(this).parent();
parent.attr('hidden',true);
var ref = $('#playlistcontentdiv');
formdata = new FormData();
formdata.append("playlist_id", playlist_id);
formdata.append("content_id", cid);
formdata.append("content_duration", '10');
formdata.append("content_type", 'video');
ajaxfun(formdata);
});
// $(document).on('click', '#addimagebtn', function(e){
// e.preventDefault();
// console.log($('input[name=contentduration]').val());
// });
$(document).on('click', '#Videotab', function(e){
e.preventDefault();
if(!(webdiv.hasClass('contenthide')))
{
webdiv.addClass('contenthide');
}
if(!(imagediv.hasClass('contenthide')))
{
imagediv.addClass('contenthide');
}
if((videodiv.hasClass('contenthide')))
{
videodiv.removeClass('contenthide');
}
videocontent();
});
$(document).on('click', '.delete_content', function(e){
e.preventDefault();
var ref = $('#playlistcontentdiv');
var manik = $(this).attr('data-href');
var id = $(this).attr('data-id');
manik = manik.replace(':id', id);
console.log(id);
$.getJSON(manik, function(data) {
console.log(data)
ref.empty();
playlistcontent({{$playlist->id}});
});
});
</script>
@endsection
can any one tell me what i am doing wrong?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|