trjhtr

I'm writing my own MVC framework for learning purposes. Usually in my projects I like to use AJAX to send requests and retrive data. Now my doubt is if this can be a best approach to make a one page dashboard.

I've created an .htaccess who will display only folders that have an index file inside, the dashboard will be loaded only after user login, the login form is on the index file who is inside a folder named user. On the root of the project there is another index file who will be publicy available.

Assuming I've this code in the user dashboard file:

HTML

<div class="container-fluid" id="app">

 <div class="row">

 <div class="col-sm-12 col-lg-4">

 <a href="#" id="open-settings">
 <div class="card">
 <div class="card-body">
 <div class="card-img-top text-center">
 <i class="fas fa-cog fa-3x"></i>
 </div>
 <h5 class="card-title text-uppercase text-center">settings</h5>
 </div> 
 </div>
 </a> 
 </div>

 <div class="col-sm-12 col-lg-4">
 <a href="#">
 <div class="card">
 <div class="card-body">
 <div class="card-img-top text-center">
 <i class="fas fa-database fa-3x"></i>
 </div>
 <h5 class="card-title text-uppercase text-center">show database entry</h5>
 </div> 
 </div>
 </a> 
 </div>

 <div class="col-sm-12 col-lg-4">
 <a href="#">
 <div class="card">
 <div class="card-body">
 <div class="card-img-top text-center">
 <i class="fas fa-plus fa-3x"></i>
 </div>
 <h5 class="card-title text-uppercase text-center">new insert</h5>
 </div> 
 </div>
 </a> 
 </div>
 </div>
<div class="row" id="display-view"></div>
</div> <!-- container end -->

What is the best approach to load the requested view for the user selected action?
I want to avoid duplication of the jquery code who now is something like this

$('#open-settings').on('click',function(e){
 e.preventDefault();
 preloader.modal('show');
 $.ajax(
 type: 'GET', 
 url: 'view/settings.php',
 cache: false,
 beforeSend: function()
 preloader.modal('show'); 
 ,
 success: function(response)
 $('#display-view').html(response) 
 
 );

Without really knowing a great deal about how your code is structured and basing it purely on your ajax function you could so somethhing like this;

function loadView(url, beforeSend, callback) 
 $.ajax(
 type: 'GET',
 url: url,
 cache: false,
 beforeSend: function()
 beforeSend();
 ,
 success: function(response)
 callback(response);
 
 );

You could then use it like this

var showPreLoaderModal = function() 
 preloader.modal('show');


loadView("view/settings.php", showPreLoaderModal, function(response)
 $('#display-view').html(response)
);

But this is dirty the modern approach would involve promises!