I'm having difficulty getting my head around laravels blade templates.
I have a master.blade and I have an index.blade, no problems there.
What I want to do is inside my index.blade I want to nest another view: modal.blade
// modal.blade.php
<!-- Modal -->
<div id="message" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">{{ $header }}</h3>
</div>
<div class="modal-body" style="min-height: 430px">
{{ $modal_content }}
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
{{ Form::submit('Save', array('class' => 'btn btn-primary')) }}
</div>
</div>
And I want to dynamically generate content for my modal.blade depending on the value of some variable inside my index.blade. Have I completely got the wrong idea or can this be done? Could someone please point me in the right direction?
Any help greatly appreciated.
Try this:
#include(view.name);
Basically you will need to #include('your.modal'), but there are some answers that may clarify layouting even better to you here: Templating in Laravel.
Related
I am a biginner of Laravel blade.
I wanted to split index.blade.php.
When the contents of morumoru.blade.php modal.blade.php are on index.html.it works well.
/view/camila/cabelo/index.blade.php
#yield('camila.cabelo.morumoru')
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
SAMPLE
</button>
#yield('camila.cabelo.blade')
/view/camila/cabelo/morumoru.blade.php
#section('morumoru.blade')
<ul>
<li>INDEX</li>
<li>SUN</li>
<li>MOON</li>
</ul>
#endsection
/view/camila/cabelo/modal.blade.php
#section('modal')
<!-- Modal -->
<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="exampleModalCenterTitle">...</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>
#endsection
use #include('camila.cabelo.morumoru') and #include('camila.cabelo.modal') instead of #yield
use include instead of yield, and remove #section also #endsection from blade files
Top include like this #include('camila.cabelo.morumoru')
Bottom include like this #include('camila.cabelo.modal')
I have used the Laravel #component statements successfully before in my project, but for some reason my variables aren't being rendered in the following case.
<div id="{{ $modalId }}" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="modal-title">Add a user</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
#component('components.modal_bootstrap')
#slot('modalId')
{{ 'test' }}
#endslot
#endcomponent
Expected Result
test is rendered as the id of the modal dialog.
Actual Result
{{ $modalId }} is the id of the modal dialog.
I have also tried and copy pasted the examples shown in the documentation: https://laravel.com/docs/6.x/blade, but the same problem persists. I think I'm missing something obvious, but I can't figure out what it is.
If the curly braces are being rendered out as-is it's usually a sign that the file extension is incorrect, make sure you file ends in .blade.php or it won't be parsed as a blade template
I cannot get data to submit from a modal in laravel. When I use the below code and hit the 'add user' button, the modal just closes and doesn't seem to call the #store method in my controller. Data doesn't get submitted to the db
<div class="modal fade" id="addNew" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">New User</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{!! Form::open(['method' =>'POST', 'action'=> 'UsersController#store', 'files'=>true, 'enctype'=>'multipart/form-data']) !!}
<div class="form-group {{$errors->has('firstName') ? 'has-error' : ''}}">
{!! Form::label('firstName', 'First Name:') !!}
{!! Form::text('firstName', null, ['class'=>'form-control', 'rows' => 3])!!}
#if($errors->has('firstName'))
{{$errors->first('firstName')}}
#endif
</div>
{{--most form data removed for simplicity--}}
<div class="form-group">
{!! Form::submit('Add user', ['class'=>'btn btn-primary']) !!}
</div>
{!! Form::close() !!}
</div>
</div>
</div>
</div>
csrf token is missing in your form, which will not allow to submit data in controller.
Add " #csrf " in form and try again.
It happens when your submit button scope is out of the form/div scope or if there is any other button used before submit button.
As you haven't pasted other code for simplicity there must be a button before or issue with HTML tags. Please check all Div tags formatting(opening & closing) or add HTML code here from source code for more help.
Thank you,
Happy Coding.
I am having problems to populate a select on a modal window with data retrieved from database, I would like to know if there's a shorter bullet-proof way to do it using Jquery.
select in modal window
Index.blade.php
<a href="{{ url('beneficios/create') }}" class="btn btn-primary mb-3"
role="button" data-toggle="modal" data-target="#modalbeneficio"
id="crear-beneficio">Crear Beneficio</a
Thanks in advance!
Just put somewhere in your index.blade.php the code for your modal, as described in bootstrap official docs:
<div class="modal" tabindex="-1" role="dialog" id="modalbeneficio">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Insert here whatever HTML you need to be displayed inside the modal --!>
</div>
</div>
</div>
</div>
i have this blade that adds a user in the database and i wanted to use bootstrap modal to inform the user that the record has been added. This adding functionality works and my only problem is that i dont know how to display the modal here is my current code:
#if ($errors->any())
<ul>
{{ implode('', $errors->all('<p style="color:red" class="error">:message</p>')) }}
</ul>
#else
<li style="color:red">Record Added!</li> <!-- display modal instead li tag --!>
#endif
and here is the code for the modal
<div id="myModal" class="modal fade" role="dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
any ideas?
With blade conditionals any HTML within the block is valid, this means we can use <script> tags and add some inline javascript to trigger the modal. Assuming you have bootstrap-js and jquery the following should work for your scenario:
#if
..
#else
<script>
$('#modalid').modal('show');
</script>
#endif