Injecting jquery code from child and jquery include in parent [Blade - Laravel] - php

im using laravel and blade for templates. I have a problem, i have a base template called (base.blade.php), where i include all js files (jQuery too).
The problem comes when im child template (myadpack.blade.php extends from base.blade.php). I want to use jQuery in child, but it seems to be impossible, i can do normal js calls, but not using jQuery (that is included in parent). I paste these files here:
base.blade.php
<!DOCTYPE HTML>
<html>
<head>
<title>Tonhits</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="{{ asset('css/font-awesome.min.css') }}" />
<link rel="stylesheet" href="{{ asset('css/bootstrap-theme.css') }}" />
<link rel="stylesheet" href="{{ asset('css/main.css') }}" />
<link rel="stylesheet" href="{{ asset('css/table.css') }}" />
<link rel="stylesheet" href="{{ asset('css/tablesaw.css') }}" />
<link rel="stylesheet" href="{{ asset('http://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css') }}" />
#section('css')
#show
</head>
<body class="no-sidebar">
<div id="page-wrapper">
<!-- Header Wrapper -->
<div id="header-wrapper">
<!-- Header -->
<div id="header" class="container">
<!-- Logo -->
<h1><a id="logo">Tonhits</a></h1>
<!-- Nav -->
#include('nav/nav_anon')
</div>
</div>
<!-- Main Wrapper -->
<div id="main-wrapper">
<!-- Main -->
<div id="page" class="container">
<!-- Main Heading -->
<div class="title-heading">
<h2>#yield('titleBig')</h2>
<p> #yield('titleSmall')</p>
</div>
<!-- Main Content -->
<div id="main">
<div class="row">
<div id="content" class="12u">
<!-- <header>
<h2>Nunc fringilla dis natoque amet gravida turpis</h2>
</header> -->
#section('content')
#show
</div>
</div>
</div>
<!-- Main Content -->
</div>
<!-- Main -->
</div>
<!-- Copyright -->
<div id="copyright">
Tonhits. All rights reserved
</div>
</div>
<!-- Scripts -->
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/jquery.dropotron.min.js') }}"></script>
<script src="{{ asset('js/skel.min.js') }}"></script>
<script src="{{ asset('js/util.js') }}"></script>
<script src="{{ asset('js/main.js') }}"></script>
<script src="{{ asset('js/tablesaw.js') }}"></script>
<script src="{{ asset('http://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js') }}"></script>
#yield('js')
</body>
</html>
myadpack.blade.php
#extends('base')
#section('titleBig', 'Me')
#section('titleSmall', 'My adpack overwiev')
</script>
#section('js')
<script type="text/javascript" >
$(document).on('ready', function(){
alert("a");
});
</script>
#endsection
#section('content')
Here you can see your purchased adpacks, so you can have a detailed tracing.
<table id="adpacks">
<tr>
<th>Test</th>
<th>Test</th>
</tr>
<tr>
<td>Data</td>
<td>Data 2</td>
</tr>
</table>
#endsection
In parent i tried with yield, section, and nothing.
What it could be?
Thank you for reading me.


base.blade.php
<!DOCTYPE HTML>
<html>
<head>
<title>Tonhits</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="{{ asset('css/font-awesome.min.css') }}" />
<link rel="stylesheet" href="{{ asset('css/bootstrap-theme.css') }}" />
<link rel="stylesheet" href="{{ asset('css/main.css') }}" />
<link rel="stylesheet" href="{{ asset('css/table.css') }}" />
<link rel="stylesheet" href="{{ asset('css/tablesaw.css') }}" />
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" />
#yield('css')
</head>
<body class="no-sidebar">
<div id="page-wrapper">
<!-- Header Wrapper -->
<div id="header-wrapper">
<!-- Header -->
<div id="header" class="container">
<!-- Logo -->
<h1><a id="logo">Tonhits</a></h1>
<!-- Nav -->
#include('nav/nav_anon')
</div>
</div>
<!-- Main Wrapper -->
<div id="main-wrapper">
<!-- Main -->
<div id="page" class="container">
<!-- Main Heading -->
<div class="title-heading">
<h2>#yield('titleBig')</h2>
<p> #yield('titleSmall')</p>
</div>
<!-- Main Content -->
<div id="main">
<div class="row">
<div id="content" class="12u">
<!-- <header>
<h2>Nunc fringilla dis natoque amet gravida turpis</h2>
</header> -->
#yield('content')
</div>
</div>
</div>
<!-- Main Content -->
</div>
<!-- Main -->
</div>
<!-- Copyright -->
<div id="copyright">
Tonhits. All rights reserved
</div>
</div>
<!-- Scripts -->
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/jquery.dropotron.min.js') }}"></script>
<script src="{{ asset('js/skel.min.js') }}"></script>
<script src="{{ asset('js/util.js') }}"></script>
<script src="{{ asset('js/main.js') }}"></script>
<script src="{{ asset('js/tablesaw.js') }}"></script>
<script src="http://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
#yield('js')
</body>
</html>
myadpack.blade.php
#extends('base')
#section('titleBig', 'Me')
#section('titleSmall', 'My adpack overwiev')
#section('content')
Here you can see your purchased adpacks, so you can have a detailed tracing.
<table id="adpacks">
<tr>
<th>Test</th>
<th>Test</th>
</tr>
<tr>
<td>Data</td>
<td>Data 2</td>
</tr>
</table>
#endsection
#section('js')
<script type="text/javascript">
$(document).on('ready', function() {
alert("a");
});
</script>
#endsection

Related

problem in using select2 in my laravel project

my link stylesheet is
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/dashboard-rtl/">
<link href="https://fonts.googleapis.com/css?family=Open%20Sans:300,400,400italic,600,600italic,700,700italic&subset=latin,latin-ext" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<!-- Bootstrap core CSS -->
<link href="{{ asset('assets/dist/css/bootstrap.rtl.min.css') }}" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400italic,700,700italic,900,900italic&subset=latin,latin-ext" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open%20Sans:300,400,400italic,600,600italic,700,700italic&subset=latin,latin-ext" rel="stylesheet">
<link href="{{ asset('assets/dist/css/dashboard.rtl.css') }}" rel="stylesheet">
<link href="{{ asset('assets/dist/css/font-awesome.min.css') }}" rel="stylesheet">
#livewireStyles
and script tags are
<script src="{{ asset('assets/dist/js/bootstrap.bundle.min.js') }}"></script>
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.24.1/feather.min.js" integrity="sha384-EbSscX4STvYAC/DxHse8z5gEDaNiKAIGW+EpfzYTfQrgIlHywXXrM9SUIZ0BlyfF" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha384-i+dHPTzZw7YVZOx9lbH5l6lP74sLRtMtwN2XjVqjf3uAGAREAF4LMIUDTWEVs4LI" crossorigin="anonymous"></script><script src="dashboard.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAkeLMlsiwzp6b3Gnaxd86lvakimwGA6UA&callback=initMap"></script>
<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://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
#livewireScripts
#stack('scripts')
and my view is
<form class="form-horizontal" wire:submit.prevent="storeServices">
<div class="form-group">
<label class="col-md-4 control-label">اختار العيادة</label><br/>
<div class="col-md-4" wire:ignore>
<select class="selectClinic form-control" name="clinics[]" multiple="multiple">
#foreach($clinics as $clinic)
<option value="{{$clinic->id}}">{{$clinic->name}}</option>
#endforeach
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">اختارالخدمات</label><br/>
<div class="col-md-4" wire:ignore>
<select class="form-control" name="services[]" id="selectServices" multiple="multiple">
#foreach($services as $service)
<option value="{{$service->id}}">{{$service->name}}</option>
#endforeach
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4">
<button type="submit" class="btn btn-primary">حفظ</button>
</div>
</div>
</form>
the view must not be like this there is no feel for select2 in my laravel view file and do not understand the reason for this i tried alot of things and have the same problem

Laravel SweetAlert not working inside validation fails block

I am using realrashid/sweet-alert version 3.1 with laravel 5.8
the issue is when I am using alert after form success or after validation failed its not working here is my code
public function store(Request $request)
{
$rules = [
'title' => 'required',
'title_desc' => 'required',
'desc' => 'required',
'pic' => 'required',
];
$customMessages = [
'title_desc.required' => 'The Short Description field is required.',
];
$validator = Validator::make($request->all(), $rules, $customMessages);
if ($validator->fails()) {
Alert::error('error', 'Validation Errors');
return back();
}
$update_arr = array(
'title' => "hello",
'description' => "world",
'title_desc' => "hello world",
'added_on' => date("Y-m-d H:i:s")
);
StoriesModel::create($update_arr);
Alert::success('Success', 'Story Created Successfully');
return redirect('admin/stories');
}
in this code I used alert two times and its not working on both conditions
on the other hand
if I am using it like below
public function create()
{
Alert::error('error', 'Validation Errors');
$this->data['title'] = 'Stories';
$this->data['menu'] = 'stories';
return View::make('admin.stories.create', $this->data);
}
Its working fine
Here is my master layout
<!DOCTYPE html>
<html>
<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">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>#yield('title')</title>
<link href="{{ url('assets/admin/css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ url('assets/admin/font-awesome/css/font-awesome.css') }}" rel="stylesheet">
<!-- Toastr style -->
<link href="{{ url('assets/admin/css/plugins/toastr/toastr.min.css') }}" rel="stylesheet">
<!-- Gritter -->
<link href="{{ url('assets/admin/js/plugins/gritter/jquery.gritter.css') }}" rel="stylesheet">
<link href="{{ url('assets/admin/css/animate.css') }}" rel="stylesheet">
<link href="{{ url('assets/admin/css/style.css') }}" rel="stylesheet">
#yield('page_css_tags')
#yield('page_custom_css')
</head>
<body>
<div id="wrapper">
#include('layouts.admin.sidebar')
<div id="page-wrapper" class="gray-bg">
#include('layouts.admin.topbar')
#include('layouts.admin.content_header')
#yield('content')
#include('layouts.admin.footer')
</div>
</div>
<!-- Mainly scripts -->
<script src="{{ url('assets/admin/js/jquery-3.1.1.min.js') }}"></script>
<script src="{{ url('assets/admin/js/popper.min.js') }}"></script>
<script src="{{ url('assets/admin/js/bootstrap.js') }}"></script>
<script src="{{ url('assets/admin/js/plugins/metisMenu/jquery.metisMenu.js') }}"></script>
<script src="{{ url('assets/admin/js/plugins/slimscroll/jquery.slimscroll.min.js') }}"></script>
<!-- Flot -->
<script src="{{ url('assets/admin/js/plugins/flot/jquery.flot.js') }}"></script>
<script src="{{ url('assets/admin/js/plugins/flot/jquery.flot.tooltip.min.js') }}"></script>
<script src="{{ url('assets/admin/js/plugins/flot/jquery.flot.spline.js') }}"></script>
<script src="{{ url('assets/admin/js/plugins/flot/jquery.flot.resize.js') }}"></script>
<script src="{{ url('assets/admin/js/plugins/flot/jquery.flot.pie.js') }}"></script>
<!-- Peity -->
<script src="{{ url('assets/admin/js/plugins/peity/jquery.peity.min.js') }}"></script>
<script src="{{ url('assets/admin/js/demo/peity-demo.js') }}"></script>
<!-- Custom and plugin javascript -->
<script src="{{ url('assets/admin/js/inspinia.js') }}"></script>
<script src="{{ url('assets/admin/js/plugins/pace/pace.min.js') }}"></script>
<!-- jQuery UI -->
<script src="{{ url('assets/admin/js/plugins/jquery-ui/jquery-ui.min.js') }}"></script>
<!-- GITTER -->
<script src="{{ url('assets/admin/js/plugins/gritter/jquery.gritter.min.js') }}"></script>
<!-- Sparkline -->
<script src="{{ url('assets/admin/js/plugins/sparkline/jquery.sparkline.min.js') }}"></script>
<!-- Sparkline demo data -->
<script src="{{ url('assets/admin/js/demo/sparkline-demo.js') }}"></script>
<!-- ChartJS-->
<script src="{{ url('assets/admin/js/plugins/chartJs/Chart.min.js') }}"></script>
<!-- Date range use moment.js same as full calendar plugin -->
<script src="{{ url('assets/admin/js/plugins/fullcalendar/moment.min.js') }}"></script>
#yield('page_script_tags')
#yield('page_custom_script')
#include('sweetalert::alert')
</body>
</html>
you can see I have added #include('sweetalert::alert') before body tags ends
and here is the blade that extends the master
#extends("layouts.admin.master")
#section('title')
Butterfly | Stories
#endsection
#section('content_header_title')
Stories
#endsection
#section('page_css_tags')
<link href="{{ url('assets/admin/css/plugins/blueimp/css/blueimp-gallery.min.css') }}" rel="stylesheet">
<link href="{{ url('assets/admin/css/plugins/select2/select2.min.css') }}" rel="stylesheet">
<link href="{{ url('assets/admin/css/plugins/select2/select2-bootstrap4.min.css') }}" rel="stylesheet">
#endsection
#section('content')
<div class="wrapper wrapper-content">
<div class="row">
<div class="col-md-12">
<div class="ibox">
<div class="ibox-title">
<h5>{{ #$record ? "Edit" :'Create New' }} Story</h5>
</div>
<div class="ibox-content">
<form method="post" action="{{url('admin/store_story')}}"
enctype="multipart/form-data" role="form">
#csrf
<div class="form-group">
<select class="select2_demo_1 form-control" id="select_seaction" name="seaction"
required>
<option value="" disabled selected>Select Seaction</option>
<option value="header">Header</option>
<option value="middle">Middle Content</option>
<option value="content">Footer Content</option>
</select>
</div>
<div class="form-group">
<label for="title">Title</label>
<input type="text" placeholder="Enter Title" class="form-control" id="title" autofocus
value="{{ #$record ? $record->title : old('title') }}" name="title" required>
</div>
<div class="form-group">
<label for="title_desc">Short Description</label>
<input type="text" placeholder="Enter Short Description" class="form-control"
id="title_desc" value="{{ #$record ? $record->title_desc : old('title_desc') }}"
name="title_desc" required>
</div>
<div class="form-group">
<label for="desc">Story</label>
<textarea class="form-control" name="desc"
id="desc"
rows="5"
required>{{ (#$record) ? $record->description: old('desc') }}</textarea>
</div>
<label title="Upload image file" for="inputImage" class="btn btn-default">
<input type="file" accept="image/*" name="pic"
id="inputImage" required>
Upload image
</label>
<div class="lightBoxGallery" id="imageUpload_display">
#if(#$record)
<a href="{{asset(#$record->image_path)}}"
title="{{ #$record ? $record->title : old('title') }}" data-gallery="">
<img src="{{asset(#$record->image_path)}}">
</a>
#endif
<!-- The Gallery as lightbox dialog, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
</div>
<div class="form-group row">
<div class="col-sm-4 col-sm-offset-2">
<button class="btn btn-primary btn-sm" type="submit">Save changes</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
#endsection
#section('page_script_tags')
<script src="{{ url('assets/admin/js/plugins/blueimp/jquery.blueimp-gallery.min.js') }}"></script>
<!-- Select2 -->
<script src="{{ url('assets/admin/js/plugins/select2/select2.full.min.js') }}"></script>
#endsection
#section('page_custom_script')
<script>
$(document).ready(function (event) {
$(".select2_demo_1").select2({
theme: 'bootstrap4',
});
});
</script>
#endsection

CSS in Public dont work in Show Controller

show function can't get the files in public
I tried in other controller without resources it can read the css at img in public sorry for my english
public function show($id)
{
$brand = Brand::where('c_id', $id)->get();
return view('brand.pick')->with('brand',$brand);
}
This is my HTML blade file
#extends('layouts.app')
#section('content')
#foreach($brand as $b)
<option value="{{$b->b_name}}" selected>{{$b->b_name}}
</option>
#endforeach
the page don't have css and image
This is in Index function the css is working when I run in show function
This is my Blade file Layout.app
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<title>{{config ('app.name')}}</title>
<link rel="icon" href="img/favicon.png">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- animate CSS -->
<link rel="stylesheet" href="css/animate.css">
<!-- owl carousel CSS -->
<link rel="stylesheet" href="css/owl.carousel.min.css">
<!-- themify CSS -->
<link rel="stylesheet" href="css/themify-icons.css">
<!-- flaticon CSS -->
<link rel="stylesheet" href="css/flaticon.css">
<!-- font awesome CSS -->
<link rel="stylesheet" href="css/magnific-popup.css">
<!-- swiper CSS -->
<link rel="stylesheet" href="css/swiper.min.css">
<!-- style CSS -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
#include('inc.nav');
#yield('content');
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<!-- footer part start-->
<section class="footer-area section_padding">
<div class="container">
<div class="row">
<div class="col-xl-2 col-sm-4 mb-4 mb-xl-0 single-footer-
widget">
<h4>Top Products</h4>
<ul>
<li>Managed Website</li>
<li>Manage Reputation</li>
<li>Power Tools</li>
<li>Marketing Service</li>
</ul>
</div>
<div class="col-xl-2 col-sm-4 mb-4 mb-xl-0 single-footer-widget">
<h4>Quick Links</h4>
<ul>
<li>Jobs</li>
<li>Brand Assets</li>
<li>Investor Relations</li>
<li>Terms of Service</li>
</ul>
</div>
<div class="col-xl-2 col-sm-4 mb-4 mb-xl-0 single-footer-
widget">
<h4>Features</h4>
<ul>
<li>Jobs</li>
<li>Brand Assets</li>
<li>Investor Relations</li>
<li>Terms of Service</li>
</ul>
</div>
<div class="col-xl-2 col-sm-4 mb-4 mb-xl-0 single-footer-
widget">
<h4>Resources</h4>
<ul>
<li>Guides</li>
<li>Research</li>
<li>Experts</li>
<li>Agencies</li>
</ul>
</div>
<div class="col-xl-4 col-sm-8 col-md-8 mb-4 mb-xl-0 single-
footer-widget">
<h4>Newsletter</h4>
<p>You can trust us. we only send promo offers,</p>
<div class="form-wrap" id="mc_embed_signup">
<form target="_blank"
action="https://spondonit.us12.list-manage.com/subscribe/post?
u=1462626880ade1ac87bd9c93a&id=92a4423d01" method="get" class="form-
inline">
<input class="form-control" name="EMAIL"
placeholder="Your Email Address" onfocus="this.placeholder = ''"
onblur="this.placeholder = 'Your Email Address '" required=""
type="email">
<button class="click-btn btn btn-default text-
uppercase">subscribe</button>
<div style="position: absolute; left: -5000px;">
<input
name="b_36c4fd991d266f23781ded980_aefe40901a" tabindex="-1" value=""
type="text">
</div>
<div class="info"></div>
</form>
</div>
</div>
</div>
</div>
</section>
<footer class="copyright_part bottom">
<div class="container">
<div class="row align-items-center ">
<p class="footer-text m-0 col-lg-8 col-md-12"><!-- Link back
to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script>
All
rights reserved | This template is made with <i class="ti-heart" aria-
hidden="true"></i> by <a href="https://colorlib.com"
target="_blank">Colorlib</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC
BY
3.0. --></p>
<div class="col-lg-4 col-md-12 text-center text-lg-right
footer-social">
<i class="ti-facebook"></i>
<i class="ti-twitter"></i>
<i class="ti-instagram"></i>
<i class="ti-skype"></i>
</div>
</div>
</div>
</footer>
<!-- footer part end-->
<!-- jquery plugins here-->
<!-- jquery -->
<script src="js/jquery-1.12.1.min.js"></script>
<!-- popper js -->
<script src="js/popper.min.js"></script>
<!-- bootstrap js -->
<script src="js/bootstrap.min.js"></script>
<!-- aos js -->
<script src="js/aos.js"></script>
<!-- easing js -->
<script src="js/jquery.magnific-popup.js"></script>
<!-- swiper js -->
<script src="js/swiper.min.js"></script>
<!-- swiper js -->
<script src="js/masonry.pkgd.js"></script>
<!-- particles js -->
<script src="js/owl.carousel.min.js"></script>
<!-- carousel js -->
<script src="js/swiper.min.js"></script>
<!-- swiper js -->
<script src="js/swiper_custom.js"></script>
<!-- custom js -->
<script src="js/custom.js"></script>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

Use asset helper of laravel.
<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
By default asset helper will search path inside public folder, or you can configure asset url in .env file.
https://laravel.com/docs/5.8/helpers#method-asset

The Select2 plugin not working in Laravel 5.4

I am using laravel 5.4. Now I am using select2 plugin for displaying my select options at multi-level. Here my code is
#extends('layouts.app')
#section('content')
<html lang="">
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel-body">
<div class="form-group">
<label for="matching_star" class="col-md-4 control-label">Matching Star</label>
<div class="col-md-6">
<select name="matching_star" class="form-control select2" id="matching-star" multiple>
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="{{ URL::asset('https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js') }}"></script>
<link rel="stylesheet" href="{{ URL::asset('https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css') }}" />
<script type="text/javascript" src="{{ URL::asset('https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js') }}"></script>
<script type="text/javascript">
$('#matching-star').select2();
</script>
</html>
#endsection
My app.blade.php
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<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>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- Scripts -->
<script>
window.Laravel = {!! json_encode([
'csrfToken' => csrf_token(),
]) !!};
</script>
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
It is not working only the input is visible. It suggest nothing when I am click the input.
If I remove the first line #extends('layouts.app') then it works fine. I think the App.js from App layout override the select2 plugin. How can I implement the multiselect without removing the App layout?. Thanks in advance.

wrap your javascript in a document ready like this
<script>
$(document).ready(function() {
$('#matching-star').select2();
});
</script>

1) Please check your select jQuery OR jQuery.min is properly load or Not.
2) Other wise jQuery are twice on your page.
i am not sure but just check it. i hope it's helpful.

Remove following from view and check again:
<script type="text/javascript" src="{{ URL::asset('https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js') }}"></script>
As far as I know Laravel's default app.js includes jQuery by default.

Why laravel don't show bootstrap from controller?

When I try to return a view from a route like this:
Route::get('/testid', function () {
$id = 1; // for test only
$title = 'Dashboard';
$username=Auth::user()->name;
$job=Auth::user()->job;
$p = 1;
$requestedorder = \App\Order::findOrfail($id);
return view('ViewOrder',compact('requestedorder','title','username','job','p'));
});
in the browser it shows up normally like any bootstrap view
but when this view is returned from a controller
public function show($id)
{
$title = 'Dashboard';
$username=Auth::user()->name;
$job=Auth::user()->job;
$p = 1;
$requestedorder = Order::findOrfail($id);
return view('ViewOrder',compact('requestedorder','title','username','job','p'));
}
the view be like this without any bootstrap or any css or even without images : http://1drv.ms/1m7N8Yk
I noticed that this problem occures in any url with id like this "http://localhost:8000/testid/1"
this is vieworder view
#extends('WDashBoard')
#section('content2')
<div>
<h1>Order Details</h1>
<hr>
<div class="row">
<div class="col-sm-3">
<h5><B>From :</B></h5>
</div>
<div class="col-sm-9">
<h5> {{ $requestedorder->customeremail }}</h5>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<h5><B>Details :</B></h5>
</div>
<div class="col-sm-9">
<h5>{{ $requestedorder->details }}</h5>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<h5><B>Required Work :</B></h5>
</div>
<div class="col-sm-9">
<h5>{{ $requestedorder->requiredwork }}</h5>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<h5><B>Date :</B></h5>
</div>
<div class="col-sm-9">
<h5> {{ $requestedorder->date }}</h5>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<h5><B>Time :</B></h5>
</div>
<div class="col-sm-9">
<h5>{{ $requestedorder->time }}</h5>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<h5><B>Message :</B></h5>
</div>
<div class="col-sm-9">
<h5>{{ $requestedorder->message }}</h5>
</div>
</div>
</div>
#stop
and this is my DashBoard view
#extends('master')
#section('content')
<section class="slider2">
<div class="slider-wrap2">
<h1>DashBoard</h1>
</div>
</section>
<section class="container">
<div class="row">
<div class="col-sm-3">
<div class="dash">
<br><br>
<center><img src="images/default-avatar.png" class="img-responsive img-circle" /></center>
<center><h3> {{ $username }} </h3></center>
<center><h4> {{ $job }} </h4></center>
<br>
<ul class="nav nav-pills nav-stacked">
<li class="nav-header"></li>
<li><a href="/profile"><i class="glyphicon glyphicon-list-alt"></i>
My Profile</a></li>
<li class="divider"></li>
<li><a href="/orders"><i class="glyphicon glyphicon-briefcase"></i>
Requested Orders</a></li>
</ul>
<br><br><br><br>
</div>
</div>
<div class="col-sm-9">
#yield('content2')
</div>
</div>
<br>
</section>
#stop
and this is master view
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{ $title }}</title>
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS
================================================== -->
<!-- Bootstrap -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- FontAwesome -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- Elegant icon font -->
<link rel="stylesheet" href="css/line-icons.min.css">
<!-- Animation -->
<link rel="stylesheet" href="css/animate.css">
<!-- Prettyphoto -->
<link rel="stylesheet" href="css/prettyPhoto.css">
<!-- Owl Carousel -->
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/owl.theme.css">
<!-- Scrolling nav css -->
<link rel="stylesheet" href="css/scrolling-nav.css">
<!-- Template styles-->
<link rel="stylesheet" href="css/style.css">
<!-- Responsive styles-->
<link rel="stylesheet" href="css/responsive.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target=".navbar-fixed-top" >
<!-- Header start -->
<header id="header" role="banner" >
<nav class="navbar navbar-default navbar-fixed-top" id="tf-menu">
<div class="container">
<div class="row">
<!-- Logo start -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">
<a href="#" class="page-scroll">
<img class="img-responsive" src="images/logo1.png" alt="logo">
</a>
</div>
</div><!--/ Logo end -->
<div class="collapse navbar-collapse clearfix navMenu" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="/" >Home</a></li>
<li><a class="page-scroll" href="/about" >About</a></li>
<li><font style="opacity:.1">....................</font></li>
#if($p == 0)
<li><a href="/login" ><small>SignIn</small></a></li>
<li><small>Register</small></li>
#endif
#if($p == 1)
<li><a href="/profile" ><small>hi {{ $username }}</small></a></li>
<li><small>Logout</small></li>
#endif
</ul>
</div><!--/ Navigation end -->
</div><!--/ Row end -->
</div><!--/ Container end -->
</nav>
</header><!--/ Header end -->
<!-- END MAIN NAV -->
#yield('content')
<!-- section Footer start -->
<footer id="footer">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="footer-content text-center">
<a href="#slider-part" class="page-scroll logo-title">
<img src="images/blackbg.png" alt="" class="img-responsive">
</a>
<ul class="footer-socail list-inline">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-linkedin"></i></li>
</ul>
</div>
<hr>
<div class="row">
<div class="col-md-6">
<div class="copyright">
<p> copyright © <span>mycompany</span> - 2015</p>
</div>
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div> <!-- row end -->
</div> <!-- container end -->
</footer>
<!-- section Footer end -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- initialize jQuery Library -->
<script type="text/javascript" src="js/jquery.js"></script>
<!-- Bootstrap jQuery -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- Style Switcher -->
<script type="text/javascript" src="js/isotope.js"></script>
<!-- Owl Carousel -->
<script type="text/javascript" src="js/owl.carousel.js"></script>
<!-- PrettyPhoto -->
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<!-- Isotope -->
<script type="text/javascript" src="js/isotope.js"></script>
<!-- Wow Animation -->
<script type="text/javascript" src="js/wow.min.js"></script>
<!-- SmoothScroll -->
<script type="text/javascript" src="js/smooth-scroll.js"></script>
<!-- Eeasing -->
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!-- Counter -->
<script type="text/javascript" src="js/jquery.counterup.min.js"></script>
<!-- Waypoints -->
<script type="text/javascript" src="js/jquery.waypoints.min.js"></script>
<!-- Scrolling navigation -->
<script type="text/javascript" src="js/scrolling-nav.js"></script>
<!-- Google Map API Key Source -->
<!--<script src="http://maps.google.com/maps/api/js?sensor=false"></script>-->
<!-- Custom js -->
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="js/mapjs.js"></script>
<script>
new WOW().init();
</script>
<script>
$('.counter').counterUp({
delay: 100,
time: 2000
});
</script>
</body>
</html>
please help me
thanks in advance

I'm assuming you're using relative paths in your HTML that are not properly mapping to your assets through your 'folder' structure.
Have you wrapped your asset URLs in the asset() helper function in your view?
<link href="{{ asset( 'path/to/asset' ) }}" rel="stylesheet">
<img src="{{ asset( 'path/to/image' ) }}">
Remember, use of the / means you're in a 'subfolder' in traditional URL-to-Unix-style path mapping, so your asset references need to account for that.
Thankfully, Laravel makes this super easy with the URL helper functions.

Categories