1
Hello.
I’m having a hard time getting every time the user clicks a different button on my form to run an Ajax. If I put Ajax out of mine $('button') it displays on the page perfectly, list all the stores worked perfectly as I put in the commented code, but when clicking on a Ubmit button it should change according to the button the data of my tables.
Follows the HTML
<html>
<head>
<link href="../libs/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css"/>
<link href="../libs/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<script src="../libs/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../libs/js/jquery-3.2.1.min.js" type="text/javascript"></script>
<link href="../libs/css/lojas/lojas.css" rel="stylesheet" type="text/css"/>
<script src="../libs/js/lojas/lojas-json.js" type="text/javascript"></script>
</head>
<body>
<!-- header -->
<header class="row">
<!-- div menu -->
<div class="col-md-12">
<form id="form_lojas" name="form_lojas" method="POST" class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Procurar...">
<button id="btn" type="button" class="btn form-control " aria-label="Alinhar na esquerda">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
<button id="btn" type="submit" class="form-control" aria-label="Alinhar na esquerda" >Atualizar</button>
<button id="btn" type="submit" class="form-control" name="rs" aria-label="Alinhar na esquerda">Rio Grande Do Sul</button>
<button id="btn" type="submit" class="form-control" name="sc" aria-label="Alinhar na esquerda">Santa Catarina</button>
<button id="btn" type="submit" class="form-control" name="pr" aria-label="Alinhar na esquerda">Paraná</button>
<button id="btn" type="submit" class="form-control" aria-label="Alinhar na esquerda">
Download Lojas
</button>
<button id="btn" type="submit" class="form-control" aria-label="Alinhar na esquerda">
Download Regionais
</button>
</div>
</form>
</div>
<!-- end menu -->
</header>
<!-- conteudo principal -->
<aside class="row">
<div class="container-fluid">
<div id="content-tables" class="col-md-10">
</div>
</div>
</aside>
<!-- rodapé-->
<footer class="row">
<div class="col-md-12">
</div>
</footer>
</body>
</html>
Follows the JS:
var url = "http://localhost/nossas_filiais2.0/app/controller/LojaController.php?get=";
$(document).ready(function() {
/* aki funciona se eu colocar a requisição ajax fora do $('button')
$.ajax({
url:url+'select_lojas',
method: "GET",
success: function (data) {
*/
$('button').click(function () {
var jacao = $(this).html();
switch (jacao) {
case 'Atualizar':
//nao fiz ainda
break;
case 'Rio Grande Do Sul':
option = url+'select_lojas_rs';
break;
case 'Santa Catarina':
option = url+'select_lojas_sc';
break;
case 'Paraná':
option = url+'select_lojas_pr';
break;
}
$.ajax({
url:option,
method: "GET",
success: function (data) {
for (var i = 0; i < data.length; i++) {
var tabela_loja = '';
//Tabela visualizada pelo usuario
tabela_loja += ' <table id="tabela-loja" class="table table-striped">';
tabela_loja += '<tr id="tr-menu">';
tabela_loja += '<th>';
tabela_loja += '<button id="btn-ver-mais">';
tabela_loja += '<span id="span" class="glyphicon glyphicon-plus"></span>';
tabela_loja += '</button>';
tabela_loja += '</th>';
tabela_loja += '<th> Filial: ' + data[i].loja + ' - ' + data[i].sigla + ' - ' + data[i].cidade + ' - ' + data[i].uf + ' </th>';
tabela_loja += '<th> Gerente: ' + data[i].gerente + '</th>';
tabela_loja += '<th> Fixo: (' + data[i].ddd + ')' + data[i].telefone + '</th>';
tabela_loja += '<th> Ramal: ' + data[i].codigo + '</th>';
tabela_loja += '<th> Celular: ' + data[i].celular + '</th>';
tabela_loja += '</tr>';
tabela_loja += '</table>';
//Tabela dropdown display:none por default
tabela_loja += '<table id="drop-table">';
tabela_loja += '<tr>';
tabela_loja += '<td>';
tabela_loja += '<img src="http://www.portal.qq/wp-content/uploads/imagens_lojas/' + data[i].loja + '.jpg"></br>';
tabela_loja += '<p id="rodape-img">';
tabela_loja += '</p>';
tabela_loja += '</td>';
tabela_loja += '<td>';
tabela_loja += '<table id="table-info" class="table table-striped">';
tabela_loja += '<tr>';
tabela_loja += '<td><b>Regiao:</b></td>';
tabela_loja += '<td>' + data[i].regiao + '</td>';
tabela_loja += '</tr>';
tabela_loja += '<tr>';
tabela_loja += '<td><b>Filial:</b></td>';
tabela_loja += '<td>' + data[i].loja + '</td>';
tabela_loja += '</tr>';
tabela_loja += '<tr>';
tabela_loja += '<td><b>Gerente:</b></td>';
tabela_loja += '<td>' + data[i].gerente + '</td>';
tabela_loja += '</tr>';
tabela_loja += '<tr>';
tabela_loja += '<td><b>Endereço:</></td>';
tabela_loja += '<td>' + data[i].endereco + '</td>';
tabela_loja += '</tr>';
tabela_loja += '<tr>';
tabela_loja += '<td><b>CEP:</b></td>';
tabela_loja += '<td>' + data[i].cep + '</td>';
tabela_loja += '</tr>';
tabela_loja += '<tr>';
tabela_loja += '<td><b>CNPJ:</b></td>';
tabela_loja += '<td>' + data[i].cnpj + '</td>';
tabela_loja += '</tr>';
tabela_loja += '<tr>';
tabela_loja += '<td><b>Inscrição Estadual:</b></td>';
tabela_loja += '<td>' + data[i].insc_estadual + '</td>';
tabela_loja += '</tr>';
tabela_loja += '<tr>';
tabela_loja += '<td><b>Inscrição Municipal:</b></td>';
tabela_loja += '<td>' + data[i].insc_municipal + '</td>';
tabela_loja += '</tr>';
tabela_loja += '<tr>';
tabela_loja += '<td><b>Telefone:</b></td>';
tabela_loja += '<td>' + '( ' + data[i].ddd + ' )' + data[i].telefone + '<b> Ramal: </b>' + data[i].codigo + '</td>';
tabela_loja += '</tr>';
tabela_loja += '<tr>';
tabela_loja += '<td><b>Celular da Loja:</b></td>';
tabela_loja += '<td>' + data[i].celular + '</td>';
tabela_loja += '</tr>';
tabela_loja += '<tr>';
tabela_loja += '<td><b>Celular do Gerente:</b></td>';
tabela_loja += '<td>' + data[i].celular_gerente + '</td>';
tabela_loja += '</tr>';
tabela_loja += '<tr>';
tabela_loja += '<td><b>Celular Corporativo:</b></td>';
tabela_loja += '<td>' + data[i].celular_corp + '</td>';
tabela_loja += '</tr>';
tabela_loja += '<tr>';
tabela_loja += '<td><b>Porte de Loja:</b></td>';
tabela_loja += '<td>' + data[i].tipo + '</td>';
tabela_loja += '</tr>';
tabela_loja += '<tr>';
tabela_loja += '<td><b>Data de Inauguração:</b></td>';
tabela_loja += '<td>' + data[i].data_inaug + '</td>';
tabela_loja += '</tr>';
tabela_loja += '<tr>';
tabela_loja += '<td><b>Horario de Funcionamento:</b></td>';
tabela_loja += '<td><b>Seg à Sex:</b>' + data[i].manha_segsex + ' - ' + data[i].tarde_segsex + ' <b>sab: </b>' + data[i].manha_sab + ' - ' + data[i].tarde_sab + '</td>';
tabela_loja += '</tr>';
tabela_loja += '</table>';
i++;
$('#content-tables').append(tabela_loja);
}
}
});
});
});
PHP file:
header('Content-type:application/json; charset=utf-8');
require '../model/Database.php';
require '../model/Loja.php';
class LojaController {
private $loja;
function __construct() {
$this->loja = new Loja();
//requisições get
if ($_GET['get']) {
switch ($_GET['get']) {
case 'select_lojas':
$this->select_lojas();
break;
case 'select_lojas_rs':
$this->select_lojas_rs();
break;
case 'select_lojas_sc':
$this->select_lojas_sc();
break;
case 'select_lojas_pr':
$this->select_lojas_pr();
break;
}
}
}
//lista todas as lojas
function select_lojas() {
$pdo = Database::conexao();
$stmt = $pdo->prepare('SELECT * FROM view_listar_lojas_completa');
$stmt->execute();
echo json_encode($result = $stmt->fetchAll(PDO::FETCH_OBJ));
}
//lista as filiais de RS
function select_lojas_rs() {
$pdo = Database::conexao();
$stmt = $pdo->prepare('SELECT * FROM view_listar_lojas_completa_rs');
$stmt->execute();
echo json_encode($result = $stmt->fetchAll(PDO::FETCH_OBJ));
}
//Lista filiais SC
function select_lojas_sc() {
$pdo = Database::conexao();
$stmt = $pdo->prepare('SELECT * FROM view_listar_lojas_completa_sc');
$stmt->execute();
echo json_encode($result = $stmt->fetchAll(PDO::FETCH_OBJ));
}
//Lista filiais PR
function select_lojas_pr() {
$pdo = Database::conexao();
$stmt = $pdo->prepare('SELECT * FROM view_listar_lojas_completa_pr');
$stmt->execute();
echo json_encode($result = $stmt->fetchAll(PDO::FETCH_OBJ));
}
}
new LojaController();
Initialize the option variable along with the url and make sure that its value gets to ajax using console.log(option);
– Wictor Chaves
As Wictor Chaves said, check the option variable, its initialization was not put in the code, I believe it is your main problem. It is probably as Undefined at the time of performing the ajax request.
– Luan G. C. Rodrigues