wbruno

Combobox dinâmico com cadastro AJAX

Cara, não é ‘algo comum’, mas achei interessante essa dúvida, e resolvi montar.
Em funcionamento:
http://www.wbruno.co…form-cidade.php

config.inc.php

<?php
header("Content-Type: text/html; charset=ISO-8859-1");
//Evitando cache de arquivo
header(‘Expires: Mon, 26 Jul 1997 05:00:00 GMT’);
header(‘Last Modified: ‘. gmdate(‘D, d M Y H:i:s’) .‘ GMT’);
header(‘Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0′);
header(‘Pragma: no-cache’);
header(‘Expires: 0′);
session_start();
///*
define(‘SERVIDOR’, ‘localhost’);
define(‘USUARIO’, ‘root’);
define(‘SENHA’, ‘123′);
define(‘BANCO’, ‘ajax’);
//*/

init.inc.php

<?php
define(‘BASE_PATH’, realpath(dirname(__FILE__)).‘/’);
if( !file_exists(BASE_PATH.‘config.inc.php’) )
exit(‘Erro config.php nao encontrado’);
else
require_once BASE_PATH.‘config.inc.php’;
class Db
{
private static $instancia;
private function __construct(){}
private static function conecta()
{
return new mysqli( SERVIDOR, USUARIO, SENHA, BANCO );
}
public static function pegaConexao()
{
if ( self::$instancia == null )
self::$instancia = self::conecta();
return self::$instancia;
}
}
function queryCidade( $where=null )
{
$mysqli = Db::pegaConexao();//pegando uma instância da conexão
$sql = "SELECT `id` AS `value`, `nome` AS `label` FROM `cidade` {$where}";
return $mysqli->query( $sql );
}
function comboCidade( $where=null )
{
$query = queryCidade( $where );
return montaSelect( $query );
}
function montaSelect( $query )
{
if( $query->num_rows )
while( $dados = $query->fetch_object() )
$opt .= ‘<option value="’.$dados->value.‘">’.$dados->label.‘</option>’."\n";
else
$opt = ‘<option value="0">Nenhum registro</option>’;
return $opt;
}
function cadastraCidade( $nome )
{
$nome = utf8_decode( $nome );
$mysqli = Db::pegaConexao();//pegando uma instância da conexão
$sql = "INSERT INTO `cidade`
(`id`, `nome`)
VALUES (NULL, ‘{$nome}’)";
return $mysqli->query( $sql );
}
function isPost()
{
if( $_SERVER[‘REQUEST_METHOD’] == ‘POST’ )
return true;
}
function getPost( $campo )
{
return isset( $_POST[$campo] ) ? filter( $_POST[$campo] ) : ”;
}
function getGet( $campo )
{
return isset( $_GET[$campo] ) ? filter( $_GET[$campo] ) : ”;
}
function filter( $var ){
if( !get_magic_quotes_gpc() )
//$str = mysql_real_escape_string( $var );
$str = addslashes( $var );
else
$str = $var;
$str = str_replace( ‘#’, ‘\#‘, $str );
return $str;
}
function jsonCidade( $id=null )
{
$where = ( $id ) ? " WHERE `id` = {$id} " : ”;
$where .= ‘ ORDER BY `nome`’;
$query = queryCidade( $where );
$json = ‘ [';
if( $query->num_rows > 0 )
while( $dados = $query->fetch_object() )
$json .= '{"nome":"'.$dados->label.'","id":"'.$dados->value.'"}, ';
else
$json .= '{"nome": "Não Encontrado"}';
$json .= ']‘;
return $json;
}
function existeCidade( $cidade )
{
$city = utf8_decode( $cidade );
$query = queryCidade( " WHERE nome = ‘{$city}’" );
if( $query->num_rows )
return $city.‘ já existe!’;
else
return cadastraCidade( $cidade );
}

retorno.php

<?php
include ‘init.inc.php’;
if( isset($_GET[‘param’]) )
{
echo jsonCidade( getGet(‘param’) );
}
if( getPost(‘cidade’) )
{
echo existeCidade( getPost(‘cidade’) );
}

form-cidade.php

<?php include ‘init.inc.php’; ?>
<html>
<head>
<title>Formulário de Cadastro</title>
<meta name="author" content="William Bruno" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a[rel*='popup']").click(function( e ){
e.preventDefault();
var param = $(this).attr(‘rel’).split(‘;’);
window.open( $(this).attr(‘href’), $(this).attr(‘href’), param[1] );
});
});
function carregarCombo( param, combo )
{
$("img[src='ico-loading.gif']").show();
$.getJSON(
‘retorno.php’,
{param: param},
function(data){
var option = new Array();
resetaCombo( combo );
$.each(data, function(i, obj){
option[i] = document.createElement(‘option’);
$( option[i] ).attr( {value : obj.id} );
$( option[i] ).append( obj.nome );
$("select[name='"+combo+"']").append( option[i] );
});
$("img[src='ico-loading.gif']").hide();
});
}
function resetaCombo( el )
{
$("select[name='"+el+"']").empty();
var option = document.createElement(‘option’);
$( option ).attr( {value : ‘0′} );
$( option ).append( ” );
$("select[name='"+el+"']").append( option );
}
</script>
</head>
<body>
<form action="" method="post">
<label>Cidade: <select name="cidade">
<option value=""></option>
<?php echo comboCidade(); ?>
</select></label>
<a href="cadastrar-cidade.php" rel="popup; width=300px, height=150px, top=150px, left=300px;">Cadastrar Cidade</a>
<img src="ico-loading.gif" alt="" style="display: none;" />
</form>
</body>
</html>

