Why laravel don't show bootstrap from controller?
Ad
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 target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/profile"><i class="glyphicon glyphicon-list-alt"></i>
My Profile</a></li>
<li class="divider"></li>
<li><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" 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 target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- FontAwesome -->
<link rel="stylesheet" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="css/font-awesome.min.css">
<!-- Elegant icon font -->
<link rel="stylesheet" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="css/line-icons.min.css">
<!-- Animation -->
<link rel="stylesheet" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="css/animate.css">
<!-- Prettyphoto -->
<link rel="stylesheet" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="css/prettyPhoto.css">
<!-- Owl Carousel -->
<link rel="stylesheet" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="css/owl.carousel.css">
<link rel="stylesheet" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="css/owl.theme.css">
<!-- Scrolling nav css -->
<link rel="stylesheet" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="css/scrolling-nav.css">
<!-- Template styles-->
<link rel="stylesheet" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="css/style.css">
<!-- Responsive styles-->
<link rel="stylesheet" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" 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 target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" 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" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/" >Home</a></li>
<li><a class="page-scroll" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/about" >About</a></li>
<li><font style="opacity:.1">....................</font></li>
@if($p == 0)
<li><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/login" ><small>SignIn</small></a></li>
<li><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/register"><small>Register</small></a></li>
@endif
@if($p == 1)
<li><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/profile" ><small>hi {{ $username }}</small></a></li>
<li><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/auth/logout"><small>Logout</small></a></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 target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" 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><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#"><i class="fa fa-facebook"></i></a></li>
<li><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#"><i class="fa fa-twitter"></i></a></li>
<li><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#"><i class="fa fa-linkedin"></i></a></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
Ad
Answer
Ad
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 target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" 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.
Ad
source: stackoverflow.com
Related Questions
Ad
- → "failed to open stream" error when executing "migrate:make"
- → October CMS Plugin Routes.php not registering
- → OctoberCMS Migrate Table
- → OctoberCMS Rain User plugin not working or redirecting
- → October CMS Custom Mail Layout
- → October CMS - How to correctly route
- → October CMS create a multi select Form field
- → October CMS - Conditionally Load a Different Page
- → How to disable assets combining on development in OctoberCMS
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → OctoberCms component: How to display all ID(items) instead of sorting only one ID?
- → In OctoberCMS how do you find the hint path?
- → How to register middlewares in OctoberCMS plugin?
Ad