I'm trying t use twitter typeahead.js with laravel, but it does not work. Here's my code
create.blade.php
<!-- app/views/nerds/create.blade.php -->
<!DOCTYPE html>
<html>
<head>
<title>Crear Detalle</title>
<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ URL::asset('css/main.css') }}" />
<script type="text/javascript" src="{{ URL::asset('js/jquery-2.1.1.min.js') }}" ></script>
<script type="text/javascript" src="{{ URL::asset('js/bootstrap.min.js') }}" ></script>
<script type="text/javascript" src="{{ URL::asset('js/typeahead.js') }}" ></script>
</head>
<script>
$(document).ready(function()
{
$.ajax({
type: "POST",
url: "http://chapincar.dev/notas_detalle/create",
data: "autocomplete="+$("input[name=autocomplete]").val(),
success: function(data)
{
json = $.parseJSON(data);//parseamos el json
var codigo = json
console.log(codigo)
$('#remote .typeahead').typeahead({
minLength: 3,
highlight: true,
},
{
name: 'codigo',
source: codigo
});
},
error: function(data)
{
json = $.parseJSON(data);//parseamos el json
var error = json
console.log(error)
}
});
});
</script>
<body>
<div class="container">
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<a class="navbar-brand" href="{{ URL::to('nota_detalle') }}">Panel de Detalles de Ordenes</a>
</div>
<ul class="nav navbar-nav">
<li>Ver todos los Detalles</li>
<li>Crear un Detalle
</ul>
</nav>
<h1>Crear Detalle</h1>
<!-- if there are creation errors, they will show here -->
{{ HTML::ul($errors->all() )}}
{{ Form::open(array('url' => 'nota_detalle', 'class' => '')) }}
<table>
<tr>
<td class="ancho">
<div class="form-group">
{{ Form::label('codigo_nota', 'Codigo Orden') }}
{{ Form::text('codigo_nota', Input::old('codigo_nota'), array('class' => 'form-control')) }}
</div>
</td>
<td class="ancho">
<a href="#" class="btn btn-default"
data-toggle="modal"
data-target="#modalCliente">Buscar</a>
</td>
</tr>
<tr>
<td class="ancho">
<div class="form-group">
{{ Form::label('cantidad_detalle', 'Cantidad') }}
{{ Form::text('cantidad_detalle', Input::old('cantidad_detalle'), array('class' => 'form-control')) }}
</div>
</td>
</tr>
<tr>
<td class="ancho">
<div class="form-group">
{{ Form::label('descripcion_detalle', 'Descripción') }}
{{ Form::textarea('descripcion_detalle', Input::old('descripcion_detalle'), array('class' => 'form-control')) }}
</div>
</td>
</tr>
<tr>
<td class="ancho">
<div class="form-group">
{{ Form::label('precioIVA_detalle', 'Precio con IVA') }}
{{ Form::number('precioIVA_detalle', Input::old('precioIVA_detalle'), array('class' => 'form-control')) }}
</div>
</td>
</tr>
<tr>
<td class="ancho">
<div class="form-group">
{{ Form::label('precioSinIVA_detalle', 'Precio sin IVA') }}
{{ Form::number('precioSinIVA_detalle', null, array('class' => 'form-control', 'size' => '30x4')) }}
</div>
</td>
</tr>
<tr>
<td class="ancho">
<div class="form-group">
{{ Form::label('precioTotal_detalle', 'Precio Total') }}
{{ Form::number('precioTotal_detalle', null, array('class' => 'form-control')) }}
</div>
</td>
</tr>
</table>
{{ Form::submit('Agregar Detalle!', array('class' => 'btn btn-primary')) }}
{{ Form::close() }}
<!-- Modal -->
<div class="modal fade" id="modalCliente" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="form-group remote">
<label for="query">Search:</label>
<input class="form-control" name="autocomplete" id="autocomplete" placeholder="Start typing something to search..." type="text">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cerrar</button>
</div>
</div>
</div>
</div>
{{Form::close()}}
</div>
</body>
</html
>
This is my routes.php file
Route::post("nota_detalle/create", function(){
$search = Input::get("autocomplete");
$query = DB::table("notas_cabecera")->where('chapa_vehiculo', 'LIKE', '%'.$search.'%')->get(['codigo_nota']);
Response::json($query);
});
These are my error logs:
This is my database:
https://www.dropbox.com/s/1li3hhylw7ukbv0/Imagen%202.png?dl=0
Can you help me please
So as per #Loz Cherone's comment on the server side i nyour laravel router the paramater is query.
The other thing is your manually using echo json_encode, dont use this use a built in laravel function return Response::json($query); its a bit cleaner and you dont want to use echo in your routes file.
More info on laravel responses - http://laravel.com/docs/4.2/responses#special-responses
if your having more issues check the console on your browser to help give us more details.
Related
I have this issue:
Illuminate\Routing\Exceptions\UrlGenerationException
Missing required parameter for [Route: admin.percent.edit] [URI: {locale}/admin/percent/edit/{id}] [Missing parameter: id]. (View: C:\Users\kawed\OneDrive\Desktop\flooss\resources\views\admin\includes\top.blade.php)
index page code:
#extends('admin.layouts.app')
#section('headSection')
<!-- form Uploads -->
<link href="{{ asset('back/assets/plugins/datatable/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
#endsection
#section('content')
<div class="page-header mt-0 shadow p-3">
<ol class="breadcrumb mb-sm-0">
<li class="breadcrumb-item">
{{ __('val.home') }}
</li>
<li class="breadcrumb-item active" aria-current="page">
{{ __('val.dashboard_percent') }}
</li>
</ol>
<a href="/{{ app()->getLocale() }}/admin/percent/create">
<button type="button" class="btn btn-success btn-pill mt-1 mb-1">{{ __('val.create_percent') }}</button>
</a>
</div>
<div class="row">
<div class="col-md-12">
<div class="card shadow">
<div class="card-header">
<h2 class="mb-0">Data Table</h2>
</div>
<div class="card-body">
<div class="table-responsive">
<table id="example" class="table table-striped table-bordered w-100 text-nowrap">
<thead>
<tr>
<th class="wd-15p">id</th>
<th class="wd-15p">{{ __('session.percent') }}</th>
<th class="wd-20p">{{ __('session.edit') }}</th>
<th class="wd-15p">{{ __('session.delete') }}</th>
</tr>
</thead>
<tbody>
#foreach($percents as $item)
<tr>
<td>
{{ $item->id }}
</td>
<td>
{{ $item->pname }}
</td>
<td>
{{ __('session.edit') }}
</td>
<td>
{{ __('session.delete') }}
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
#endsection
#section('footerSection')
<!-- file uploads js -->
<script src="{{ asset('back/assets/plugins/datatable/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('back/assets/plugins/datatable/dataTables.bootstrap4.min.js') }}"></script>
<script>
$(function(e) {
$('#example').DataTable();
var table = $('#example1').DataTable();
$('button').click(function() {
var data = table.$('input, select').serialize();
alert(
"The following data would have been submitted to the server: \n\n" +
data.substr(0, 120) + '...'
);
return false;
});
$('#example2').DataTable({
"scrollY": "200px",
"scrollCollapse": true,
"paging": false
});
});
</script>
#endsection
Edited page code:
#extends('admin.layouts.app')
#section('headSection')
<!-- form Uploads -->
<link href="{{ asset('back/assets/plugins/fileuploads/css/dropify.css') }}" rel="stylesheet" type="text/css" />
#endsection
#section('content')
<div class="page-header mt-0 shadow p-3">
<ol class="breadcrumb mb-sm-0">
<li class="breadcrumb-item">
{{ __('val.home') }}
</li>
<li class="breadcrumb-item active" aria-current="page">
{{ __('val.dashboard_percent') }}
</li>
</ol>
</div>
<div class="row">
<div class="col-md-12">
<form action="{{ route('admin.percent.edit', ['id' => $category->id, 'locale' => app()->getLocale()]) }}" method ="post" enctype="multipart/form-data">
{{ csrf_field() }}
<div class="card shadow">
<div class="card-header">
<h2 class="mb-0">{{ __('val.edit_percent') }}</h2>
#include('admin.includes.messages')
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" name="categoryarabicname" value="{{ $category->categoryarabicname }}">
</div>
<div class="form-group">
<input type="text" class="form-control" name="categoryengname" value="{{ $category->categoryengname }}">
</div>
<div class="form-group">
<textarea class="form-control"name="categoryarabicdesc" id="exampleFormControlTextarea1" rows="3">{{ $category->categoryarabicdesc }}</textarea>
</div>
<div class="form-group">
<textarea class="form-control"name="categoryengdesc" id="exampleFormControlTextarea1" rows="3">{{ $category->categoryengdesc }}</textarea>
</div>
</div>
<div class="col-md-6">
<div class="card shadow">
<div class="card-header">
<h2 class="mb-0">Upload Image</h2>
</div>
<div class="card-body">
<input type="file" name="catimage" class="dropify" data-height="300" />
</div>
<input type="hidden" name="image2" class="form-control" id="exampleInputEmail1">
</div>
<div class="card shadow overflow-hidden">
<img alt="Image placeholder" width=250px height=250px class="big" src="/uploads/{{ $category->categoryimage }}">
</div>
</div>
<div class="col-lg-9"></div>
<div class="col-lg-3">
<button type="submit" class="btn btn-success btn-square mt-1 mb-1">Update</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
#endsection
#section('footerSection')
<!-- file uploads js -->
<script src="{{ asset('back/assets/plugins/fileuploads/js/dropify.min.js') }}"></script>
<script>
$('.dropify').dropify({
messages: {
'default': 'Drag and drop a file here or click',
'replace': 'Drag and drop or click to replace',
'remove': 'Remove',
'error': 'Ooops, something wrong appended.'
},
error: {
'fileSize': 'The file size is too big (2M max).'
}
});
</script>
#endsection
Controller code:
namespace App\Http\Controllers;
use App\Http\Requests\PercentEditRequest;
use App\Http\Requests\PercentRequest;
use App\Models\Percent;
use Illuminate\Http\Request;
class PercentController extends Controller
{
public function index()
{
$percents = Percent::orderBy('created_at', 'desc')->get();
return view('admin.percent.index', compact('percents'));
}
public function create()
{
return view('admin.percent.create');
}
public function store(PercentRequest $request)
{
$validated = $request->validated();
$category = new Percent();
$category->pname = strip_tags($request->pname);
$category->save();
return redirect()->route('admin.percent', ['locale' => app()->getLocale()])
->with('success', trans('session.success'));
}
public function edit(Request $request, $id) {
$id = $request->id;
$locale = $request->locale;
$category = Percent::find($id);
return view('admin/percent/edit', compact('category'));
}
public function update(PercentEditRequest $request, $id) {
$validated = $request->validated();
$category = Percent::find($id);
$category->categoryengname = strip_tags($request->categoryengname);
$category->categoryarabicname = strip_tags($request->categoryarabicname);
$category->categoryengdesc = strip_tags($request->categoryengdesc);
$category->categoryarabicdesc = strip_tags($request->categoryarabicdesc);
if (!empty($request->hasFile('catimage'))) {
$imagePath = $request->file('catimage');
$imageName = time() . '.' . $imagePath->getClientOriginalExtension();
$imagePath->move('uploads', $imageName);
$category->categoryimage= $imageName;
}
$category->save();
return redirect('/admin/percent')->with('success', 'percent Updated Successfuly');
}
public function destroy($id)
{
$category = Percent::find($id);
$category->delete();
return redirect('/admin/percent')->with('success','percent Deleted Successfuly');
}
}
you have 2 parameters in url as define (locale & id)
but in your function have only one id so add locale parameter
public function edit(Request $request, $locale, $id) {
or remove parameter from url and use it from request
I have create a searsh view and i can go to the values in another page and it's working fine , I can see my values but when I have added pagination it's working again but when I press button number 2 of paination it's not working and it give me an error :
MethodNotAllowedHttpException in RouteCollection.php line 251
at RouteCollection->methodNotAllowed(array('POST')) ...
My functions:
public function searsh()
{
return view('resultats.recherche');
}
public function show(Request $request)
{
$this->validate($request, [
'cne' => 'required|integer',
]);
$exams = Exam::where('cne', $request->cne)->paginate(4);
return view('resultats.index', compact('exams'));
}
and this is my routes:
The first one that make me send a searsh request in db
Route::get('/chercher', 'ExamsController#searsh')->name('display-cne-search');
Route::post('/resultat', 'ExamsController#show')->name('show-exams-cne-results');
and this is my view
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<style>
body{
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
background: url('image/t10.jpg');
}
.bling{
background:url('image/background.jpg');
}
</style>
#extends('layouts.master')
#section('content')
#if($exams->isEmpty())
<div style="width:100%;height:100px;background-color:white">
<center>
<p style="margin-top:50px;">Le cne que vous avez choisi est incorrecte entrer un autre cne svp <a href="/chercher">
<br>
<button style="margin-top:5px"class="btn btn-primary">Par ici</button></a>
</p>
</center>
</div>
#else
<div class="container">
<div class="row">
<center><div class="col-md-12">
<div style="border-radius:5px;background:url('image/background.jpg')">
<center>
<h2 style="color:white;font-weight: bold;padding-top:5px;padding-bottom:5px;" > Historique des résultats de l'étudiant(e) {{$prenom}} {{$nom}} <br>
CNE {{$cne}}</h2>
</center>
</div>
<center><table style="background-color:white;border-radius:5px;" class="table">
<head>
<tr>
<th>Matiére</th>
<th>Note</th>
<th>Semestre</th>
<th>Session</th>
<th>Année</th>
<th>Le prof vous a peut-être laissé une remarque</th>
<th>Demande Vérification</th>
</tr>
</head>
<body>
#foreach($exams as $exam)
<tr class="{{$loop->index % 2==0 ? 'bling' : ''}}">
<td>{{ $exam->matiere}}</td>
<td>{{ $exam->note}}</td>
<td>{{ $exam->sem}}</td>
<td>{{ $exam->ses}}</td>
<td>{{ $exam->an}}</td>
<td>
<center>
<button type="button" value="{{$exam->remarque}}" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter" onClick="document.getElementById('remarque').innerHTML=this.value">
Remarque
</button>
</center>
</td>
<td>
#if(!$exam->verification)
<button class="btn btn-succees" onclick="document.getElementById('verification-form-{{$exam->id}}').submit();" >
Vérifier la note
</button>
<form id="verification-form-{{ $exam->id }}" action="{{ route('display-num-search', $exam ) }}" method="post">
{{ csrf_field() }}
</form>
#elseif($exam->verification->etat=="En attente")
<center> <a title="{{$exam->verification->etat}}" style="background-color:orange" class="btn-floating btn pulse"></a></center></p>
#else
<center><p> Verifié <i title="Note verifié par le professeur" class="fas fa-user-check"></i></p></center>
#endif
</td>
</tr>
#endforeach
<center>{{ $exams->links()}}</center>
</body>
</table></center>
<!-- modal remarque -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Remarque du prof</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div style="font-size:15px;font-weight: bold;" id="remarque"></div>
</div>
</div>
</div>
</div>
</div></center>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.dropdown-trigger');
var instances = M.Dropdown.init(elems, options);
});
// Or with jQuery
$('.dropdown-trigger').dropdown();
</script>
#endif
#endsection
POST requires a CSRF token everytime to process the request.
So, for performing a search and getting the pagination you can set the route as:
Route::any('/resultat', 'ExamsController#show')->name('show-exams-cne-results');
By this method, the first search performed is handled with POST method with the CSRF token and later for paginations, GET method is used.
EDIT: To make searches:
Change your route to GET.
Route::get('/resultat', 'ExamsController#show')->name('show-exams-cne-results');
Also, change the form method to GET
<form id="verification-form-{{ $exam->id }}" action="{{ route('display-num-search', $exam ) }}" method="GET">
I do this project using Laravel 5.
<td> {{ $ethenic->ethenicCode }} </td>
This is my Blade view file part of code. I want when I click this code open dialog box.
This is my div.
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn btn-default" style='float: right;' data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span></button>
</span>
</span>
<h4 class="modal-title">Member Ethnicity Details</h4>
</div>
<!-- text input -->
<div class="modal-body">
{!! Form::label('e_code', 'Ethnicity Code: '); !!}
{!! Form::text('ethenicity_code', null, ['class' => 'form-control', 'id' => 'ethenicity_code', 'placeholder' => 'Enter Ethnicity Code here','disabled' => 'disabled']); !!}
{!! Form::label('e_name', 'Ethnicity Name: '); !!}
{!! Form::text('ethenicity_name', null, ['class' => 'form-control', 'id' => 'ethenicity_name', 'placeholder' => 'Enter Ethnicity Name here' ,'disabled' => 'disabled']); !!}
</div>
</div>
</div>
This both code in same x.blade.php file. Very beginning I use following code to call this div and working fine.
<td> {!! 'Event Name '.$i !!} </td>
but now I am try different way with in my Controller method to call this div id, but I couldn't.
Controller class code:
public function show($id) {
//
$designation = Designation::find($id);
return view('x.blade.php#myModal', compact('designation'));
}
My full x.blade.php file:
#extends('layouts.app')
#section('slide_bar')
#include('layouts.master_entry_slide_bar')
#endsection
#section('content')
<section class="content-header">
<h1>BASL Ethnicity <small>page </small></h1>
</section>
<br/>
<!-- Main content -->
<section class="content-fluid">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-body">
<table id="example1" class="table table-bordered table-striped">
<col width='auto'>
<col width='auto'>
<col width='100'>
<thead>
<tr>
<th>Member Ethnicity Code</th>
<th>Member Name</th>
<th><p id='buttons'> <strong> Add New Ethnicity   </strong> <span class="glyphicon glyphicon-plus"></span> </p></th>
</tr>
</thead>
<tbody>
#foreach ($ethenics as $ethenic)
<tr>
<td> {{ $ethenic->ethenicCode }} </td>
<td> {{ $ethenic->ethenicName }} </td>
<td align='center'>
{!! Form::open(['method' => 'DELETE', 'route'=>['ethenics.destroy',$ethenic->id]]) !!}
<span class="glyphicon glyphicon-pencil"></span>    
<button type="submit" class="btn btn-default btn-sm" onclick="return confirm('Are you sure?')"> <span class="glyphicon glyphicon-trash"></span> </button>
{!! Form::close() !!}
</td>
</tr>
#endforeach
</tbody>
<tfoot>
<tr>
<th>Member Ethnicity Code</th>
<th>Member Name</th>
<th></th>
</tr>
</tfoot>
</table>
</div><!-- /.box-body -->
</div><!-- /.box -->
</div><!-- /.col -->
</div><!-- /.row -->
</section><!-- /.content -->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn btn-default" style='float: right;' data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span></button>
</span>
</span>
<h4 class="modal-title">Member Ethnicity Details</h4>
</div>
<!-- text input -->
<div class="modal-body">
{!! Form::label('e_code', 'Ethnicity Code: '); !!}
{!! Form::text('ethenicity_code', null, ['class' => 'form-control', 'id' => 'ethenicity_code', 'placeholder' => 'Enter Ethnicity Code here','disabled' => 'disabled']); !!}
{!! Form::label('e_name', 'Ethnicity Name: '); !!}
{!! Form::text('ethenicity_name', null, ['class' => 'form-control', 'id' => 'ethenicity_name', 'placeholder' => 'Enter Ethnicity Name here' ,'disabled' => 'disabled']); !!}
</div>
</div>
</div>
</div>
<script>
var name = document.getElementById("master_entry");
document.getElementById("master_entry").className = "active";
var slide_bar_element = document.getElementById("ane_menu");
document.getElementById("ane_menu").className = "active";
var slide_bar_element = document.getElementById("ane_submenu3");
document.getElementById("ane_submenu3").className = "active";
</script>
#endsection
I thought I would split the header from my blade templates and have the header and footer included separately. It worked to put my header.blade.php in layouts/partials/, and then in the next template, it extends layouts.partials.header. It works, but the stylesheets and scripts are loaded after the content. How should it be organized in a way that runs fast and in the correct order?
header.blade.php
#section('header')
<!DOCTYPE html>
<html>
<head>
<title>
#section('title')
#show
</title>
<script type="text/javascript" src="{{ asset('bower/jquery/dist/jquery.min.js') }}"></script>
<link href="{{ asset('bower/bootstrap/dist/css/bootstrap.min.css') }}" rel="stylesheet">
<script type="text/javascript" src="{{ asset('bower/bootstrap/dist/js/bootstrap.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('bower/ckeditor/ckeditor.js') }}"></script>
<link href="{{ asset('css/default.css') }}" rel="stylesheet">
</head>
<body>
#show
#section('footer')
#section('scripts')
#show
</body>
</html>
#show
master.blade.php
#extends('layouts.partials.header')
#yield('header')
<div class="container">
#section('topNav')
<div class="row center-block text-center indexWrapper">
<div class="indexNav">
<ul class="text-right">
<li>People</li>
<li>Bulletin</li>
<li>Current</li>
<li>Finished</li>
</ul>
</div>
<div class="indexHeading">
<h1 class="indexH1">
#section('navTitle')
#show
</h1>
</div>
<div class="clearfix"></div>
</div>
#show
#yield('content')
<div class="center-block login">
#yield('login')
</div>
</div>
#section('scripts')
#show
</body>
</html>
home.blade.php
#extends('layouts.master')
#section('title')
#parent
::Home
#stop
#section('navTitle')
#parent
Mumble
#stop
#section('login')
#if (Auth::check())
<div class="col-md-12 panel panel-default">
<div class="panel-body text-center">
<h4>Welcome back <em>{{ Auth::user()->name }}</em></h4>
</div>
</div>
<div class="text-center">
Logout
</div>
#else
#if($error)
<div class="alert alert-danger">
{{ $error }}
</div>
#endif
#if($errors->first('email'))
<div class="alert alert-warning">
{{ $errors->first('email') }}
</div>
#endif
#if($errors->first('password'))
<div class="alert alert-warning">
{{ $errors->first('password') }}
</div>
#endif
{{ Form::open(array('url' => '')) }}
<div class="form-group">
{{Form::label('email', 'Email')}}
{{Form::text('email', Input::old('email'),array('class'=>'form-control','placeholder'=>'enter email'))}}
</div>
<div class="form-group">
{{Form::label('password', 'Password')}}
{{Form::password('password',array('class'=>'form-control','placeholder'=>'enter password'))}}
</div>
<div class="form-group">
{{ Form::checkbox('remember','remember') }}
<span style="margin-left:5px;">Remember Me</span>
</div>
<div class="text-center">
{{ Form::submit('Login',array('class'=>'btn btn-default')) }}
</div>
{{ Form::close() }}
#endif
#stop
#section('scripts')
<script type="text/javascript">
$(document).ready(function(){
//$('.indexWrapper').addClass('homeCenter');
//$('.indexWrapper').css( 'margin-top', '25%' );
});
</script>
#stop
How modular should things be in blade? Am I breaking it into too many pieces? The scripts run slow when they are in the "footer" (defined in the header partial, I guess I should rename that), but I just want to know if there is a way to do this properly.
For my projects, i usually do something like this which works well. The amount of granularity really depends on your own requirements.
Instead of using #extends, etc.. set your views as properties of your master layout so they are rendered in your controller.
master.blade.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sitename | #yield('title')</title>
{{ stylesheet() }}
</head>
<body class="{{ $authClass }}{{ isset($bodyClass) ? $bodyClass : '' }}" role="document">
{{ $mainNav }}
<section id="content">
<section id="main">
#yield('content')
</section>
</section>
<footer></footer>
{{ script('jQuery-2-0-3.min.js') }}
{{ script('bootstrap.js') }}
</body>
</html>
Add this to your base controller:
It gets called automatically by Laravel if it exists
protected function setupLayout()
{
$this->layout = View::make('layouts.master');
}
Controller method (nesting views)
public function index()
{
$this->layout->content = View::make('public.interior.index')
->nest('content', 'components.login')
->nest('sideBar', 'components.sidebars.interiorSidebar1', ['extra' => View::make('components.sidebars.extra.extra1')]);
}
Index view
(parent view.. #section defined):
#section('content')
<div class="row-fluid col-md-7 col-sm-12 col-md-offset-1 col-sm-offset-0">
{{ $content }}
</div>
<div class="row-fluid col-md-3 col-sm-12 col-md-offset-1 col-sm-offset-0 pull-right">
{{ $sideBar }}
</div>
#stop
Nested view
(component type stuff. no #section defined)
{{ Form::open(['class' => 'form-horizontal', 'role' => 'form']) }}
<h2>User Login</h2>
<div class="form-group">
{{ Form::label('email', 'Email:', ['class' => 'col-sm-2 control-label']) }}
<div class="col-sm-10">
{{ Form::text('email', null, ['id' => 'email','class' => 'form-control']) }}
</div>
</div>
<div class="form-group">
{{ Form::label('password', 'Password:', ['class' => 'col-sm-2 control-label']) }}
<div class="col-sm-10">
{{ Form::text('password', null, ['class' => 'form-control']) }}
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
{{ Form::submit('Login', ['class' => 'btn btn-primary']) }}
Forgot Password
</div>
</div>
{{ Form::close() }}
Then the oh, so magical part... View composers:
Create a composers.php file and include it to bind data to certain views
View::composer(['layouts.master'], function($view){
if(Auth::check()){
$authClass = 'logged-in';
} else {
$items = MenuMaker::getPublic();
$authClass = 'logged-out';
$view->with('mainNav', View::make('components.mainNavPublic', ['items' => $items]))
->with('authClass', $authClass);
}
});
I have a form which has another form inside it.
Everytime I submit the inner form, the outer form also submits. I would just like to submit my inner form via ajax.
Here's my twig template:
<div id="askDiv">
{{ form_start(form, { 'attr' : { 'novalidate' : 'novalidate', 'class' : 'col-md-offset-3 form-control-static col-md-7' } }) }}
<div class="col-lg-12" style="margin-bottom: 30px;">
<span id="titleLabel" data-toggle="popover" data-container="body" data-placement="left" data-trigger="manual" data-html="true" data-content='{{form_errors(form.title)}}' class="col-lg-1 text-left askLabels">{{ form_label(form.title) }}</span>
{{form_widget(form.title, { 'attr' : { 'class' : 'right form-control col-lg-8' } })}}
</div>
{{ form_widget(form.content, { 'attr' : { 'data-toggle' : 'popover', 'data-container' : 'body', 'data-placement' : 'left', 'data-trigger' : 'manual', 'data-html' : 'true', 'data-content' : form_errors(form.content), 'class' : 'col-lg-12' } }) }}
<div class="col-lg-12" style="margin-top: 20px;">
<input id="fieldTags" type="hidden" value="{{ tags|join(',') }}">
<label id="tagLabel" data-toggle="popover" data-container="body" data-placement="left" data-trigger="manual" data-html="true" data-content='{{form_errors(form.tags)}}' class="col-lg-1 text-left askLabels" for="tagField">Tags</label>
<div class="col-lg-8">
{{ form_widget(form.tags) }}
</div>
{% if app.user.reputati on >= 100 %}
<a id="addTag" title="Add New Tag" data-toggle="tooltip modal" data-placement="left" class="col-lg-3" href="#"><i class="fa fa-plus-circle"></i></a>
{% endif %}
</div>
<div style="margin-top: 20px; ">
{{ form_widget(form.submit, { 'attr' : { 'class' : 'col-md-offset-5 col-md-3 btn btn-primary' } }) }}
</div>
<div hidden id="errors">
{{ form_errors(form.title) }}
{{ form_errors(form.content) }}
{{ form_errors(form.tags) }}
{{ form_errors(form) }}
{{form_rest(form)}}
</div>
<div id="mymodal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Add New Tag</h4>
</div>
<form class="tagForm" id="tag-form" action="{{ path('tag_create') }}" method="post">
<div class="modal-body">
<label for="tagName">Tag Name: </label>
<input id="tagName" class="form-control" type="text"/>
</div>
<div id="responseDiv" ></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input id="tag-form-submit" type="submit" class="btn btn-primary" value="Add Tag">
</div>
</form>
</div>
</div>
My Script:
$(document).ready(function() {
$('#tag-form').submit(function(e) {
e.preventDefault();
var options = {
url: $('#tag-form').attr('action'),
type: 'post'
};
$('#tag-form').ajaxSubmit(options);
$('form[name="verysoft_askmebundle_question"]').submit(function(ev) {
ev.preventDefault();
});
});
});
Seems like my forms aren't nested after all. Sorry about that. My current problem is that everytime I hit the submit button of one of the forms, the other one submits also.
Nested forms is invalid HTML markup since it's not supported and not part of the w3c standard according to HTML5 draft:
Content model: Flow content, but with no form element descendants.
So you'll need separate your forms and apply the same logic but different jQuery code.