Skip to content

Instantly share code, notes, and snippets.

@garbinmarcelo
Created January 25, 2020 13:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save garbinmarcelo/7ad3b79c50a7da0d1aabbc608eeb45f7 to your computer and use it in GitHub Desktop.
Save garbinmarcelo/7ad3b79c50a7da0d1aabbc608eeb45f7 to your computer and use it in GitHub Desktop.
Bootstrap Tabs: I usually use 4 tabs, Records, Deleted, Files and Upload Files. So when I'm in the Send Files Tab and do the upload and click on the Files tab, this page is reloaded to show the listing (because I'm not using ajax on this listing), but it works fine, if you don't send files, the page is not reloaded when clicked on the Files tab.
// https://getbootstrap.com/docs/4.0/components/navs/#tabshow
$(document).ready(function(){
if($('#tabsCRUD').length > 0){
let urlAnterior = (localStorage.getItem('url_anterior') != null)? helpers.getPathFromUrl(localStorage.getItem('url_anterior')) : null;
let urlAtual = helpers.getPathFromUrl(ATUAL_URL);
let tabCookie = Cookies.get('tab_crud');
let activeTab = localStorage.getItem('activeTab');
let btnSubmit = $('.kt-form__actions');
// Verifica se possui cookie (vindo do controller)
if(tabCookie){
activeTab = tabCookie;
// remove cookie
Cookies.remove('tab_crud');
}
// Define no localstorage a tab quando clicado
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
let activeTab = $(e.target).attr('href'); // newly activated tab
let oldTab = $(e.relatedTarget).attr('href'); // previous active tab
let filesUpdated = localStorage.getItem('filesUpdated') || false;
// Verifica se saiu da tab upload
checkTabUpload(activeTab, btnSubmit);
// define activeTab
localStorage.setItem('activeTab', activeTab);
// Se URL for diferente atualiza url_anterior
if(urlAtual !== urlAnterior){
localStorage.setItem('url_anterior', urlAtual);
}
// Se a tab selecionada for #tabImagens e a anterior for
// #tabUpload e estiver como filesUpdated = true da refresh na página
if((activeTab === '#tabImagens' && oldTab === '#tabUpload') && filesUpdated === 'true'){
KTApp.blockPage({
overlayColor: '#000000',
type: 'v2',
state: 'success',
message: 'Aguarde...'
});
// set false localstorage filesUpdated
localStorage.setItem('filesUpdated', false);
location.reload();
}
});
// Checa se activeTab foi setado
// Caso contrário define a tab 1 como aberta
if((activeTab && urlAtual === urlAnterior) || tabCookie){
$('#tabsCRUD a[href="' + activeTab + '"]').tab('show');
}else{
$('#tabsCRUD li a').first().tab('show');
}
checkTabUpload(activeTab, btnSubmit);
}
});
function checkTabUpload(activeTab, btnSubmit){
// Verifica se a tab ativa possui form
if($("form", $(activeTab)).length > 0){
// Pega o id do form e passa para o btnSubmit
let idForm = $("form", $(activeTab)).attr('id');
btnSubmit.find(':submit').attr('form', idForm);
}
// Verifica para ocultar/desocultar o btnSubmit
if(activeTab === '#tabUpload' && !btnSubmit.hasClass('d-none')){
$('.kt-form__actions').addClass('d-none');
}else if(activeTab !== '#tabUpload' && btnSubmit.hasClass('d-none')){
$('.kt-form__actions').removeClass('d-none');
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment