I am including jquery and bootstrap in a Laravel project.
I have organized the folders as follows:
- app/views/
Inside views, there is the file home.blade.php and there are two folders: layout and account.
- app/views/layout
- app/views/account
Inside layout, there is the main.blade.php where i have the entire HTML code. This is where i specify the location of both bootstrap files and jQuery files:
<!DOCTYPE html>
<html>
<head>
<title>Authentication system</title>
{{ HTML::style('/css/bootstrap.min.css') }}
{{ HTML::style('/css/bootstrap-theme.min.css') }}
</head>
<body>
@if(Session::has('global'))
<p>{{Session::get('global')}}</p><!--It can be a div, span, etc-->
@endif
@include('layout.navigation')
<div class="container">
@yield('content')
<p style="color: red;">End of everything</p>
</div><!--Fin del div class container-->
<!-- Javascript Files required for page-->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--Referencias:http://stackoverflow.com/questions/11124777/twitter-bootstrap-navbar-fixed-top-overlapping-site-->
<script>
$(document).ready(function(){
$(document.body).css('padding-top', $('#topnavbar').height() + 25);
$(window).resize(function(){
$(document.body).css('padding-top', $('#topnavbar').height() + 25);
});
});
</script>
</body>
</html>
The files views/layout/navigation.blade.php and views/home.blade.php (which is the default page) look fine because i see through firebug that everything is fine. views/home.blade.php looks like this:
@extends('layout.main')
@section('content')
<h2>Welcome!</h2>
<p>Inside the default page.</p>
@if(Auth::check())
<p>Hello {{Auth::user()->username}}, you are now signed in!!!</p>
@else
<p>(Not signed in yet)</p>
@endif
@stop
Nevertheless, when each of the rest of the views inside the app/views/account/ folder (one level below compared to the previous script), for example, app/views/account/forgot.blade.php,
@extends('layout.main')
@section('content')
<form action="{{URL::route('account-forgot-password-post')}}" method="post">
<div class="field">
Email: <input type="email" name="email"{{ (Input::old('email')) ? ' value="'.e(Input::old('email')).'"' : ''}}>
@if($errors->has('email'))
{{ $errors->first('email') }}
@endif
</div>
<input type="submit" value="Recover">
{{ Form::token()}}
</form>
@stop
in firebug i see there is this error:
ReferenceError: $ is not defined
$(document).ready(function(){
Which is telling me that for those pages inside app/views/account/ (one level deeper), jQuery is not being loaded. I am stuck here. What is going wrong? I am confused, since the rest of the elements of each page are being loaded or read properly. For example, i added the following message just before (or just above) the script tags (where i call the jQuery files):
<p style="color: red;">End of everything</p>
In all the pages I see that message. So why aren't jQuery scripts loaded? How can i fix this?
