0
Guys, I wonder if you can help me?
I have a problem that only occurs when I play the code on the server, JS is accusing that my variable is already declared but the same is not.
VM1051:1 Uncaught SyntaxError: Identifier 'app' has already been declared
at <anonymous>:1:1
at p (jquery-3.1.1.min.js:2)
at Function.globalEval (jquery-3.1.1.min.js:2)
at text script (jquery-3.1.1.min.js:4)
at Nb (jquery-3.1.1.min.js:4)
at A (jquery-3.1.1.min.js:4)
at XMLHttpRequest.<anonymous> (jquery-3.1.1.min.js:4)
at Object.send (jquery-3.1.1.min.js:4)
at Function.ajax (jquery-3.1.1.min.js:4)
at Function.r._evalUrl (jquery-3.1.1.min.js:4)
VM1051:1 Uncaught SyntaxError: Identifier 'req' has already been declared
at <anonymous>:1:1
at p (jquery-3.1.1.min.js:2)
at Function.globalEval (jquery-3.1.1.min.js:2)
at text script (jquery-3.1.1.min.js:4)
at Nb (jquery-3.1.1.min.js:4)
at A (jquery-3.1.1.min.js:4)
at XMLHttpRequest.<anonymous> (jquery-3.1.1.min.js:4)
at Object.send (jquery-3.1.1.min.js:4)
at Function.ajax (jquery-3.1.1.min.js:4)
at Function.r._evalUrl (jquery-3.1.1.min.js:4)
VM1056:1 Uncaught SyntaxError: Identifier 'urlUploads' has already been declared
at <anonymous>:1:1
at p (jquery-3.1.1.min.js:2)
at Function.globalEval (jquery-3.1.1.min.js:2)
at text script (jquery-3.1.1.min.js:4)
at Nb (jquery-3.1.1.min.js:4)
at A (jquery-3.1.1.min.js:4)
at XMLHttpRequest.<anonymous> (jquery-3.1.1.min.js:4)
at Object.send (jquery-3.1.1.min.js:4)
at Function.ajax (jquery-3.1.1.min.js:4)
at Function.r._evalUrl (jquery-3.1.1.min.js:4)
The variable urlUploads is only used in my index.html
The req variable is being used in my file functions.js
The app variable is an instance of the class that is within the file funcoes.js
Does anyone have an idea of the error pq? If you want to inspect element follow the link : link
Follows the code
index.html
<!DOCTYPE html>
<html lang="pt">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title></title>
<meta charset="UTF-8">
<script>
const urlUploads = 'http://localhost:8000/uploads/imagens/';
const urlWs = "http://localhost:8000/api/v1/";
const urlWsAdmin = urlWs + "admin/";
const urlWsCliente = urlWs + "cliente/";
const urlAtual = window.location.href;
const urlFront = window.location.origin;
</script>
<base href='/'>
<link rel="stylesheet" href="dist/css/bootstrap.css">
<link rel="stylesheet" href="dist/css/animate.css">
<link rel="stylesheet" href="dist/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="dist/lib/alert/sweetalert2.min.css">
<link rel="stylesheet" href="dist/lib/datatable/datables.min.css">
</head>
<body>
<script src="dist/js/jquery-3.1.1.min.js"></script>
<!--<script src="http://js.whentoday.com.br/funcoes.v1.js"></script>-->
<script src="dist/js/funcoes.ecomm.v1.js "></script>
<script src="dist/js/bootstrap.min.js"></script>
<script src="dist/lib/navigo.min.js"></script>
<script src="dist/lib/alert/sweetalert2.min.js"></script>
<script src="dist/lib/datatable/datables.min.js"></script>
<script src="./rotas.js"></script>
</body>
</html>
functionscomm.e.v1.js
"use strict"; //ecma script
let req;
let query;
let interval;
function Whentoday() {
this.requisicaoAjax = function(event, callback) {
//verbo GET,POST, PUT, DELETE
let verbo = event.verbo === undefined ? 'GET' : event.verbo;
//url string
let url = event.url === undefined ? alert("Passar url") : event.url;
//json caso seja POST e PUT
let json = event.json;
//elemento carregarregando, caso n seja passado nada automaticamente atribui ao body
let elementoCarregando = event.elementoCarregando === undefined ? 'body' : event.elementoCarregando;
//Mensagem carregando, caso n seja passado atribui false
let mensagemCarregando = event.mensagemCarregando === undefined ? false : event.mensagemCarregando;
//se mensagemSucesso ou mensagemErro não for passado z
let mensagemSucesso = event.mensagemSucesso === undefined ? false : event.mensagemSucesso;
let mensagemErro = event.mensagemErro === undefined ? false : event.mensagemErro;
let timeout = event.timeout === undefined ? 100000 : event.timeout;
let $this = this;
verbo = verbo.toUpperCase();
let jsonFinal = event.json;
if (verbo !== 'GET') {
if (verbo !== 'DELETE') {
if (jsonFinal === undefined) {
alert("Para requisições sem ser GET ou DELETE é necessario enviar data/json");
return;
}
}
}
let self = this;
let requisicao = $.ajax({
async: true,
type: verbo,
dataType: 'json',
contentType: 'application/json',
url: url,
crossDomain: true,
cache: false,
timeout: timeout,
data: JSON.stringify(json),
headers: {
'apikey_admin' : localStorage.getItem('apikey_admin'),
'apikey_cliente' : localStorage.getItem('apikey_cliente')
},
beforeSend : function() {
if (mensagemCarregando != false) {
self.mostrarCarregando(elementoCarregando, mensagemCarregando);
$(elementoCarregando).css({ "overflow": "initial" });
}
}
});
let resultadoReq = new Array();
requisicao.done(function (data) {
var separar = elementoCarregando.split(',');
for (var i = 0; i < separar.length; i++) {
$("[data-elemento-loading='" + separar[i] + "']").remove();
}
if (mensagemSucesso == false) {
} else if (mensagemSucesso == true)
{
$this.mensagemSucesso(data['mensagem']);
} else
{
$this.mensagemSucesso(mensagemSucesso);
}
requisicao['resultado'] = data;
});
requisicao.fail(function (xhr) {
var separar = elementoCarregando.split(',');
for (var i = 0; i < separar.length; i++) {
separar[i] = separar[i].replace(',', '');
if (separar[i] === "body")
{
separar[i] === '#conteudo';
}
$("[data-elemento-loading='" + separar[i] + "']").remove();
}
switch (xhr['status']) {
case 500:
$this.mensagemErro('Ocorreu algum erro no servidor, por favor tente novamente ou recarregue a página');
break;
case 403:
setTimeout(function () {
localStorage.removeItem('apikey_admin');
localStorage.removeItem('apikey_cliente');
window.history.go(-1);
}, 1000);
default:
if (mensagemErro == false) {
} else if (mensagemErro == true)
{
if(xhr != undefined) {
if(xhr['responseJSON'] != undefined)
{
var vetorErros = xhr['responseJSON']['Erros'];
if (vetorErros != undefined) {
let mensagem = '';
for (let erros in vetorErros) {
for (let erros1 in vetorErros[erros]) {
mensagem = vetorErros[erros][erros1] + '<br>' + mensagem;
}
}
$this.mensagemErro(mensagem);
return;
}
if (xhr['responseJSON'] != undefined) {
$this.mensagemErro(xhr['responseJSON']['mensagem']);
} else {
$this.mensagemErro('Ocorreu algum erro no servidor.');
}
for (var i = 0; i < separar.length; i++) {
$("[data-elemento-loading='" + separar[i] + "']").remove();
}
}
else
{
$this.mensagemErro('Ocorreu algum erro no servidor.');
}
}
else
{
$this.mensagemErro('Ocorreu algum erro no servidor.');
}
} else
{
$this.mensagemErro(mensagemErro);
}
}
requisicao['resultado'] = xhr;
});
if(callback != undefined)
{
callback(requisicao);
}
},
this.mensagemErro = function (mensagem) {
sweetAlert("Oops...", mensagem, "error");
},
this.mensagemSucesso = function (mensagem) {
sweetAlert("OK!", mensagem, "success");
},
this.mostrarCarregando= function(elemento, mensagem) {
$(elemento).css({ 'position': 'relative', 'min-height': '100%;' });
$(elemento).append(
'<div class="loading" data-elemento-loading="' + elemento + '">' +
'<div class="loader"></div>' +
'<div data-mensagem="true" class="textoCarregando">' + mensagem + '</div>' +
'</div>'
);
if (elemento === 'body') {
$('[data-elemento-loading="' + elemento + '"]').css("position", "fixed");
}
$(elemento).css("overflow", "hidden");
},
this.removerCarregando= function (elemento) {
$("[data-elemento-loading='" + elemento + "']").remove();
$(elemento).css({ "overflow": "initial" });
},
this.carregarComponente = function(event, callback = false) {
let url = event.url;
let id = event.id == undefined ? 'pages' : event.id;
let protegido = event.protegido == undefined ? true : event.protegido;
let tipo = event.tipo == undefined ? 'admin' : 'cliente';
let masterPage = null;
if(tipo == 'admin')
{
masterPage = '/componentes/admin/master-page.html';
}
if(tipo == 'cliente')
{
masterPage = '/componentes/cliente/master-page.html'
}
if(masterPage == null)
{
alert('Tipo apenas admin ou cliente.');
return;
}
query = event.query;
if(!protegido)
{
$( "body" ).load(masterPage, function () {
$( "#"+id ).load(url);
});
}
else {
let apikeyAdmin = localStorage.getItem('apikey_admin');
let apikeyCliente = localStorage.getItem('apikey_cliente');
if(tipo == 'admin')
{
if(apikeyAdmin == '' || apikeyAdmin == undefined || apikeyAdmin == null){
window.location.href = './admin/login';
return;
}
}
if(tipo == 'cliente')
{
if(apikeyCliente == '' || apikeyCliente == undefined || apikeyCliente == null){
window.location.href = '. /login';
return;
}
}
$( "body" ).load(masterPage, function () {
$( "#"+id ).load(url);
});
}
if(callback != false)
{
callback();
}
},
this.carregarHtml = function(event, callback = false) {
let url = event.url;
let id = event.id == undefined ? 'pages' : event.id;
let protegido = event.protegido == undefined ? false : event.protegido;
if(!protegido) {
$("body").load(url);
}
else
{
let apikey = localStorage.getItem('apikey');
if(apikey == '' || apikey == undefined || apikey == null){
window.location.href = './login';
}
$("body").load(url);
}
if(callback != false)
{
callback();
}
},
this.montarBreadcrumb = function(titulo, event){
setTimeout(function () {
var caminho = event;
$('#breadcrumb').prepend('<ol class="breadcrumb"></ol>');
$('#breadcrumb').prepend('<h2>'+titulo+'</h2>');
for(let i in caminho){
let dados = caminho[i];
let urlBoolean = dados[0];
let tituloUrl = dados[1];
let url = dados[2];
if(urlBoolean == true)
{
$('#breadcrumb .breadcrumb').append(
"<li>"+
"<a href='"+url+"'>"+tituloUrl+"</a>"+
"</li>"
);
}
else{
$('#breadcrumb .breadcrumb').append(
"<li>"+
"<a>"+tituloUrl+"</a>"+
"</li>"
);
}
}
}, 100);
},
this.getPayloadJwt = function (item = 'apikey_admin') {
var token = localStorage.getItem(item);
if(token != undefined)
{
let base64Url = token.split('.')[1];
let base64 = base64Url.replace('-', '+').replace('_', '/');
return JSON.parse(window.atob(base64));
}
},
this.montarMenu = function (event) {
//montando o menu
for(let i in event['menu'])
{
let menu = event['menu'][i];
let nome = menu['nomeFront'];
let url = menu['urlFront'];
let icon = menu['icone'] == undefined ? '' : menu['icone'];
$('#side-menu').append(
'<li data-idMenu="'+i+'">' +
' <a href="'+url+'">'+icon+' <span class="nav-label">'+nome+'</span> <span class="fa arrow"></span></a>'+
'</li>'
);
}
//montando submenu
for(let i in event['submenu'])
{
let submenu = event['submenu'][i];
let nome = submenu['nome'];
let url = submenu['url'];
let icon = submenu['icon'] == undefined ? '' : submenu['icon'];
let idMenu = submenu['idMenu'];
$('#side-menu [data-idMenu="'+idMenu+'"]').append(
'<ul class="nav nav-second-level collapse">' +
'<li><a href="'+url+'">'+icon+nome+'</a></li>' +
'</ul>'
);
}
},
this.formJson = function (elemento) {
var loginForm = $(elemento).serializeArray();
var loginFormObject = {};
$.each(
loginForm,
function(i, v) {
if(v.value != '')
{
loginFormObject[v.name] = v.value;
}
}
);
return loginFormObject;
},
this.limparInputModal = function (elemento) {
$(elemento + ' input').each(function () {
$(this).val('');
})
}
};
js routes.
"use strict"; //ecma script
let app = new Whentoday();
let router = new Navigo(urlFront, false, '#!');
//rotas de admin
router.on({
'admin/login': (query) => {
app.carregarHtml({
'url' : './componentes/Admin/Login.html',
'query' : query
})
},
'admin': (query) => {
app.carregarComponente({
'url' : './componentes/Admin/Dashboard.html',
'query' : query
})
},
'admin/usuarios': (query) => {
app.carregarComponente({
'url' : './componentes/Admin/Usuarios.html',
'query' : query
}, function () {
app.montarBreadcrumb('Usuários',{
0 : [true, 'Home', './admin']
})
});
},
'admin/clientes': (query) => {
app.carregarComponente({
'url' : './componentes/Admin/Clientes.html',
'query' : query
}, function () {
app.montarBreadcrumb('Clientes',{
0 : [true, 'Home', './admin']
})
});
},
'admin/clientes/:id/enderecos': (query) => {
app.carregarComponente({
'url' : './componentes/Admin/EnderecoCliente.html',
'query' : query
}, function () {
app.montarBreadcrumb('Endereço Cliente',{
0 : [true, 'Home', './'],
1 : [true, 'Clientes', './admin/clientes'],
2 : [false, query.id, './admin/clientes']
})
});
},
'admin/clientes/:id/contatos': (query) => {
app.carregarComponente({
'url' : './componentes/Admin/ContatoCliente.html',
'query' : query
}, function () {
app.montarBreadcrumb('Contatos Cliente',{
0 : [true, 'Home', './'],
1 : [true, 'Clientes', './admin/clientes'],
2 : [false, query.id, './admin/clientes'],
3 : [false, 'Contatos', './admin/clientes'],
})
});
},
'admin/forma-pagamento': (query) => {
app.carregarComponente({
'url' : './componentes/Admin/formapgto.html',
'query' : query
}, function () {
app.montarBreadcrumb('Formas de Pagamento',{
0 : [true, 'Home', './']
})
});
},
'admin/menus': (query) => {
app.carregarComponente({
'url' : './componentes/Admin/Menus.html',
'query' : query
}, function () {
app.montarBreadcrumb('Menus',{
0 : [true, 'Home', './admin']
})
});
},
'admin/permissoes': (query) => {
app.carregarComponente({
'url' : './componentes/Admin/Permissoes.html',
'query' : query
}, function () {
app.montarBreadcrumb('Permissões',{
0 : [true, 'Home', './admin']
})
});
},
'admin/categoria': (query) => {
app.carregarComponente({
'url' : './componentes/Admin/Categoria.html',
'query' : query
}, function () {
app.montarBreadcrumb('Categorias',{
0 : [true, 'Home', './admin']
})
});
},
'admin/produtos': (query) => {
app.carregarComponente({
'url' : './componentes/Admin/Produto.html',
'query' : query
}, function () {
app.montarBreadcrumb('Produtos',{
0 : [true, 'Home', './admin'],
})
});
},
'admin/produtos/cadastrar': (query) => {
app.carregarComponente({
'url' : './componentes/Admin/Produto-cadastrar.html',
'query' : query
}, function () {
app.montarBreadcrumb('Cadastrar',{
0 : [true, 'Home', './admin'],
1 : [true, 'Produtos', './admin/produtos'],
2 : [false, 'Cadastrar', './admin/produtos']
})
});
},
'admin/produto/:id/editar': (query) => {
app.carregarComponente({
'url' : './componentes/Admin/Produto-editar.html',
'query' : query
}, function () {
app.montarBreadcrumb('Editar',{
0 : [true, 'Home', './admin'],
1 : [true, 'Produtos', './admin/produtos'],
2 : [false, query.id, './admin']
})
});
},
'admin/tabelas-preco': (query) => {
app.carregarComponente({
'url' : './componentes/Admin/Tabelas-preco.html',
'query' : query
}, function () {
app.montarBreadcrumb('Tabelas de preço',{
0 : [true, 'Home', './admin'],
})
});
},
'admin/tabelas-preco/:id': (query) => {
app.carregarComponente({
'url' : './componentes/Admin/Tabelas-preco-precos.html',
'query' : query
}, function () {
app.montarBreadcrumb('Produtos da tabela de preço',{
0 : [true, 'Home', './admin'],
1: [true, 'Tabelas de preço', 'admin/tabelas-preco'],
2 : [false, query.id, './admin']
})
});
},
'admin/estoque': (query) => {
app.carregarComponente({
'url' : './componentes/Admin/Estoque.html',
'query' : query
}, function () {
app.montarBreadcrumb('Estoque',{
0 : [true, 'Home', './admin'],
})
});
},
'admin/banners': (query) => {
app.carregarComponente({
'url' : './componentes/Admin/Banners.html',
'query' : query
}, function () {
app.montarBreadcrumb('Banners',{
0 : [true, 'Home', './admin'],
})
});
},
});
//rotas de cliente
router.on({
'login': (query) => {
app.carregarComponente({
'url' : './componentes/Cliente/Login.html',
'protegido' : false,
'query' : query,
'tipo' : 'cliente'
})
},
'produto/:nomeProduto': (query) => {
app.carregarComponente({
'url' : './componentes/Cliente/Produto.html',
'tipo' : 'cliente',
'protegido' : false,
'query' : query
}, function () {
app.montarBreadcrumb('Usuários',{
0 : [true, 'Home', './']
})
});
},
'produto/:nomeProduto/sem-login': (query) => {
app.carregarComponente({
'url' : './componentes/Cliente/Produto-semLogin.html',
'tipo' : 'cliente',
'protegido' : false,
'query' : query
}, function () {
app.montarBreadcrumb('Usuários',{
0 : [true, 'Home', './']
})
});
},
'checkout': (query) => {
app.carregarComponente({
'url': './componentes/Cliente/Checkout.html',
'tipo' : 'cliente',
'protegido' : false,
'query': query
}, function () {
app.montarBreadcrumb('Usuários', {
0: [true, 'Home', './']
})
});
},
'pedido': (query) => {
app.carregarComponente({
'url': './componentes/Cliente/Pedido.html',
'tipo' : 'cliente',
'protegido' : false,
'query': query
}, function () {
app.montarBreadcrumb('Usuários', {
0: [true, 'Home', './']
})
});
},
'categoria/*': (query) => {
app.carregarComponente({
'url': './componentes/Cliente/Categoria.html',
'tipo' : 'cliente',
'protegido' : false,
'query': query
}, function () {
app.montarBreadcrumb('Usuários', {
0: [true, 'Home', './']
})
});
}
});
// rota principal
router.on((query) => {
app.carregarComponente({
'url' : './componentes/Cliente/Home.html',
'tipo' : 'cliente',
'protegido' : false,
'query' : query
})
});
// pagina não encontrada
router.notFound((query) => {
app.carregarHtml({
'url' : './componentes/Erros/404.html',
'query' : query,
'protegido' : false
})
})
router.resolve();
// setInterval(function () {
// $('a[href="#slider-carousel"] [data-slide="next"]').trigger('click');
// console.log('c');
// }, 1000);
Abs, Nicolas Dezena
You could post your code so we can help you?
– usuario
My friend, I added the code! Thanks since.
– Nicolas Dezena
Whoa, you don’t work with import/export/require? It may be that he is identifying these variables in some script loaded on the page that is not his. It would be good for you to close every file on one closed scope.
– Ayrton Teshima
Is the problem not occurring because when loading another html that will compose the page the scripts are being re-imported?
– leonardosouza
Galera solved the problem with the help of a friend, I put a self executable function encapsulating the contents of the files.
– Nicolas Dezena