cadastrar-cidade.php

<?php
include ‘init.inc.php’;
$msg = null;
if( isPost() )
$msg = existeCidade( getPost(‘cidade’) ) ? ‘Cadastro efetuado’ : ‘Ocorreu um erro’;
?>
<html>
<head>
<title>Formulário de Cadastro</title>
<meta name="author" content="William Bruno" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a.voltar").hide();
$("input[name='fechar']").click(function(){
fechar_pop();
});
$("input[name='enviar']").click(function(){
$("img[src='ico-loading.gif']").show();
$( this ).attr({ disabled: ‘disabled’});
$("input[name='cidade']").attr({ disabled: ‘disabled’});
$.ajax({
type: ‘POST’,
url: ‘retorno.php’,
data: ‘cidade=’+$("input[name='cidade']").val(),
success: function( data ){
if( data!=1 )
{
$("input[name='enviar'], input[name='cidade']").attr({ disabled: ”});
$("input[name='cidade']").val(”);
$("input[name='cidade']").focus();
$(‘#retorno’).html( data );
}
else
fechar_pop();
},
complete: function( xhr, status ){
$("img[src='ico-loading.gif']").hide();
}
});
return false;
});
});
function fechar_pop()
{
window.close();
if ( window.opener && !window.opener.closed )
window.opener.carregarCombo( ”, ‘cidade’ );
}
window.onbeforeunload = fechar_pop;
</script>
</head>
<body>
<?php if( !$msg ){ ?>
<form action="" method="post">
<label>Cidade: <input type="text" name="cidade" /></label>
<label><input type="submit" name="enviar" value="Enviar" /></label>
<img src="ico-loading.gif" alt="" style="display: none;" />
<p id="retorno"></p>
</form>
<?php } else echo $msg; ?>
<a href="form-cidade.php" class="voltar">voltar</a>
</body>
</html>

ico-loading.gif

http://www.wbruno.co…ico-loading.gif

jquery-1.4.2.min.js
http://code.jquery.c…ry-1.4.2.min.js

Os códigos estão ai e funcionam.

abril 7th 2010 AJAX

Suggest AJAX – jQuery – php/Mysql

14 Comments »

Resolvi brincar um pouquinho aqui..

