Publicado em 20 de dez.

listas dependentes uma da outra.

Bom dia Pessoal ,

Estou querendo montar um "sisteminha" web , em que a pessoa pode comparar dois produtos , exibindo o ponto forte de cada , e o que um tem a mais do que o outro.

O problema é que não sei direito por onde começar , quais códigos usar e etc.

Na pagina principal , ficaria assim :

Ex: Dois combo Box , nele você escolhe a marca do produto,ao escolher x marca , na sublist aparece os produtos relacionados com aquela marca.

Marca01 Marca02

sublist sublist

 <btn> Comparar </btn>

Ao clicar em comparar ,faria um select na coluna do produto selecionado de cada sublist , e exibiria os dados deles abaixo,mostrando o ponto forte de cada , as informações deles , e o que um tem que no outro não tem.

Marca Marca

sublist sublist

<btn> Comparar </btn>

Produto x Produto Y

Ponto forte : x Ponto forte : y

info01 info01
info02 info02
info03 info03
info04 info04
info05 info05
info06 info06
info08 info08
etc, etc,

Produto x Ganha em :

etc
etc
etc

Produto y Ganha em :
etc
etc
etc

Mais ou menos assim gostaria de fazer .

Se esta meio confuso o jeito que expliquei , no site MaisCelular tem um esquema de comparação ,que é quase igual do jeito que quero fazer .

