Campos dinâmicos com AJAX + PHP + JSON

[Rafael Andres]

Galera, preciso muito de uma mão num sisteminha simples que estou desenvolvendo.

É um sistema de cadastro de estoque com retirada de produtos. Numa saída, quero poder selecionar mais de uma produto.

Funciona assim: digito data de saída, hora de saída, seleciono a categoria do produto e ele cria um select dinâmico dos produtos dessa categoria.

Aí estou tentando criar um botão que insira mais categorias e mais produtos na mesma página, ou seja, adiciona campos dinamicamente (CATEGORIA > PRODUTOS DESSA CATEGORIA).

Até aí funciona bem, ele adiciona os campos das categorias, mas não está pegando os produtos corretamente, conforme seleciono a categoria. Aliás, ele funciona para o primeiro campo, mas nos demais não.

Bom, vou postar os códigos abaixo pra quem puder me auxiliar:

Banco de dados:

CREATE TABLE IF NOT EXISTS `produtos` (
  `codigo_produto` int(11) NOT NULL AUTO_INCREMENT,
  `categoria_id` int(11) NOT NULL,
  `nome_produto` varchar(255) NOT NULL,
  `quantidade` int(10) unsigned NOT NULL,
  `preco_compra` decimal(10,2) NOT NULL,
  `datainc` date NOT NULL,
  `preco_venda` decimal(10,2) NOT NULL,
  `preco_medio` decimal(10,2) NOT NULL,
  `quantidade_minima` int(10) unsigned NOT NULL,
  `quantidade_ideal` int(10) unsigned NOT NULL,
  `foto` varchar(100) NOT NULL,
  PRIMARY KEY (`codigo_produto`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=38 ;

CREATE TABLE IF NOT EXISTS `categoria` (
  `categoria_id` int(11) NOT NULL AUTO_INCREMENT,
  `nome_categoria` varchar(255) NOT NULL,
  PRIMARY KEY (`categoria_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;

************************************************************ NO ARQUIVO “SAIDA.PHP” ESTÁ ASSIM ************************************************************

<!--------------------------------------------JSON PARA SELECT DINAMICO - USA O ARQUIVO categorias.ajax.php------------------------------------------------->      
      $(document).ready(function(){
         
         $("select[name=produto]").change(function(){
            $("select[name=categoria]").html('<option value="0">Carregando...</option>');
            
            $.post("categorias.ajax.php", 
                  {produto:$(this).val()},
                  function(valor){
                     $("select[name=categoria]").html(valor);
                  }
                  )
            
         })
      })

<!--------------------------------------------FORMULARIO------------------------------------------------->      
      
<form id="form1" name="form1" method="POST" action=" salvar.php" enctype="multipart/form-data">
<p>Data de saída:      
  <input type="text" id="dataret" size="10" maxlength="10" name="dataret"  value="<?php echo date("d/m/Y");?>" onKeyUp="Formatadata(this,event)" class="tcal" />
<br />
Hora  de saída:      
  <input type="text" id="horaret" size="5" maxlength="5" name="horaret"  value="<?php echo date("H:i");?>">Formato: hh:mm
        <br>        
Retirado por:
<select name="retirado_por" class="textBox" id="retirado_por">
<option selected value="">Selecione uma pessoa</option>
  <?
                while ($dados2 = mysql_fetch_array($re2)) {
                echo "<option value='" . $dados2['id_vendedor'] . "'>" . $dados2['nome_vendedor'] . "</option>";
                }        
            ?>
</select>
<!--------------------------------------------AQUI É ONDE ADICIONA OS CAMPOS DINAMICOS------------------------------------------------->      

<fieldset>
    <legend>Produtos</legend>
        <div class="produtos">
            <p class="campoProdutos">
<select name="produto">
       <option value="0">Escolha uma categoria</option>
        <?php
        
         $sql = "SELECT * FROM categoria ORDER BY nome_categoria ASC";
         $qr = mysql_query($sql) or die(mysql_error());
         while($ln = mysql_fetch_assoc($qr)){
            echo '<option value="'.$ln['categoria_id'].'">'.$ln['nome_categoria'].'</option>';
         }
      ?>
        
    </select>
    <select name="categoria">
       <option value="0" disabled="disabled">Escolha uma categoria primeiro</option>
    </select>
    
                <a href="#" class="removerCampoProduto">Remover campo</a>
            </p>
        </div>
            
                <a href="#" class="adicionarCampoProduto">Adicionar campo</a>
            
</fieldset>
<input type="submit" class="submit" value="Enviar" />
</form>

************************************************************ ARQUIVO “categorias.ajax.php” ESTÁ ASSIM ************************************************************

<?php

mysql_connect("localhost", "root", "");
mysql_select_db("cad_provisorio");

$produto = $_POST['produto'];
$quantidade = count($produto);
for ($i=0; $i<$quantidade; $i++) {
//    echo  "Telefone: ".$telefone[$i]."<br />";

$sql = "SELECT * FROM produtos WHERE categoria_id = $produto ORDER BY nome_produto ASC";
$qr = mysql_query($sql) or die(mysql_error());

if(mysql_num_rows($qr) == 0){
   echo  '<option value="0">'.htmlentities('Não categorias nesse produto').'</option>';
   
}else{
   while($ln = mysql_fetch_assoc($qr)){
      echo '<option value="'.$ln['categoria_id'].'">'.$ln['nome_produto'].'</option>';
   }
}
}
?>

************************************************************ ARQUIVO “adiciona_campos.php” - está inserido como um SCRIPT.JS ************************************************************

$(function () {
    function removeCampoProduto() {
        $(".removerCampoProduto").unbind("click");
        $(".removerCampoProduto").bind("click", function () {
            i=0;
            $(".produtos p.campoProdutos").each(function () {
                i++;
            });
            if (i>1) {
                $(this).parent().remove();
            }
        });
    }
    removeCampoProduto();
    $(".adicionarCampoProduto").click(function () {
        novoCampo = $(".produtos p.campoProdutos:first").clone();
        novoCampo.find("input").val("");
        novoCampo.insertAfter(".produtos p.campoProdutos:last");
        removeCampoProduto();
    });
});