<html>
<head>
<title>Suggest</title>
<style type="text/css">
* {
        margin: 0;
        padding: 0;
        list-style: none;
        border: none;
}
form {
        width: 400px;
        margin: 0 auto;
}
form label {
        display: block;
}
form label input {
        margin: 2px;
        padding: 2px;
        border: 1px solid #000;
}
.suggest {
        position: relative;
}
.suggest input {
        width: 250px;
}
#suggest {
        position: absolute;
        top: 22px;
        right: 64px;
        background-color: #fff;
        width: 248px;
        text-align: left;
        border: 1px solid #000;
}
#suggest li {
        margin: 2px;
}
#suggest a {
        display: block;
        color: #000;
        text-decoration: none;
}
#suggest a:hover {
        background: #eee;
        text-decoration: underline;
        color: #f00;
}

</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
        $(document).ready(function(){
                $("input[name='suggest']").keyup(function(){
                        createList('.suggest');
                        $.ajax({
                                type: "GET",//apenas pra ficar mais fácil de debugar, pode mudar para POST depois
                                url: "function.php",
                                data: "parte="+$(this).val(),
                                success: function( data ){
                                        $("#suggest").html( data );
                                }
                        });
                });

                $("#suggest a").live('click', function( e ){
                        e.preventDefault();
                        var href = $(this).attr('href');
                        var id = href.split('=');

                        $("input[name='id']").val( id[1] );
                        $("input[name='nome']").val( $(this).text() );

                        $("#suggest").remove();
                });
                $("#suggest").mouseout(function(){
                        $("#suggest").remove();
                });
        });
        function createList( el )
        {
                $("#suggest").remove();

                var list = document.createElement('ul');
                list.id = 'suggest';
                $( el ).append( list );
        }
</script>
</head>
<body>
        <form action="" method="post">
                <fieldset>
                        <label class="suggest">Vá digitando: <input type="text" name="suggest" /></label>

                        <label>ID: <input type="text" name="id" /></label>
                        <label>Nome: <input type="text" name="nome" /></label>
                </fieldset>
        </form>
        <p>Procure por: William, B, J..</p>
</body>
</html>

e o sql disso:

--
-- Banco de Dados: `ajax`
--

-- --------------------------------------------------------

--
-- Estrutura da tabela `cliente`
--

CREATE TABLE IF NOT EXISTS `cliente` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `nome` varchar(50) NOT NULL,
  PRIMARY KEY (`id`),
  KEY `cliente_indexnome` (`nome`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 PACK_KEYS=0 AUTO_INCREMENT=7 ;

--
-- Extraindo dados da tabela `cliente`
--

INSERT INTO `cliente` (`id`, `nome`) VALUES
(1, 'Jeovane Reges'),
(2, 'Felipe Gonçalves'),
(3, 'William'),
(4, 'William Bruno'),
(5, 'Bruno'),
(6, 'Bruno Rocha');

function.php

<?php
        header("Content-Type: text/html; charset=ISO-8859-1");

        echo suggest( getGet('parte') );

function suggest( $palavra )
{
        $sql = "SELECT `id`, `nome` FROM `cliente` ";
        if( !empty($palavra) )
                $sql .= "WHERE `nome` LIKE '{$palavra}%'";

        $mysqli = new mysqli( 'localhost','root','123','ajax' );
        $query = $mysqli->query( $sql );
        if( $query->num_rows>0 )
        {
                $li='';
                while( $dados = $query->fetch_object() )
                        $li .= '<li><a href="?id='.$dados->id.'">'.$dados->nome.'</a></li>';
        }
        else
                $li = 'Nenhum cadastro encontrado!';

        return $li;
}
function getGet( $campo ){
        return ( isset($_GET[ $campo ]) ) ? filter( $_GET[ $campo ] ) : null;
}
function filter( $var )
{
        if( !get_magic_quotes_gpc() )
                $str = mysql_real_escape_string( $var );
        else
                $str = $var;
        $str = str_replace( '#', '\#', $str );
        return $str;
}

^_^

Em funcionamento:
http://www.wbruno.co…pts/suggest.php
:natal_happy:

janeiro 8th 2010 AJAX

Combos dependentes AJAX-jQuery

1 Comment »

Boas galera!

Fiz aqui um exemplo do que eu mesmo já procurei muito por ai.
Sou péssimo para explicações, então lá vão os códigos.

Embaixo no script php, eu comentei as linhas caso queria usar a biblioteca mysql, em vez da mysqli(prefira o i, caso MySQL > 4.1)
index.php

<html>
<head>
        <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){//inicio o jQuery
                $("select[name='combo1']").change(function(){
                var idCombo1 = $(this).val();//pegando o value do option selecionado
                //alert(idCombo1);//apenas para debugar a variável

                        $.getJSON(//esse método do jQuery, só envia GET
                                'function.inc.php',//script server-side que deverá retornar um objeto jSON
                                {idCombo1: idCombo1},//enviando a variável

                                function(data){
                                //alert(data);//apenas para debugar a variável

                                        var option = new Array();//resetando a variável

                                        resetaCombo('combo2');//resetando o combo
                                        $.each(data, function(i, obj){

                                                option[i] = document.createElement('option');//criando o option
                                                $( option[i] ).attr( {value : obj.id} );//colocando o value no option
                                                $( option[i] ).append( obj.nome );//colocando o 'label'

                                                $("select[name='combo2']").append( option[i] );//jogando um à um os options no próximo combo
                                });
                        });
                });
        });     

        /* função pronta para ser reaproveitada, caso queria adicionar mais combos dependentes */
        function resetaCombo( el )
        {
                $("select[name='"+el+"']").empty();//retira os elementos antigos
                var option = document.createElement('option');
                $( option ).attr( {value : '0'} );
                $( option ).append( 'Escolha' );
                $("select[name='"+el+"']").append( option );
        }
        </script>
