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
Related
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 am using codeigniter to create my website. I have a dropdown menu in my first page that contains links like 'Profile', 'Edit' etc. When i click on the link (profile) it should display the bootstrap modal with corresponding user data. Used jquery to get the current id and ajax to retrieve data from database. But, when i tried to load the bootstrap modal with the response data, it displays nothing. What should i do to load the modal with ajax response data.? The response is an array containing user name, address, phone number etc.
Modal HTML
<div class="modal fade" id="MyModal" tabindex="-1" role="dialog">
<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">Modal Title</h4>
</div>
<div class="modal-body">
<div id="UserName"></div>
<div id="Address"></div>
<div id="Phone"></div>
</div>
<div class="modal-footer" id="buttons-box">
<button type="button" class="btn default" data-dismiss="modal">Close Modal</button>
</div>
</div>
</div>
</div>
your jQuery script
$.get('your_server_script.php', {UserId: 'UserId'}, function (response) {
$('#UserName').text(response.UserName);
$('#Address').text(response.Address);
$('#Phone').text(response.Phone);
$('#MyModal').modal('show');
});
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
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.