Tabs com evento click

Labroskas · Julho 23, 2014

Boas, tenho este código, e tou com alguma dificuldade em entender bem como vou fazer, Eu quando entro na página tenho três Tab's onde são executados X comandos, mas só queria que esse código fosse executado ao fazer o click no Tab correspondente, espero ter conseguido explicar bem a minha ideia/problema.

Cumps.

 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Tabs - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script language="javascript" type="text/javascript">
$(document).ready(
 function(){
 $("#tabs").tabs();
 $("a[href=#tabs-1]").click(function()
  {
alert("Tab 1 Selected"); 
});
 $("a[href=#tabs-2]").click(function()
   {
alert("Tab 2 Selected"); 
});
 $("a[href=#tabs-3]").click(function()
   {
alert("Tab 3 Selected"); 
});
 
}
);
  </script>
</head>
<body>
    <div id="tabs">
      <ul>
        <li><a href="#tabs-1">Clientes</a></li>
        <li><a href="#tabs-2">Fornecedores</a></li>
        <li><a href="#tabs-3">Produtos</a></li>
      </ul>
      <div id="tabs-1">
        <!-- Aqui quero que execute um SELECT e Um UPDATE, Mas apenas quando fizer o Click no Tab-->
      </div>
      <div id="tabs-2">
        <!-- Aqui quero que execute um SELECT e Um UPDATE, Mas apenas quando fizer o Click no Tab-->
      </div>
      <div id="tabs-3">
        <!-- Aqui quero que execute um INSERT, Mas apenas quando fizer o Click no Tab-->
      </div>
    </div>
</body>
</html>

Markus Magnus · Julho 23, 2014

Primeiro você tem que decidir se quer atualizar a página ao clicar em cada tab ou não.

Se quiser você pode simplesmente enviar parâmetros via GET e fazer alguns if no código.

<!DOCTYPE HTML>
<html lang="pt-BR">
<head>
</head>
<body>
    <div id="tabs">
      <ul>
        <li><a href="?tabs-1">Clientes</a></li>
        <li><a href="?tabs-2">Fornecedores</a></li>
        <li><a href="?tabs-3">Produtos</a></li>
      </ul>
      <div id="tabs-1">
      <?php
      	if (isset($_GET['tabs-1'])) {
        	<!-- Aqui quero que execute um SELECT e Um UPDATE, Mas apenas quando fizer o Click no Tab-->
      	}
      ?>
      </div>
      <div id="tabs-2">
      <?php
      	if (isset($_GET['tabs-2'])) {
        <!-- Aqui quero que execute um SELECT e Um UPDATE, Mas apenas quando fizer o Click no Tab-->
      	}
      ?>
      </div>
      <div id="tabs-3">
      <?php
      	if (isset($_GET['tabs-3'])) {
        <!-- Aqui quero que execute um INSERT, Mas apenas quando fizer o Click no Tab-->
      	}
      ?>
      </div>
    </div>
</body>
</html>

Caso não queira terá que fazer requisições em AJAX que nada mais são do que requisições feitas por JavaScript para o servidor podendo executar dessa forma um script Server-Side (PHP, ASP, Pearl, Python, ...). É legal aprender AJAX deixa seus sistemas muito mais dinâmicos e intuitivos, mas não faz nada que links e formulários não façam.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script language="javascript" type="text/javascript">
	$("a[href=#tabs-1]").click(function() {
		$.get('tabs1.php', function(data){
			$('#tabs-1').html(data);
		});
	});
	$("a[href=#tabs-2]").click(function() {
		$.get('tabs2.php', function(data){
			$('#tabs-2').html(data);
		});
	});
	$("a[href=#tabs-3]").click(function() {
		$.get('tabs2.php', function(data){
			$('#tabs-2').html(data);
		});
	});
  </script>
</head>
<body>
    <div id="tabs">
      <ul>
        <li><a href="#tabs-1">Clientes</a></li>
        <li><a href="#tabs-2">Fornecedores</a></li>
        <li><a href="#tabs-3">Produtos</a></li>
      </ul>
      <div id="tabs-1">
        <!-- Aqui quero que execute um SELECT e Um UPDATE, Mas apenas quando fizer o Click no Tab-->
      </div>
      <div id="tabs-2">
        <!-- Aqui quero que execute um SELECT e Um UPDATE, Mas apenas quando fizer o Click no Tab-->
      </div>
      <div id="tabs-3">
        <!-- Aqui quero que execute um INSERT, Mas apenas quando fizer o Click no Tab-->
      </div>
    </div>
</body>
</html>

Labroskas · Julho 24, 2014

Obrigado pela sua resposta, funcionou lindamente sem AJAX, o primeiro código ficou porreiro.

Cumprimentos e muito obrigado mais uma vez.

Entrar

Tabs com evento click

Pergunta

Labroskas

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

Markus Magnus

Link para o comentário

Compartilhar em outros sites

Labroskas

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades