symfony2 how to lists twig in another twig - php

In my application I have entity doctor and status
I want to list all the status of the doctor in the doctor twig.
what must I do to get result (every doctor have his list of status )?
what can I do ?`
<div class="row" style="margin-left: 10px">
<div class="col-md-6">
<div class=" tiles white col-md-12 no-padding">
<div class="tiles green cover-pic-wrapper">
<div class="overlayer bottom-right">
<div class="overlayer-wrapper">
<div class="padding-10 hidden-xs">
<button type="button" class="btn btn-primary btn-small"><i class="fa fa-check"></i> joindre</button> <button type="button" class="btn btn-primary btn-small">Ajouter</button>
</div>
</div>
</div>
<img src="{{ asset('bundles/assets/img/cover_pic.png')}}" alt="">
</div>
<div class="tiles white">
<div class="row">
<div class="col-md-3 col-sm-3">
<div class="user-profile-pic">
<img width="69" height="69" src="{{ asset(entity.image.WebPath) }}" alt="">
</div>
<div class="user-mini-description">
<h3 class="text-black semi-bold">
{{ entity.nom }} {{ entity.prenom }}
</h3>
</div>
</div>
<div class="col-md-5 user-description-box col-sm-5">
<h4 class="semi-bold no-margin"> Information Personnel</h4>
<h3 class="no-margin">{{ entity.specialite }}</h3>
<br>
<p><i class="fa fa-database"></i>{{ entity.dateDiplome|date('Y-m-d H:i:s') }}</p>
<p><i class="fa fa-university"></i>{{ entity.etablissement }}</p>
<p><i class="fa fa-home"></i>{{ entity.adresse }}</p>
<p><i class="fa fa-phone"></i>{{ entity.tel }}</p>
</div>
</div>
<div class="tiles-body">
<div class="row">
<div class="post col-md-12">
<div class="info-wrapper">
<div class="username">
<span class="dark-text">Emplacement sur google map:</span>
</div>
<!--google map begin-->
<div id="map-canvas">
<script>
// In this example, we center the map, and add a marker, using a LatLng object
// literal instead of a google.maps.LatLng object. LatLng object literals are
// a convenient way to add a LatLng coordinate and, in most cases, can be used
// in place of a google.maps.LatLng object.
var map;
function initialize() {
var mapOptions = {
zoom: 10,
center: {lat: {{ entity.latitude }}, lng: {{ entity.langitude }}}
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var marker = new google.maps.Marker({
// The below line is equivalent to writing:
// position: new google.maps.LatLng(-34.397, 150.644)
position: {lat: {{ entity.latitude }}, lng: {{ entity.langitude }}},
map: map
});
// You can use a LatLng literal in place of a google.maps.LatLng object when
// creating the Marker object. Once the Marker object is instantiated, its
// position will be available as a google.maps.LatLng object. In this case,
// we retrieve the marker's position using the
// google.maps.LatLng.getPosition() method.
var infowindow = new google.maps.InfoWindow({
content: '<h5>{{ entity.nom }} {{ entity.prenom }}</h5><img width="69" height="69" src="{{ asset(entity.image.WebPath) }}" alt="">'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</div>
<!--google map end-->
</div>
<div class="clearfix"></div>
<br>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="tiles white col-md-12 no-padding">
<div class="tiles-body">
<h5><span class="semi-bold">Paramétre</span> view more</h5>
<div class="row">
<div class="col-md-12">
<div class="friend-list">
<div>
<button class="btn btn-primary" type="button">Modifier</button>
<button class="btn btn-primary" type="button">Médecin</button>
<button class="btn btn-primary" type="button">consultation</button>
<button class="btn btn-primary" type="button">Examen</button>
<button class="btn btn-primary" type="button">patient</button>
<button class="btn btn-primary" type="button">sécurité</button>
<button class="btn btn-primary" style="float: right" type="button">Déconnexion</button>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12 no-padding">
<div class="tiles white">
<textarea rows="3" class="form-control user-status-box post-input" placeholder="ajouter votre statut"></textarea>
</div>
<div class="tiles grey padding-10">
<div class="pull-left">
<button class="btn btn-default btn-sm btn-small" type="button"><i class="fa fa-camera"></i></button>
<button class="btn btn-default btn-sm btn-small" type="button"><i class="fa fa-map-marker"></i></button>
</div>
<div class="pull-right">
<button class="btn btn-primary btn-sm btn-small" type="button">Ajouter</button>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<br>
<br>
<div class="row">
<div class="post col-md-12">
<div class="info-wrapper">
<div class="username">
<span class="bold">**{{ entity.statut.text }}**</span>
</div>
<div class="info">
<p class="text-black">Intervention sans machine cœur-poumon sur cœur battant
Cette intervention ressemble au pontage cardiaque, sauf que le cœur n’est pas arrêté et qu’on n’a pas recours à la machine cœur-poumon. À l’aide d’équipement spécial,
on stabilise ou calme la région cardiaque et les chirurgiens opèrent le cœur pendant qu’il continue de battre.</p><br/>
<img src="{{ asset('bundles/assets/img/med/principe-thrapie-cellulaire.png') }}">
</div>
<div class="more-details">
<ul class="post-links">
<li>2 Minutes ago</li>
<li>Collapse</li>
<li><i class="fa fa-reply"></i> Reply</li>
<li><i class="fa fa-star"></i> Favourited</li>
<li>More</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
`

If your Doctor entity has the correct getter/method getStatut() you then should be able to do the following in Twig:
{% for statut in entity.statut %}
{{ statut.whateverProperty }}
{% endfor %}

Related

update a section of a view

I have a problem updating a section of a laravel view. that section is in another view and is filled with the data of a db. What I want to do is that when clicking on a link that content is filtered and the other parts of the page remain as they were.
thanks
coursesCategories.blade.php
#extends('courses')
#section('content')
#extends('courses')
#section('content')
<div class="tab-pane fade show active" id="pills-todas" role="tabpanel" aria-labelledby="pills-todas-tab">
<div class="row justify-content-sm-center">
#foreach($cursos as $curso)
<div class="col col-12 col-sm-12 col-md-6 col-lg-4 vista_curso">
<div class="card column_course">
<a><img class="card-img-top img_course" src="{{ asset('assets/images/pictureDefault.png') }}" alt="Foto de curso" width="240" height="135"></a>
<div class="card-body column_course_interna">
<div class="include">
<div class="card-title titulo_curso">
<h3><b>{{ $curso->nombre }}</b></h3>
</div>
<ul>
<li>
<i class="fas fa-file col-1"></i>
<span class="lista_contenido col-11"> 4 documentos explicativos </span>
</li>
<li>
<i class="fas fa-clock col-1"></i>
<span class="lista_contenido col-11"> 32 minutos </span>
</li>
</ul>
</div>
<div class="compra">
<div><button type="button" class="btn btn-lg btn_suscribe btn_ver" style="width: 84%;">Ver Curso</button></div>
<div><button type="button" class="btn btn-lg btn_suscribe" style="width: 84%;">Suscribirse</button></div>
</div>
<div class="texto_precio">
<span class="price">20.99€</span>
</div>
</div>
</div>
</div>
#endforeach
</div>
</div>
#stop#stop
courses.blade.php
<div id="mostrar_cursos" class="container-fluid justify-content-center mostrar_cursos">
<div class="btn_filtros"> <button id="btn_filtros" type="button" class="btn btn-primary btn-sm btn-block d-md-none" onclick="viewfilter();ocult()">Filtrar</button></div>
<div class="row">
<div class="d-none d-md-block col col-md-4 col-lg-3 filter" style="max-width: 304px">
<div class="nav flex-column nav-pills" id="pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="pills-todas-tab" href="{{ action('CoursesController#showList') }}" role="tab" aria-controls="pills-todas" aria-selected="true">Todas</a>
#foreach($categorias as $categoria)
<a class="nav-link" id="pills-ofimatica-tab" href="{{ action('CoursesController#showCourses', $categoria->nombre) }}" role="tab" aria-controls="pills-".$categoria aria-selected="false">{{ $categoria->nombre }}</a>
#endforeach
</div>
<div class="rango_precio">
<form>
<label for="customRange">Rango de precio</label>
<input type="range" class="custom-range" id="customRange">
</form>
<div id="result">Valor menor que:
<b id="valor"></b>
<strong>€</strong>
</div>
</div>
<div class="order_by">
<button id="btn_ordenar" class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Ordenar por precio
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Precio más alto</button>
<button class="dropdown-item" type="button">Precio más bajo</button>
</div>
</div>
</div>
<div class="col col-md-8 col-lg-9 row">
<div class="navegador_category container">
<div class="tab-content" id="pills-tabContent">
#yield('content')
</div>
</div>
</div>
</div>
</div>
coursesController
class CoursesController extends Controller
{
// list all categories and courses
public function showList() {
// categories extracted from the bd
$categorias = \App\Categoria::listaTodasLasCategorias();
// filtering courses according to html
$cursos = \App\Curso::listaTodosLosCursos();
return view('courses.coursesCategories',['cursos' => $cursos, 'categorias' => $categorias]);
}
// list all categories and courses
public function showCourses(Request $request, String $category) {
// categories extracted from the bd
$categorias = \App\Categoria::listaTodasLasCategorias();
// filtering courses according to html
$cursos = \App\Curso::listarCursosPorCategoria($category);
$view = View::make('courses.coursesCategories', ['cursos' => $cursos]);
if(Request::ajax()) {
$sections = $view->renderSections(); // returns an associative array of 'content', 'head' and 'footer'
return $sections['content']; // this will only return whats in the content section
}
return $view;
}
}
routes
Route::get('/courses', 'CoursesController#showList');
Route::get('/courses/{category}', 'CoursesController#showCourses');

showing data in modal in laravel

I'm using Laravel and I'm trying to delete or update the services on my platform
I'm using confirmation modal for that..
but when I delete or or update or show content in the modal it always works on the first row only...
that's the code
#foreach ($services as $service)
<div class="card-content">
<div class="row">
<div class="col l4">
<div class="row">
<div class="col s12">
<span>
<a class="btn-floating btn-large modal-trigger tooltipped waves-effect waves-light red hoverable"
data-position="left"
data-tooltip="Supprimer ce service"
data-text-color="grey-text"
href="#modal1">
<i class="material-icons">delete</i>
</a>
</span>
<span>
<a class="btn-floating btn-large modal-trigger tooltipped waves-effect waves-light green"
data-position="right"
data-tooltip="Modifier ce service"
data-delay="20"
href="#modal2">
<i class="material-icons" href="#modal2">update</i>
</a>
</span>
</div>
</div>
<div id="modal1" class="modal">
<div class="modal-content">
<div class="row">
<div class="col s6">
<p>Voulez vous vraiment supprimer ce service ?</p>
</div>
<div class="col s6">
<form action="/Services/{{$service->id}}" method="POST">
{{ csrf_field() }}
#method('DELETE')
<span>
<input type="submit" class="btn purple hoverable waves effect" value="supprimer">
</span>
<span>
Non
</span>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#endforeach
Invoke modal via jquery like
$('#myModal').modal('show');
$('#myModal').modal('hide');
In Loop Anchor
<span>
<a class="btn-floating btn-large modal-trigger tooltipped waves-effect waves-light green modalclick"
data-position="right"
data-tooltip="Modifier ce service"
data-delay="20"
data-id="<?php echo $service->id; ?>"
href="javascript:void(0)"
>
<i class="material-icons" href="#modal2>update</i>
</a>
</span>
$(".modalclick").click(function(){
var current_id = $(this).attr("data-id");
//use jquery below to change modal form action with id
$('#myModal').modal('show');
});
Define modal popup for each record if you in loop if you dont want to use jquery that get and service id and pass into modal form.
<?php $a = 1; ?>
#foreach ($services as $service)
<div class="card-content">
<div class="row">
<div class="col l4">
<div class="row">
<div class="col s12">
<span> <a class="btn-floating btn-large modal-trigger tooltipped waves-effect waves-light red hoverable" data-position="left" data-tooltip="Supprimer ce service" data-text-color="grey-text" href="#modal{{$a}}"><i class="material-icons">delete</i></a></span>
<span> <a class="btn-floating btn-large modal-trigger tooltipped waves-effect waves-light green" data-position="right" data-tooltip="Modifier ce service" data-delay="20" href="#modal2"><i class="material-icons" href="#modal2">update</i></a></span>
</div>
</div>
<div id="modal{{$a}}" class="modal">
<div class="modal-content">
<div class="row">
<div class="col s6">
<p>Voulez vous vraiment supprimer ce service ?</p>
</div>
<div class="col s6">
<form action="/Services/{{$service->id}}" method="POST">
{{ csrf_field() }}
#method('DELETE')
<span>
<input type="submit" class="btn purple hoverable waves effect" value="supprimer">
</span>
<span>
Non
</span>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php $a++; ?>
#endforeach
See if it is work for you.

Passing data attribute value into blade route

I'm building a blog to learn Laravel (5.4.13). In my posts show view I'm looping through all the corresponding post comments. Beside each comment is an edit button and a delete button. For comment editing, I'm attempting to use a modal instead of redirecting to the typical edit view. Currently I'm storing the specific comment data within two data-attributes, and then retrieving those values using jQuery. Then I'm using jQuery again to pass the data into the modal. This is working fine except I'm not sure how to pass the $comment->id into the form route. Any help is much appreciated.
#extends('main')
#section('title', 'View Post')
#section('content')
<div class="row">
<div class="col-md-8">
<h1>{{$post->title}}</h1>
<small>Published: <i class="fa fa-clock-o"></i> {{ $post->created_at->format('M Y, h:i a') }}</small>
<hr class="light-hr">
<p class="lead">{{ str_limit($post->body, $limit = 200, $end = '...') }}</p>
<hr>
<div class="tags">
#foreach($post->tags as $tag)
<span class="label">
{{ $tag->name }}
</span>
#endforeach
</div>
<br>
<br>
{{-- Display comments associated with posts --}}
<h4>Related Posts <i class="fa fa-level-down"></i></h4>
#foreach($post->comments as $comment)
<?php $avatars = array('monsterid', 'identicon', 'wavatar', 'retro'); ?>
<?php $randAvatars = urlencode($avatars[array_rand($avatars)]); ?>
<div class="comments">
<div class="author-info">
<div class="author-img">
<img src={{"https://www.gravatar.com/avatar/".md5(strtolower(trim($comment->email)))."?s=55&d=".$randAvatars}} class="img-circle" alt="user profile image">
</div>
<div class="author-meta">
<b>{{$comment->name}}</b>
made a post.
<h6>Published: <i class="fa fa-clock-o"></i> {{ $comment->created_at->format('M Y, h:i a') }}</h6>
</div>
<div class="comment-controls pull-right">
<button
type="button"
class="btn btn-primary btn-sm fa fa-pencil edit-comment"
data-toggle="modal"
data-comment="{{$comment->comment}}"
data-comment-id="{{$comment->id}}"
data-target="#editComment">
</button>
<button type="button" class="btn btn-danger btn-sm fa fa-trash"></button>
</div>
</div>
<div class="author-comment">
<hr>
<p>{{$comment->comment}}</p>
</div>
</div>
#endforeach
</div>
<div class="col-md-4">
<div class="well">
<dl class="dl-horizontal">
<dt>Created:&nbsp</dt>
<dd> {{ $post->created_at->format('M jS, Y') }}</dd>
<dd><i class="fa fa-clock-o"></i> {{ $post->created_at->format('h:i:s a') }}</dd>
</dl>
<dl class="dl-horizontal">
<dt>Last Updated:&nbsp</dt>
<dd>{{ $post->updated_at->format('M jS, Y') }}</dd>
<dd><i class="fa fa-clock-o"></i> {{ $post->updated_at->format('h:i:s a') }}</dd>
</dl>
<dl class="dl-horizontal">
<dt>Post Slug:&nbsp</dt>
<dd>{{ url('blog/'.$post->slug) }}</dd>
</dl>
<dl class="dl-horizontal">
<dt>Category:&nbsp</dt>
<dd>{{ $post->category->name }}</a></dd>
</dl>
<hr>
<div class="row">
<div class="col-sm-6">
Edit
</div>
<div class="col-sm-6">
<form action="{{ route('posts.destroy', $post->id) }}" method="POST">
<input type="submit" value="Delete" class="btn btn-danger btn-block">
<input type="hidden" name="_token" value="{{ Session::token() }}">
{{ method_field('DELETE') }}
</form>
</div>
<div class="col-sm-12">
Back to <i class="fa fa-long-arrow-right" aria-hidden="true"></i> Posts
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="editComment" tabindex="-1" role="dialog" aria-labelledby="editCommentLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="editCommentLabel">Edit Comment</h4>
</div>
<div class="modal-body">
<form action="{{route('comments.update', $comment->id)}}" method="POST">
<div class="modal-body">
<div class="form-group">
<textarea name="comment" class="form-control current-comment"></textarea>
<span class="test"></span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" value="Save Changes" class="btn btn-primary">
<input type="hidden" name="_token" value="{{ Session::token() }}">
{{ method_field('PUT') }}
</div>
</form>
</div>
</div>
</div>
</div>
#section('scripts')
<script>
$('.edit-comment').on('mousedown', function(){
var comment = $(this).attr('data-comment');
var comment_id = $(this).attr('data-comment-id');
$('.current-comment').html(comment);
$('.test').html(comment_id);
});
</script>
#endsection
#endsection
// Comments Routes
Route::post('comments/{id}', ['uses' => 'CommentsController#store', 'as' => 'comments.store']);
Route::put('comments/{id}', ['uses' => 'CommentsController#update', 'as' => 'comments.update']);
You're almost there. I would suggest that you don't need to pass the {id} since you use the [PUT] method to pass the data in your {form}.
We can set a new hidden {input} type inside your {form} (e.g input[name="edit_comment_id"]) and remove the request parameter from the url in your form's {action} attribute.
Like this:
<form action="{{route('comments.update')}}" method="POST" id="update-comment">
<div class="modal-body">
<div class="form-group">
<input type="hidden" name="edit_comment_id" /> //place the {id} in here
<textarea name="comment" class="form-control current-comment"></textarea>
<span class="test"></span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" value="Save Changes" class="btn btn-primary">
<input type="hidden" name="_token" value="{{ Session::token() }}">
{{ method_field('PUT') }}
</div>
</form>
Then in your {scripts} section:
$('.edit-comment').on('mousedown', function(){
var comment = $(this).attr('data-comment');
var comment_id = $(this).attr('data-comment-id'); // (e.g 12)
var oFormUpdateComment = $('#update-comment'); //add an {id} attribute on your form name 'update-comment' as given above.
oFormUpdateComment.find('input[name="edit_comment_id"]').val(comment_id);
});
And since we didn't pass a request parameter next to the 'comments' url anymore, You will update your [routes.php] like this:
Route::post('comments', ['uses' => 'CommentsController#store', 'as' => 'comments.store']);
Route::put('comments', ['uses' => 'CommentsController#update', 'as' => 'comments.update']);
Then in your [CommentsController], Since you already know how to get those values:
use Illuminate\Support\Facades\Input;
class CommentsController extends Controller
{
protected function store()
{
print_r('<pre>');
var_dump(Input::get('edit_comment_id'));
}
protected function update()
{
print_r('<pre>');
var_dump(Input::all());
}
}
Hope this helps for your case.
I was reluctant to answer this myself but was able to get it to work after rethinking my approach. Instead of trying to alter the blade url in the form somehow, I left the action attribute blank and built the url dynamically when the event fired. So as I did before, I grabbed the data from the data attributes, but instead of trying to alter the blade tag in the form, the url is built and then added to the action attribute. This thread was a great help. I posted my updated code incase it helps anyone.
#extends('main')
#section('title', 'View Post')
#section('content')
<div class="row">
<div class="col-md-8">
<h1>{{$post->title}}</h1>
<small>Published: <i class="fa fa-clock-o"></i> {{ $post->created_at->format('M Y, h:i a') }}</small>
<hr class="light-hr">
<p class="lead">{{ str_limit($post->body, $limit = 200, $end = '...') }}</p>
<hr>
<div class="tags">
#foreach($post->tags as $tag)
<span class="label">
{{ $tag->name }}
</span>
#endforeach
</div>
<br>
<br>
{{-- Display comments associated with posts --}}
<h4>Related Posts <i class="fa fa-level-down"></i></h4>
#foreach($post->comments as $comment)
<?php $avatars = array('monsterid', 'identicon', 'wavatar', 'retro'); ?>
<?php $randAvatars = urlencode($avatars[array_rand($avatars)]); ?>
<div class="comments">
<div class="author-info">
<div class="author-img">
<img src={{"https://www.gravatar.com/avatar/".md5(strtolower(trim($comment->email)))."?s=55&d=".$randAvatars}} class="img-circle" alt="user profile image">
</div>
<div class="author-meta">
<b>{{$comment->name}}</b>
made a post.
<h6>Published: <i class="fa fa-clock-o"></i> {{ $comment->created_at->format('M Y, h:i a') }}</h6>
</div>
<div class="comment-controls pull-right">
{{-- Store comment specific data to built URL for modal --}}
<button
type="button"
class="btn btn-primary btn-sm fa fa-pencil edit-comment"
data-toggle="modal"
data-comment="{{$comment->comment}}"
data-comment-id="{{$comment->id}}"
data-target="#editComment">
</button>
<button type="button" class="btn btn-danger btn-sm fa fa-trash" ></button>
</div>
</div>
<div class="author-comment">
<hr>
<p>{{$comment->comment}}</p>
</div>
</div>
#endforeach
</div>
<div class="col-md-4">
<div class="well">
<dl class="dl-horizontal">
<dt>Created:&nbsp</dt>
<dd> {{ $post->created_at->format('M jS, Y') }}</dd>
<dd><i class="fa fa-clock-o"></i> {{ $post->created_at->format('h:i:s a') }}</dd>
</dl>
<dl class="dl-horizontal">
<dt>Last Updated:&nbsp</dt>
<dd>{{ $post->updated_at->format('M jS, Y') }}</dd>
<dd><i class="fa fa-clock-o"></i> {{ $post->updated_at->format('h:i:s a') }}</dd>
</dl>
<dl class="dl-horizontal">
<dt>Post Slug:&nbsp</dt>
<dd>{{ url('blog/'.$post->slug) }}</dd>
</dl>
<dl class="dl-horizontal">
<dt>Category:&nbsp</dt>
<dd>{{ $post->category->name }}</a></dd>
</dl>
<hr>
<div class="row">
<div class="col-sm-6">
Edit
</div>
<div class="col-sm-6">
<form action="{{ route('posts.destroy', $post->id) }}" method="POST">
<input type="submit" value="Delete" class="btn btn-danger btn-block">
<input type="hidden" name="_token" value="{{ Session::token() }}">
{{ method_field('DELETE') }}
</form>
</div>
<div class="col-sm-12">
Back to <i class="fa fa-long-arrow-right" aria-hidden="true"></i> Posts
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="editComment" tabindex="-1" role="dialog" aria-labelledby="editCommentLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="editCommentLabel">Edit Comment</h4>
</div>
<div class="modal-body">
<form id="comment-edit-modal" action="" method="POST">
<div class="modal-body">
<div class="form-group">
<textarea name="comment" class="form-control current-comment"></textarea>
<span class="test"></span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" value="Save Changes" class="btn btn-primary">
<input type="hidden" name="_token" value="{{ Session::token() }}">
{{ method_field('PUT') }}
</div>
</form>
</div>
</div>
</div>
</div>
#section('scripts')
<script>
$('.edit-comment').on('mousedown', function(){
var comment = $(this).attr('data-comment');
$('.current-comment').html(comment);
var comment_id = $(this).attr('data-comment-id');
var form = $('#comment-edit-modal')
// Set current URL
var comment_edit_URL = {!! json_encode(url('/comments')) !!} + '/' + comment_id;
// Append currrent URL
form.attr('action', comment_edit_URL);
});
</script>
#endsection
#endsection

