Olá amigos boa noite, tudo bem com vocês?
Então eu estou tentando criar uma forma de salvar as personalizações que cada usuário fará no seu dashboard, neste caso as cores que ele quer para o head e o sidebar, simplesmente são classes. Eu consegui fazer pesquisando em vários lugares usando AJAX, consigo salvar as informações no banco, porém... quando clica em salvar está fazendo o reload da página, mas como é para ser AJAX não era para fazer isso, queria que permaneça na página.
Segue o JS
$(document).ready(function (){
$("#salvar").click(function (){
var form = new FormData($("#formulario")[0]);
$.ajax({
url: 'salvar.php',
type: 'post',
dataType: 'json',
cache: false,
processData: false,
contentType: false,
data: form,
timeout: 8000,
success: function(resultado){
$("#resposta").html(resultado);
}
});
});
});
Segue agora o HTML (só uma parte porquê é extenso)
<form id="formulario">
<div class="theme-settings__inner">
<div class="scrollbar-container">
<div class="theme-settings__options-wrapper">
<h3 class="themeoptions-heading">
<div>
Opções do Cabeçalho
</div>
<button type="button" class="btn-pill btn-shadow btn-wide ml-auto btn btn-focus btn-sm switch-header-cs-class" data-class="">
Restaurar Padrões
</button>
</h3>
<div class="p-3">
<ul class="list-group">
<li class="list-group-item">
<h5 class="pb-2">Escolha uma cor
</h5>
<div class="theme-settings-swatches">
<label class="<?php
$optcolortop = $dados['optcolortop'];
if($optcolortop == 'app-header header-shadow bg-primary header-text-light')
{$coloractive = 'swatch-holder bg-primary switch-header-cs-class active';}
else{
$coloractive = 'swatch-holder bg-primary switch-header-cs-class';
}
echo $coloractive ?>" data-class="bg-primary header-text-light" for="bgtp1"></label>
<input type="radio" class="radionone" name="optcolortop" id="bgtp1" value="app-header header-shadow bg-primary header-text-light">
<label class="<?php
$optcolortop = $dados['optcolortop'];
if($optcolortop == 'app-header header-shadow bg-secondary header-text-light')
{$coloractive = 'swatch-holder bg-secondary switch-header-cs-class active';}
else{
$coloractive = 'swatch-holder bg-secondary switch-header-cs-class';
}
echo $coloractive ?>" data-class="bg-secondary header-text-light" for="bgtp2"></label>
<input type="radio" class="radionone" name="optcolortop" id="bgtp2" value="app-header header-shadow bg-secondary header-text-light">
<button type="submit" class="btn-wide btn btn-success spaceone" name="salvar" value="Salvar" id="salvar">Salvar</button><p id="resposta"></p>
</div>
</div>
</div>
</div> <!--Fim da configuração do tema-->
</form>
Veja no youtube o video que postei relatando o problema, a div que abre as cores deve permanecer após o clique de salvar, e sem fazer o refresh da página
https://youtu.be/Hp6SFLoi8fM