Laravel - Dynamically loading content within a tabbed pane - php

I believe i have the structure of everything correct.
But the tab links (which are correct) within the page do not force the page to refresh?
Changing the URI and altering the Tag parameter will make the page load, so its kind of working?
But the links don't work?
Also, is this the best way of doing this?
Routes (web.php)
Route::get('/admin/site', [SiteController::class, 'index'])
->name('admin.adminSiteDash');
Route::get('/admin/site/{tab?}', [SiteController::class, 'show'])
->name('admin.adminSiteDash.Tab');
Site Controller
public function index() {
return redirect(route('admin.adminSiteDash.Tab', 'tab1'));
}
public function show($tab = null) {
if (is_null($tab)) {
$tab = 'tab1';
}
return view('admin.adminSiteDash', [
'regions' => Region::all(),
'tab' => $tab
]);
}
View (named admin.adminSiteDash)
<ul class="nav nav-tabs" id="myTab" role="tablist">
Tab 1
Tab 2
Tab 3
Tab 4
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
#include('admin.site.prop_' . $tab)
</div>

I needed to remove the Jquery part to the Tabs as really they are just elements..
Removing data-toggle="tab"from the ahrefs got behaviour i was after!

Related

How to show only one data in blade that coming from collection in Laravel?

im new at Laravel, so i have following problem:
I have db with issue table, that contains 15 names of diseases with it's description. This is my model
class Issue extends Model
{
use HasFactory;
use SoftDeletes;
protected $guarded = false;
public function gender() {
return $this->belongsTo(BodyPart::class);
}
}
And here's controller:
use App\Http\Controllers\Controller;
use App\Models\Issue;
class IndexController extends Controller
{
public function __invoke()
{
$eye_issues = Issue::all();
return view('app.issues.man.eyes.index', compact('eye_issues'));
}
}
And finally below my blade file:
<main>
<section id="schedule" class="section-with-bg">
<ul class="nav nav-tabs" role="tablist" data-aos="fade-up" data-aos-delay="100">
#foreach($eye_issues as $issue)
#if($issue->body_part_id == 2 and $issue->gender_id == 1)
<li class="nav-item">
<a class="nav-link" href="#issue-{{ $issue->id }}" role="tab"
data-bs-toggle="tab">{{ $issue->issue }}</a>
</li>
#endif
#endforeach
</ul>
<div class="tab-content row justify-content-center" data-aos="fade-up" data-aos-delay="200">
#foreach($eye_issues as $issue)
#if($issue->body_part_id == 2 and $issue->gender_id == 1)
<div role="tabpanel" class="col-lg-9 tab-pane fade show active" id="issue-{{ $issue->id }}">
<div class="row schedule-item justify-content-center">
<div class="col-md-10" style=text-align:center>
<h4>{{ $issue->description }}</h4>
Test yourself
</div>
</div>
</div>
#endif
#endforeach
</div>
</div>
</section>
</main>
So problem is, after loading the page, navigation tabs should show all disease names (as it does) and the description section must be empty and show according description of disease that selected from nav-tabs and change description if disease is changed from nav-tabs. But after loading page, in the description section, there are all disease description, even nav-tabs selected to none onload. Only after selecting all diseases from nav-tabs, page works properly.
P.S I use MySQL if case u wanted to know. i tried to use all JS and CSS hide and show functions and other methods from internet, but no one works, and i guess it depends only on laravel it self. if you dont understand what i mean, comment it, i'll leave link for demo video of the issue

Typo3 : display detail data in a modal pop up

I created a list of users in clickable cards, and when we click on the card, a modal popup appear.
I want now to display the detail of the user in theses popup but I don't really know how I have to do for displaying on the popup, the data of the user on which I click.
there is my List code :
<div class="container employees">
<div class="row">
<f:for each="{users}" as="user">
<div class="card card-annuaire">
<div class="card-body">
<h5 class="card-title">{user.firstname} {user.lastname}</h5>
<div class="links">
<ul>
<li class="loc">{user.address}</li>
<li class="tel">{user.telephone}</li>
<li class="service">{user.title}</li>
<li class="loc">{user.address}</li>
</ul>
</div>
</div>
</div>
</f:for>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<ul>
<li class="mail"></li>
<li class="tel"></li>
<li class="service"></li>
<li class="loc"></li>
<li class="comp"></li>
</ul>
</div>
</div>
controller :
public function listAction()
{
$users = $this->frontendUser->findAll();
$this->view->assign('users', $users);
}
Is my request possible with my current code?
My modal works perfectly, I just need to add my data
Someone have an Idea to how can I do it ?
Update : solved with some Jquery code to copy my data already existing :
<script>
const modal = $('#exampleModal');
$('.card-annuaire').click(function () {
const divAnnuaire = $(this);
$('.modal-title', modal).text($('.card-title', divAnnuaire).text());
$('li.tel', modal).text($('.tel', divAnnuaire).text());
$('li.service', modal).text($('.service', divAnnuaire).text());
$('li.loc', modal).text($('.loc', divAnnuaire).text());
})
</script>
The handling of the modal is a question of javascript.
If you have all data in each block of the user list you can add some javascript to each block which copies this data from the current block (this) into your modal and then unhide the modal.
On hiding the modal you don't need to do anything to the included data, as the next click (which also can occur if the modal already is visible) will fill in the data from the clicked data block.
If in your modal more data should be visible than you stored in your list you need to do something more:
you need the ID of the data to get the whole user-record by ajax call.
but otherwise the handling is the same: on each list block you have an eventhandler, which is triggered by a click and which uses data from the block (all fields, or just the uid for an ajax-call to get all data) and insert this data into the modal.