(http://www.maiscelular.com.br/comparar/celulares/)

Alguem sabe como posso fazer algo assim ?

Desde ja , grato

Discussão (14)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Motta· 20 de dez.

h_felix , a programação de um site como o que citou não chega a ser coisa de outro mundo mas requer alguma experiência em programação , modelagem de dados , desenho de páginas etc.

Não creio que exista um "caminho fácil" para isto , sequer existe apenas uma forma de fazer.

h_felix· 20 de dez.

>
h_felix , a programação de um site como o que citou não chega a ser coisa de outro mundo mas requer alguma experiência em programação , modelagem de dados , desenho de páginas etc.

Não creio que exista um "caminho fácil" para isto , sequer existe apenas uma forma de fazer.

Bom dia Motta ,

então , questão de layout ja tenho pronto , o problema são os codigos em php ,

tenho um codigo que usei num projeto ,mas nada parecido com o que quero .

O meu maior problema , seria mesmo a parte dos combo Box ( escolhendo uma Marca , na sublist aparece os produtos relacionados a ela) , se pudesse ajudar com isso , ja me quebraria um grande galho.

Motta· 20 de dez.

Não conheço php ... mas ...

Aqui temos 2 pontos vitais ao meu ver , o objeto que seleciono os modelos a serem comparados com a parte visual dinâmica e bem feita e o modelo de dados que compara os modelos e que "sabe" que valor supera que, repare que temos atributos diferentes como peso , resolução da câmera etc.

Muito bom o site por sinal.

h_felix· 23 de dez.

Galera ,

um amigo meu passou um código que ele usava , e que acredito eu , ele tenha pegado aqui mesmo no fórum e modificado ele .

Mas , tentei colocar no meu projeto , mas não funciona . a 2ª lista não altera os valores conforme o que foi selecionado na 1ª lista.

Segue o codigo que ele me passou (ps.:não alterei nada , só o nome do server , user e senha , tabelas coloquei o mesmo nome que ele passou )

produto.php

<link rel="stylesheet" type="text/css" media="screen" href="../lib/css/estilo.css"/>

<div id="content">

 

<head>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("select[name=tv_assinatura]").change(function()

{

var empresa_tv = $(this).val();

//alert(empresa_tv);

$.getJSON(

'../functions/function.inc.php',

{empresa_tv: empresa_tv},

function(data){

//alert(data);

var option = new Array();

resetaCombo('pacotes');

$.each(data, function(i, obj){

option = document.createElement('option');

*$( option** ).attr( {value : obj.id} );*

*$( option** ).append( obj.nome );*

*$("select[name=pacotes]").append( option** );*

});

function resetaCombo( el )

{

*$("select[name="+el+"]").empty();*

*var option = document.createElement('option');*

$( option ).attr( {value : '0'} );

$( option ).append( 'Escolha' );

$("select[name="+el+"]").append( option );

}

*</script>*

*</head>*

*<form action="" method="post">*

*<fieldset>*

*<label><select name="tv_assinatura">*

*<option value="0">Tv por assinatura</option>*

*<?php*

*$sql_tv=mysql_query("SELECT * FROM tv_assinatura"); *

while ($dados = mysql_fetch_array($sql_tv)) {

echo("<option value='1'>".$dados['nome_tv']."</option>");

}

*?>*

*</select></label>*

*<label><select name="pacotes">*

*<option value="0">Escolha um Pacote</option>*

*</select></label>*

*</fieldset>*

*</form>*

*</div>*

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( $nome_tv )

{

$sql = "SELECT id, nome_pacote

FROM pacotes

WHERE empresa_tv = {$nome_tv} ";

$sql .= "ORDER BY nome_pacote ";

$mysqli = new mysqli("server", "user", "key", "DB");

//$con = mysql_connect("server", "user", "key", "DB");

//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_pacote'.$campo.'":"'.$dados->nome_pacote.'","id'.$campo.'":"'.$dados->id.'"}, ';

//$json .= '{"nome_pacote'.$campo.'":"'.$dados['nome_pacote'].'","id'.$campo.'":"'.$dados['id'].'"}, ';

}

else

$json .= '{"nome_pacote'.$campo.'": "Não Encontrado"}';

$json .= ']';

return $json;

}

echo retorno( intGet('empresa_tv') );

SQL

Create Database planos ;

use planos;

CREATE TABLE IF NOT EXISTS pacotes (

id int(11) NOT NULL AUTO_INCREMENT,

nome_pacote varchar(25) COLLATE utf8_unicode_ci NOT NULL,

empresa_tv varchar(15) COLLATE utf8_unicode_ci NOT NULL,

total_canais int(11) NOT NULL,

canais_sd int(11) NOT NULL,

canais_hd int(11) NOT NULL,

equip_01 varchar(30) COLLATE utf8_unicode_ci NOT NULL,

equip_02 varchar(30) COLLATE utf8_unicode_ci NOT NULL,

equip_03 varchar(30) COLLATE utf8_unicode_ci NOT NULL,

preco decimal(5,2) NOT NULL,

servico_01 varchar(30) COLLATE utf8_unicode_ci NOT NULL,

servico_02 varchar(30) COLLATE utf8_unicode_ci NOT NULL,

foto varchar(50) CHARACTER SET latin1 COLLATE latin1_german1_ci NOT NULL,

PRIMARY KEY (id)

) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=7 ;

CREATE TABLE IF NOT EXISTS tv_assinatura (

id int(11) NOT NULL AUTO_INCREMENT,

nome_tv varchar(15) COLLATE utf8_unicode_ci NOT NULL,

PRIMARY KEY (id),

UNIQUE KEY nome_tv (nome_tv)

) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=6 ;

Alguem poderia ajudar a mostrar onde esta o erro e a resolve-lo ?

Assim , começo a montar uma pra mim baseada nela.

Desde ja , grato

Alguém saberia me ajudar ?

William Bruno· 23 de dez.

Aperta Ctrl + Shift + J no teu Firefox e veja o que aparece no console de erros.

Além disso, acesse no browser e veja se o JSON sai corretamente:

functions/function.inc.php?empresa_tv=1

h_felix· 23 de dez.

>
Aperta Ctrl + Shift + J no teu Firefox e veja o que aparece no console de erros.

Além disso, acesse no browser e veja se o JSON sai corretamente:

functions/function.inc.php?empresa_tv=1

Boa tarde ,

Segue o erro :

Uncaught SyntaxError: Unexpected token <
(index):22 Uncaught ReferenceError: $ is not defined

Resultado do JSON :

[{"nome_pacote": "Não Encontrado"}]

É mais facil arrumar esse ou tentar fazer um script novo ?

William Bruno· 23 de dez.

Qual dos dois vc sabe fazer ?

Esse script é do meu blog.

O erro no js, é pq faltou vc importar a lib jQuery.

Sobre o php, acesse com um ID q vc sabe q existe no banco.

h_felix· 23 de dez.

>
Qual dos dois você sabe fazer ?

Esse script é do meu blog.

O erro no js, é pq faltou você importar a lib jQuery.

Sobre o php, acesse com um ID q você sabe q existe no banco.

Boa tarde ,

Isso mesmo , entrei no link do seu site e vi que o script se encontrava la .

Qual biblioteca do Jquery esta faltando ?

Tentei acessar com os id que coloquei no banco ,tem conteudo na tabela Mãe e na da sublist , mas , não retornou nenhum resultado.Deve ser algum erro no functions , pois ele não esta fazendo o select da sublist

William Bruno· 23 de dez.

A própria lib jQuery. Ela em si.

http://jquery.com/download/

h_felix· 23 de dez.

>
A própria lib jQuery. Ela em si.

http://jquery.com/download/

Vish , coisa boba e não tinha reparado , estava com o caminho do arquivo errado , desculpe pelo erro.

Agora estamos quase la, no combo box principal , ao selecionar 1 das categorias , na sublist altera , mas da como opção espaços em branco .

Como resolver agora ?

William Bruno· 23 de dez.

Acessa a URL no browser como falei, e faz o json retornar certo.

Seu problema agora é no server-side.

functions/function.inc.php?empresa_tv=1

coloca um ID q existe no lugar do 1

h_felix· 23 de dez.

>
Acessa a URL no browser como falei, e faz o json retornar certo.

Seu problema agora é no server-side.

functions/function.inc.php?empresa_tv=1

coloca um ID q existe no lugar do 1

Boa tarde Bruno ,

Cara , muito obrigado pelas dicas e pelo conteúdo em seu site ,ajudou muito .

Vi outro script que você postou no site e peguei umas ideias dele , e deu certo

Vou colocar o script aqui , caso alguém queira .

content.php

<script type="text/javascript" src="../lib/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()

{ $("select[name=tv_assinatura]").change(function() { var id_tv = $(this).val(); $.getJSON( '../functions/function.inc.php', {id_tv : id_tv},

function(data){
//alert(data);

var option = new Array();

resetaCombo('pacotes');
$.each(data, function(i, obj){

option = document.createElement('option');

*$( option** ).attr( {value : obj.id} );*

*$( option** ).append( obj.nome );*

*$("select[name=pacotes]").append( option** );*

});
});
});

*});** *

function resetaCombo( el )
{

*$("select[name="+el+"]").empty();*

*var option = document.createElement('option');** *

$( option ).attr( {value : '0'} );
$( option ).append( 'Escolha' );
$("select[name="+el+"]").append( option );
}
</script>

*<form action="" method="post">*
*<fieldset>*
*<label><select name="tv_assinatura">*
*<option value="0">Escolha</option>*

*<option value="1">Produto 01</option>*
*<option value="2">Produto 02</option>*
*<option value="3">Produto</option>*
*</select></label>*

*<label><select name="pacotes">*
*<option value="0">Escolha</option>*
*</select></label>*

*</fieldset>*
*</form>*

functions.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_pacote,id_tv FROM pacotes WHERE id_tv = {$id} ");
$mysqli = new mysqli("mysql.hostinger.com.br", "u139252452_admin", "admin123", "u139252452_plano");
$q = $mysqli->query( $sql );
$json = Array();
if( $q->num_rows > 0 )
{
while( $dados = $q->fetch_object() )
{
$json[]= Array('nome'=> utf8_encode( $dados->nome_pacote), 'id'=> $dados->id);
}
}
else

*$json[]** **= Array('nome'=> utf8_encode( 'nao encontrado' ), 'id'=> '0' );*

*return json_encode( $json );*

} echo retorno( intGet('id_tv') ); ?> Agora , se não for muito abusivo de minha parte , você saberia como colocar outra Combo box com sublist e um botão no form , onde quando pressionado , pega os valores das 2 sublist e exibe em uma tabela abaixo com as informações de cada. Mais uma vez , grato

William Bruno· 23 de dez.

Abra um novo tópico.

Fica menos confuso e mais objetivo.

h_felix· 23 de dez.

>
Abra um novo tópico.

Fica menos confuso e mais objetivo.

Obrigado