Links and buttons don't work on small and extra small screens in bootstrap grid

I have created a view that shows 2 columns on medium and large screens but only 1 column on small and extra small screens. I'm using the push and pull classes from bootstrap to reorder my panels at different screen sizes.
My problem is that on small and extra small screen sizes some of my links and buttons are not clickable.
I have followed this thread Links in bootstrap grid stop working in small screen mode. It says the problem is that the links are floated, resulting in a height of 0 for the parent container.
I have tried using the "clearfix" class. I've also created my own class using overflow:auto and another using overflow:hidden and none of these work.
I have never had this problem before but this is the first time I've used push/pull. Would you take a look at my code and see if you can spot the problem?
<div class="container">
<!--*********************************Modal for notes**********************************************************-->
<div class="modal fade" id="myModal" name="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title" id="myModalLabel">Notes</h3>
</div>
<div class="modal-body">
<form method="post" action="/notes/save" role="form" name="new_note">
{!! csrf_field() !!}
<div class="form-group">
<label for="note">Type a new note for this client. (The current date will be automatically added.)</label>
<textarea class="form-control" rows="15" name="note" id="note" required></textarea>
<input type="hidden" name="ind_id" value="{{ $id }}">
<input type="hidden" name="timestamp" id="timestamp">
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" value="Save Changes" onclick="this.form.timestamp.value=Date.now()">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</form>
</div>
</div>
</div>
</div>
<!--***********************************End modal code***********************************************************-->
<div class="row">
<div class="col-md-8 col-md-push-4 col-lg-9 col-lg-push-3">
<!--************************************Name and Address********************************************************-->
<div class="panel panel-primary">
<div class="panel-heading">Name and Address</div>
<div class="panel-body">
<address class="col-md-6">
<strong>{{ $ind->name }}</strong><br>
#if ($ind->MailingStreet)
{{ $ind->MailingStreet }}<br>
#endif
#if ($ind->MailingCity || $ind->MailingState || $ind->MailingPostalCode)
{{ $ind->MailingCity . ", " . $ind->MailingState . " " . $ind->MailingPostalCode }}
#endif
</address>
<address class="col-md-6">
#if ($ind->OtherStreet || $ind->OtherCity || $ind->OtherState || $ind->OtherPostalCode)
<strong>Other Address</strong><br>
#endif
#if ($ind->OtherStreet)
{{ $ind->OtherStreet }}<br>
#endif
#if ($ind->OtherCity || $ind->OtherState || $ind->OtherPostalCode)
{{ $ind->OtherCity . ", " . $ind->OtherState . " " . $ind->OtherPostalCode }}
#endif
</address>
</div>
</div>
<!--*******************************************End Name and Address***************************************-->
<!--*******************************************Contact Info***********************************************-->
<div class="panel panel-danger">
<div class="panel-heading">Contact Info</div>
<div class="panel-body">
#if ($ind->Cell_Phone)
<div class="col-md-5 col-sm-6"><strong>Cell Phone</strong></div>
<div class="col-md-7 col-sm-6">{{ $ind->Cell_Phone }}</div>
#endif
#if ($ind->Spouse_Cell_Phone)
<div class="col-md-5 col-sm-6"><strong>Spouse Cell Phone</strong></div>
<div class="col-md-7 col-sm-6">{{ $ind->Spouse_Cell_Phone }}</div>
#endif
#if ($ind->Business_Phone)
<div class="col-md-5 col-sm-6"><strong>Business Phone</strong></div>
<div class="col-md-7 col-sm-6">{{ $ind->Business_Phone }}</div>
#endif
#if ($ind->Spouse_Business_Phone)
<div class="col-md-5 col-sm-6"><strong>Spouse Business Phone</strong></div>
<div class="col-md-7 col-sm-6">{{ $ind->Spouse_Business_Phone }}</div>
#endif
#if ($ind->HomePhone)
<div class="col-md-5 col-sm-6"><strong>Home Phone</strong></div>
<div class="col-md-7 col-sm-6">{{ $ind->HomePhone }}</div>
#endif
#if ($ind->Fax)
<div class="col-md-5 col-sm-6"><strong>Fax</strong></div>
<div class="col-md-7 col-sm-6">{{ $ind->Fax }}</div>
#endif
#if ($ind->Email)
<div class="col-md-5 col-sm-6"><strong>Email</strong></div>
<div class="col-md-7 col-sm-6">{{ $ind->Email }}</div>
#endif
#if ($ind->Spouse_Email)
<div class="col-md-5 col-sm-6"><strong>Spouse Email</strong></div>
<div class="col-md-7 col-sm-6">{{ $ind->Spouse_Email }}</div>
#endif
#if ($ind->Return_Type)
<div class="col-md-5 col-sm-6"><strong>Return Type</strong></div>
<div class="col-md-7 col-sm-6">{{ $ind->Return_Type }}</div>
#endif
</div>
</div>
<!--*********************************************End Contact Info******************************************-->
</div>
<div class="col-sm-12 col-md-4 col-md-pull-8 col-lg-3 col-lg-pull-9 pull-right">
<!--*******************************************Options***********************************************************-->
<ul class="list-group">
<li class="list-group-item">
<i class="fa fa-pencil-square-o"></i> Edit Client
</li>
<li class="list-group-item">
<i class="fa fa-times"></i> Delete Client
</li>
<li class="list-group-item">
<button type="button" class="btn btn-success btn-block no-print" data-toggle="modal" data-target="#myModal"><i class="fa fa-sticky-note-o"></i> Add Note</button>
</li>
<!--********************Link Form*****************************************-->
<li class="list-group-item">
<form action="/links/save" method="post" class="form-inline">
{!! csrf_field() !!}
<div class="input-group btn-block">
<input id="autocomplete" type="text" class="form-control autocomplete no-print" name="client" placeholder="Add link..." required>
<input id="autocomplete-value" type="hidden" name="autocomplete-value" class="autocomplete-value">
<input id="ind_id" name="ind_id" type="hidden" value="{{ $id }}">
<span class="input-group-btn">
<button type="submit" class="btn btn-success no-print" style="height:36px;">Go</button>
</span>
</div>
</form>
</li>
<!--***********************End Link form*************************************-->
</ul>
<!--***************************************End Options*********************************************************-->
<!--************************************************Routing sheet starts here*********************************************************-->
#if(isset($routing_sheet))
<div class="panel panel-info" id="2015_routing_sheet">
<div class="panel-heading" role="tab" id="headingOne">2015 Tax Return</div>
<ul class="list-group">
#foreach($routing_sheet as $r)
<form action='/individuals/tax_return_2015' method='post'>
{!! csrf_field() !!}
#if($r->user_name)
<li class="list-group-item" style="padding: 5px 5px 5px 5px;">
<div>
<button
type='submit'
class='btn btn-success btn-xs'
name='button'
value="Clear"
onclick="return confirm('Are you sure you want to clear this event?')">
<i class="fa fa-check" aria-hidden="true"></i>
</button>
<strong>{{ $r->name }}</strong>
</div>
<div>
{{ $r->user_name }}
{{ $r->date ? date('m/d/Y h:i a', strtotime($r->date)) : '' }}
</div>
<input type='hidden' name='routing_events_id' id='routing_events_id' value='{{ $r->id }}'>
<input type='hidden' name='routing_data_id' id='routing_data_id' value='{{ $r->routing_data_id }}'>
</li>
#else
<li class="list-group-item" style="padding: 5px 5px 5px 5px;">
<button
type='submit'
class='btn btn-danger btn-xs'
name='button'
value="Done"
onclick='this.form.timestamp.value=Date.now()'>
<i class="fa fa-square-o" aria-hidden="true"></i>
</button>
<strong>{{ $r->name }}</strong>
{{ $r->user_name }}
{{ $r->date ? date('m/d/Y h:i a', strtotime($r->date)) : '' }}
<input type='hidden' name='routing_events_id' id='routing_events_id' value='{{ $r->id }}'>
<input type='hidden' name='routing_data_id' id='routing_data_id' value='{{ $r->routing_data_id }}'>
</li>
#endif
<input id="ind_id" name="ind_id" type="hidden" value="{{ $id }}">
<input type="hidden" name="timestamp" id="timestamp">
</form>
#endforeach
</ul>
</div>
#endif
<!--*********************************************Routing Sheet ends here***********************************************-->
</div>
<div class="col-md-8 col-md-push-4 col-lg-9 col-lg-push-3">
<!--*******************************************Links**********************************************************-->
<div class="panel panel-warning">
<div class="panel-heading">Links</div>
<ul class="list-group">
<!--******************Start of displaying links*****************-->
#if(count($links_ind))
#foreach($links_ind as $link)
<li class="list-group-item">
<div class="row">
<div class="col-md-1 col-xs-1">
<a
href='/links/delete/{{ $link->link_id }}'
class='btn btn-danger btn-sm no-print'
onclick="return confirm ('Are you sure you want to delete this link?')">
<i class="fa fa-times"></i>
</a>
</div>
<div class="col-md-11 col-xs-11">
<div class="col-md-4 col-sm-5"><strong>Name</strong></div>
<div class="col-md-8 col-sm-7">
<a href='/individuals/{{ $link->ind_id }}'>{{ $link->FirstName.' '.$link->LastName }}</a>
</div>
#if ($link->Business_Phone)
<div class="col-md-4 col-sm-5"><strong>Business Phone</strong></div>
<div class="col-md-8 col-sm-7">{{ $link->Business_Phone }}</div>
#endif
#if ($link->Cell_Phone)
<div class="col-md-4 col-sm-5"><strong>Cell Phone</strong></div>
<div class="col-md-8 col-sm-7">{{ $link->Cell_Phone }}</div>
#endif
#if ($link->Spouse_Cell_Phone)
<div class="col-md-4 col-sm-5"><strong>Spouse Cell Phone</strong></div>
<div class="col-md-8 col-sm-7">{{ $link->Spouse_Cell_Phone }}</div>
#endif
#if ($link->HomePhone)
<div class="col-md-4 col-sm-5"><strong>Home Phone</strong></div>
<div class="col-md-8 col-sm-7">{{ $link->HomePhone }}</div>
#endif
</div>
</div>
</li>
#endforeach
#endif
#if(count($links_bus))
#foreach($links_bus as $link)
<li class="list-group-item">
<div class="row">
<div class="col-md-1 col-xs-1">
<a href='/links/delete/{{ $link->link_id }}'
class='btn btn-danger btn-sm no-print'
onclick="return confirm ('Are you sure you want to delete this link?')">
<i class="fa fa-times"></i>
</a>
</div>
<div class="col-md-11 col-xs-11">
<div class="col-md-4 col-sm-5"><strong>Name</strong></div>
<div class="col-md-7 col-sm-7">
<a href='/businesses/{{ $link->bus_bus_id }}'>{{ $link->company_name }}</a>
</div>
#if ($link->business_phone)
<div class="col-md-4 col-sm-5"><strong>Business Phone</strong></div>
<div class="col-md-7 col-sm-7">{{ $link->business_phone }}</div>
#endif
#if ($link->cell_phone)
<div class="col-md-4 col-sm-5"><strong>Cell Phone</strong></div>
<div class="col-md-7 col-sm-7">{{ $link->cell_phone }}</div>
#endif
#if ($link->fax)
<div class="col-md-4 col-sm-5"><strong>Fax</strong></div>
<div class="col-md-7 col-sm-7">{{ $link->fax }}</div>
#endif
#if ($link->email)
<div class="col-md-4 col-sm-5"><strong>Email</strong></div>
<div class="col-md-7 col-sm-7">{{ $link->email }}</div>
#endif
</div>
</div>
</li>
#endforeach
#endif
</ul>
</div>
<!--*******************************************************End of displaying links*************************************************-->
<!--*****************************************start of displaying notes************************************************-->
<div class="panel panel-success">
<div class="panel-heading">Notes</div>
<ul class="list-group">
#if(count($notes))
<!--***********************************Modal for each note*******************************************-->
#foreach($notes as $note)
<div class='modal fade'
id='myModal{{ $note->id }}'
name='myModal{{ $note->id }}'
tabindex='-1'
role='dialog'
aria-labelledby='myModalLabel'>
<div class='modal-dialog modal-lg' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>×</span></button>
<h3 class='modal-title' id='myModalLabel'>Edit Note</h3>
</div>
<form method='post' action='/notes/save' role='form' name='new_note'>
{!! csrf_field() !!}
<div class='modal-body'>
<div class='form-group'>
<label for='note'>Edit the note and save your changes.</label>
<textarea class='form-control' rows='15' name='note' id='note' required>{{ $note->note }}</textarea>
<input type='hidden' name='ind_id' id='ind_id' value="{{ $id }}">
<input type='hidden' name='note_id' id='note_id' value="{{ $note->id }}">
<input type='hidden' name='timestamp' id='timestamp'>
</div>
</div>
<div class='modal-footer'>
<input type='submit' class='btn btn-primary' value='Save Changes' onclick='this.form.timestamp.value=Date.now()'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
</div>
</form>
</div>
</div>
</div>
<!--*****************************************End Modal for each note****************************************-->
<li class="list-group-item">
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-2 col-xs-4">
<button type='button'
class='btn btn-warning no-print'
data-toggle='modal'
data-target='#myModal{{ $note->id }}'
>
<i class="fa fa-pencil-square-o"></i>
</button>
<a href='/notes/delete/{{ $note->id }}'
class='btn btn-danger no-print'
onclick="return confirm('Are you sure you want to delete this note?')"
><i class="fa fa-times"></i></a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-8">{{ $note->user->name . ' ' . $note->user->last_name }}<br>{{ $note->timestamp->format('n/j/Y') }}</div>
<div class="col-lg-8 col-md-6 col-sm-12"><pre class="pre-note">{{ $note->note }}</pre></div>
</div>
</li>
#endforeach
#endif
</ul>
</div>
<!--******************************************end of displaying notes***************************************************-->
<!--*****************************************start of displaying invoices***********************************************
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Invoices</h3>
</div>
<div class="panel-body">
<ol>
#foreach($invoices as $invoice)
<li><a href='/invoice/pdf/{{ $invoice->id }}'>{{ date('m-d-Y', strtotime($invoice->date)) }}</a> {{ '$' . $invoice->amount }}</li>
#endforeach
</ol>
</div>
</div>
<!****************************************end of displaying invoices**************************************************-->
</div>
<script>
//This encodes the PHP array as JSON so that the autocomplete.js script can use it
var dataTwo = {!! $dataTwo !!};
</script>
</div>
</div>
Thank you
Jason
I didn't go through your whole code, but here is what I think is the problem. if for example you have a situation where you need to show
different number of columns on different screen sizes with bootstrap, please be specific with all column sizes. Don't let bootstrap guess.
here is what I mean:
for example you have this code:
<div class="col-lg-2 col-md-3 col-sm-2 col-xs-4">
<button type='button'
class='btn btn-warning no-print'
data-toggle='modal'
data-target='#myModal{{ $note->id }}'
>
<i class="fa fa-pencil-square-o"></i>
</button>
<a href='/notes/delete/{{ $note->id }}'
class='btn btn-danger no-print'
onclick="return confirm('Are you sure you want to delete this note?')"
><i class="fa fa-times"></i></a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-8">{{ $note->user->name . ' ' . $note->user->last_name }}<br>{{ $note->timestamp->format('n/j/Y') }}</div>
<div class="col-lg-8 col-md-6 col-sm-12"><pre class="pre-note">{{ $note->note }}</pre></div>
You can see that you have specified the following for extra small screens: "col-xs-4", and "col-xs-8" for the first and second div's respectevely. What
about the third div? You have implied that it is "col-xs-12". I am afraid you will have to explicitely say that it is "col-xs-12".
so if you were to change your code to :
<div class="col-lg-2 col-md-3 col-sm-2 col-xs-4">
<button type='button'
class='btn btn-warning no-print'
data-toggle='modal'
data-target='#myModal{{ $note->id }}'
>
<i class="fa fa-pencil-square-o"></i>
</button>
<a href='/notes/delete/{{ $note->id }}'
class='btn btn-danger no-print'
onclick="return confirm('Are you sure you want to delete this note?')"
><i class="fa fa-times"></i></a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-8">{{ $note->user->name . ' ' . $note->user->last_name }}<br>{{ $note->timestamp->format('n/j/Y') }}</div>
<div class="col-lg-8 col-md-6 col-sm-12 col-xs-12"><pre class="pre-note">{{ $note->note }}</pre></div>
It is going to work without any problem. Notice the explicit "col-xs-12" for the last div. The problem is on xtra small screens the first and second div's are floated left because they have "col-xs-..." whilst the third div is not floated and ends up causing chaos!
Have fun!!

Laravel 5.2 LengthAwarePaginator does not show any result on navigating to next page

I'm using a LengthAwarePaginator which paginates the results obtained from Twitter api. The first page works just fine but as i navigate to the any other page through the paginated links, it does not give any result.
Routes:
Route::any('/search', ['uses' => 'TweetController#getSearch', 'as' => 'search']);
TweetController:
public function getSearch(Request $request)
{
$currentPage = LengthAwarePaginator::resolveCurrentPage();
$perPage = 6;
$tweetArray = Twitter::getUserTimeline(['screen_name' => $request['search'], 'count' => $request['count']]);
$tweetPerPage = array_slice($tweetArray, (($currentPage-1) * $perPage), $perPage, true);
$tweets = new LengthAwarePaginator($tweetPerPage, count($tweetArray), $perPage, $currentPage, ['path' => $request->url()]);
return view('tweets', ['tweets' => $tweets]);
}
tweet.blade.php:
<div class="row">
<form action="{{ route('search') }}" method="post">
<div class="col-md-5 col-md-offset-3">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">#</span>
<input type="text" class="form-control" placeholder="Search using Twitter Handle" name="search" aria-describedby="basic-addon1">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="number">How many?</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li>10</li>
<li>20</li>
<li>30</li>
</ul>
</div>
</div>
</div>
<div class="col-md-1">
<button type"submit" class="btn btn-info">Search</button>
</div>
<input type="hidden" name="count" value="10">
</form>
</div>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.dropdown-menu > li').click(function() {
var cnt = $(this).children().html();
$('input[type="hidden"]').val(cnt);
$('.number').html(cnt);
});
});
</script>
<hr />
#foreach($tweets as $tweet)
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="well">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="{{ $tweet->user->profile_image_url }}">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">{{ $tweet->user->name }}</h4>
{{ $tweet->text }}
</div>
<small class="pull-right">{{ Twitter::ago($tweet->created_at) }}</small>
</div>
</div>
</div>
</div>
#endforeach
<div class="row">
<div class="text-center">
{!! $tweets->render() !!}
</div>
</div>

Categories