CODEWITHSUNDEEP
phplaravel
Onyx
Onyx

Reputation: 5772

Changing only part of a page on click of a <a> element using Laravel?

I'm trying to make my /admin page look cleaner by separating the functionality in tabs.

Now I'm trying to find out the best way to do it. My first thought was to just use CSS to create tabs and separate the functionality in those tabs, however, this way I make requests to my back-end even when I'm not using a certain functionality.

Now I assume I can create 2 partials tags.blade.php and images.blade.php which will contain the code. Then I'd make the <a> add a parameter to the URL and based on the parameter, the back-end will decide which partial to display in my <div class="admin-content-column">. I guess something similar to adding filters. Am I on the right track here?

Also can this be made even better by using AJAX calls so the page doesn't even refresh?

This is the structure of my admin.blade.php. The content in <div class="admin-content-column"> is supposed to be dynamically added based on which URL in <div class="admin-menu-column"> has the admin clicked.

<div class="admin-flexbox">

    <div class="admin-menu-column">
        <div class="admin-menu-container">
            <ul class='admin-menu-ul'>
                <a href='#'><li><i class="fas fa-tags"></i> Tags</li></a>
                <a href='#'><li><i class="fas fa-users"></i> Images</li></a>
            </ul>
        </div>
    </div>

    <div class="admin-content-column">

    </div>

</div>


*, *:after, *:before {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
}
a {
    color: #f1f1f1;
}
html {
    font-size: 16px;
}
.admin-flexbox {
    display: flex;
}
.admin-menu-column {
    flex: 1;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 250px;
    height: 1000px;
}
.admin-menu-container {
    background-color: #151719;
}
.admin-menu-ul li {
    display: block;
    padding: 15px 20px 15px 20px;
}
.admin-content-column {
    flex: 1;
    background-color: gray;
    height: 300px;
}
<div class="admin-flexbox">

    <div class="admin-menu-column">
        <div class="admin-menu-container">
            <ul class='admin-menu-ul'>
                <a href='#'><li><i class="fas fa-tags"></i> Tags</li></a>
                <a href='#'><li><i class="fas fa-users"></i> Users</li></a>
            </ul>
        </div>
    </div>

    <div class="admin-content-column">

    </div>

</div>

Upvotes: 0

Views: 421

Answers (1)

Smit Vora
Smit Vora

Reputation: 470

You have to create dynamic html and append it to class "admin-content-column". or you have to create two routes for two different pages, 1) Tags 2) Users

Upvotes: 1

Related Questions