Laravel 7.14 loading social links with for each loop on header

I have a datatable for social links. a user can edit the link whenever he wants.
Just link any other crud it is very simple. I am trying to load all the links in blade view with icons in header of my app. I created as function and added a for each loop in the snippets.
here's my controller:
public function socials()
{
$socials = Social::all();
return view('inc.subheader')->with('socials', $socials);
}
Here's blade snippent:
<div class="col-md-3 justify-content-center social-links">
<ul class="nav d-flex justify-content-center">
#foreach ($socials as $social)
<li class="">
<i class="{{ $social->icon }} fa-2x"></i>
</li>
#endforeach
</ul>
</div>
The error I'm getting is "$socials is undefined" and when I go on localhost/inc/social I only see three dots and no icons with links.
Change this line:
return view('inc.subheader')->with('socials', $socials);
to this:
return view('inc.subheader', compact('socials'));
You can try all combination :
return view('inc.subheader', compact('socials'));
return view('inc.subheader', [ 'socials'=> $socials]);

Using Plates in PHP

I'm new to using Plates template library for PHP. I have a few questions about how to use it.
I'm looking through the docs I don't see a way to set a global layout. Is there not a way to do that?
I'm using it inside of Codeigniter. Ideally, I'd like to set the layout in the MY_Controller file for most of the site and change when needed in a controller extending MY_Controller; for instance, setting the main site layout and then for the admin panel setting the admin layout in the Auth_Controller that all of the other admin controllers extend.
Changing the layout of a particular set of templates I'd have to go through and edit all of those files. This doesn't seem ideal. Or even just passing a sidebar data for a particular layout has to be done by passing the sidebar data to each template and from each template to the layout in every file. This seems very redundant. Am I missing something?
To clarify Plates is the template system/library, http://platesphp.com/
Example of what I'm talking about.
The admin layout has a sidebar of all the admin URLs. This comes from a config file that's loaded and it has it's own template/view file.
I call the template and pass the data from the controller
// I created a library file that extends the Plates library so it can be easily loaded from the CI loader class
$data['sidebar_data'] = array(
'navigation'=>'Navigation',
'assets'=>'Assets',
'config'=>'Config'
);
$data['controller_name'] => 'Users';
$this->plates->render('admin/whatever_page', $data);
Inside of the template file/current page
<?php $this->layout('layouts/admin', ['title' => $controller_name, 'sidebar_data' => $sidebar_data])
// stuff for this page
?>
Inside of the sidebar navigation template that gets loaded in the admin layout file
<ul class="menu vertical">
<?php foreach($sidebar_data as $url => $label):?>
<li>
<?= $label ?>
</li>
<?php endforeach; ?>
</ul>
Then the layout
// there's a HEAD method in here that has the $title variable
<header class="row expanded collapse">
<div class="column">
<div class="top-bar">
<div class="top-bar-left">
<ul class="menu">
<li>
<strong>Site Name</strong>
</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu dropdown align-right" data-dropdown-menu>
<li>
<?= $current_user ?></a>
</li>
<li class="divider"> | </li>
<li>
<?= $this->insert('auth/logout_form') ?>
</li>
</ul>
</div>
</div>
</div>
</header>
<section id="content">
<div class="left-panel">
<?= $this->insert('adminnav', ['sidebar_data' => $sidebar_data])?>
</div>
<div class="main-panel">
<?= $this->section('content')?>
</div>
</section>
<div id="adminmodal" class="reveal" data-reveal>
<button class="close-button" type="button" data-close aria-label="Close modal">
<span aria-hidden="true">×</span>
</button>
<div class="modal-body"></div>
</div>
<script type="text/javascript">$(document).foundation()</script>
<?= $this->insert('_blocks/googleanalytics')?>
Having to pass the same data from every controller method to the controller's view/template then from that to the layout/other templates is very redundant.
Convert the array to json
for example:
$this->plates->render('admin/whatever_page', ["data" => json_encode($data)]);

correct tab is not open when page is loaded

I am using codeigniter to make a web application, When the user registers with invalid credentials I am trying to reload my registration tab which is located on my authentication view, when the authentication view reloads my log in tab is displayed first because by default this is set to the active tab.
authentication view
<div class="row">
<div class="medium-12 columns">
<ul class="tabs" data-tabs id="authentication_tab">
<li class="tabs-title is-active">Login</li>
<li class="tabs-title">Sign Up</li>
</ul>
<div class="tabs-content" data-tabs-content="authentication_tab">
<div class="tabs-panel is-active" id="panel1">
<?php $this->load->view('authentication/login');?>
</div>
<div class="tabs-panel" id="panel2">
<?php $this->load->view('authentication/reg');?>
</div>
</div>
</div>
</div>
<?php $this->load->view('templates/footer');?>
loading my authentication view after validation has taken place
public function reg()
{
$data['title'] = 'Home Page';
$this->load->view('templates/header',$data);
$this->load->view('authentication/authentication#panel2');
}
In whatever controller you are using just decide (depending on the actions taken) which tab you want opened. Let us say the tab you want is 'thisOne', then pass a variable to your view, something like $open_tab='thisOne'.
In your view, before each tab, simply check the variable to see if it equals the current tab, and then set a class.
Use this:
<?php echo ('name_of_tab' == $open_tab) ? 'is_active' : ''; ?>
In your tab LI
<li class="tabs-title <?php echo ('name_of_tab' == $open_tab) ? 'is_active' : ''; ?>">Blah Blah</li>
In your controller you can set the default tab first, then overide that depending on users posts or actions etc.
Hope that helps,
Paul.

Categories