</head>
<body>
<form action="" method="post">
        <fieldset>
                <label><select name="combo1">
                        <option value="0">Escolha</option>
                        <option value="1">Item 1</option>
                        <option value="2">Item 2</option>
                        <option value="3">Item 3</option>
                </select></label>

                <label><select name="combo2">
                        <option value="0">Escolha</option>
                </select></label>
        </fieldset>
</form>
</body>
</html>

function.inc.php

<?php
        header("Content-Type: text/html; charset=ISO-8859-1");

        function intGet( $campo ){
                return isset( $_GET[$campo] ) ? (int)$_GET[$campo] : 0;
        }
        function retorno( $id )
        {
                $sql = "SELECT `id`, `nome`
                        FROM `combo2`
                        WHERE `idCombo1` = {$id} ";
                $sql .= "ORDER BY `nome` ";

                $mysqli = new mysqli("localhost", "root", "123", "ajax");
                //$con = mysql_connect('localhost', 'root', '123');
                //mysql_select_db( 'ajax', $con );

                $q = $mysqli->query( $sql );
                //$q = mysql_query( $sql );

                $json = ' [';
                if( $q->num_rows > 0 )
                //if( mysql_num_rows( $q ) > 0 )
                {
                        while( $dados = $q->fetch_object() )
                        //while( $dados = mysql_fetch_assoc( $q ) )
                        {
                                $json .= '{"nome'.$campo.'":"'.$dados->nome.'","id'.$campo.'":"'.$dados->id.'"}, ';
                                //$json .= '{"nome'.$campo.'":"'.$dados['nome'].'","id'.$campo.'":"'.$dados['id'].'"}, ';
                        }
                }
                else
                        $json .= '{"nome'.$campo.'": "Não Encontrado"}';

                $json .= ']';

                return $json;
        }

        echo retorno( intGet('idCombo1') );

Uma forma simples de debugar, é acessando diretamente:
http://localhost/com….php?idCombo1=2

No meu caso, fiz essa pasta ‘combo’, só para organizar as coisas por aqui.

Em funcionamento:

http://www.wbruno.com.br/scripts/combos-dependentes.php

outubro 6th 2009 AJAX

Combobox dinâmico com cadastro AJAX

Suggest AJAX – jQuery – php/Mysql

Combos dependentes AJAX-jQuery

Categorias

Arquivos

Links