Adicionar campos dinamicamente via ajax

DavidsonBruno · 14 de março de 2017

Um salve para toda a comunidade Clube do Hardware! Preciso adicionar campos dinamicamente e popular os selects de um formulário com dados do banco de dados de forma assíncrona através de ajax. Alguém que tenha esse conhecimento poderia me ajudar?

Pesquisei bastante sobre requisições XMLHTTPRequest e Ajax via jQuery, mas ainda é um enigma para mim: o conhecimento na minha cabeça só entra a ferro de fogo e eu estou com o prazo contado!

Desde já agradeço muito a quem se dispuser a me ajudar!

DiF · 14 de março de 2017

@DavidsonBruno Olá, seja bem vindo ao nosso Clube do Hardware.

Com o jQuery e a função $.ajax() é possível. Mas você precisa explicar um pouco mais.

Você fazer com que um select seja populado ao usar outro?

Não podemos dar códigos prontos.. portanto exige que você tente fazer e postar aqui o andamento.. aí sim podemos ajudar no código.

DavidsonBruno · 15 de março de 2017

Perfeito. Vamos lá: a página "Novo Item" que estou construindo para a minha WebApp vai permitir o usuário adicionar ingredientes dinamicamente ao construir o seu item personalizado. Os ingredientes serão carregados do banco com base na escolha de categoria feita na página anterior, por exemplo: o usuário escolhe "pizza", clica em "Novo Item" e este é levado à página de novo item, aonde terá um box inicial de ingredientes disponíveis para escolher. A página ainda fornecerá a opção de criar outros boxers, dinamicamente. A configuração segue mais ou menos como as imagens que estão em anexo.

Tenho uma classe Connection responsável por conectar ao banco e armazenar as queries da seguinte forma:

<?php

    class Connection {
        private static $host = "localhost";
        private static $username = "root";
        private static $password = "";
        private static $database = "database";
        private static $connection = null;
        
        public static function start() {
            self::$connection = new mysqli(self::$host, self::$username, self::$password, self::$database) or exit(self::$connection->error());
        }
        
        public static function close() {
            self::$connection->close();
        }
        
        public static function login($user) {
            self::start();
            
            $success = false;
            
            $query = "SELECT * FROM TB_User WHERE User_Email = '{$user['email']}'";
            $result = self::$connection->query($query) or exit(self::$connection->error);
            
            if($result->num_rows == 1) {
                $row = $result->fetch_assoc();
                
                $cookie = array('id' => $row['User_ID'], 'firstName' => $row['User_FirstName'], 'lastName' => $row['User_LastName'], 'status' => 'active');
                
                if($row['User_Password'] == $user['password']) {
                    $user['keepConn'] == "Yes" ? setcookie('user', serialize($cookie), (time() + 3600*24*30)) : setcookie('user', serialize($cookie));
                    $success = true;
                } else {
                    $success = false;
                }
            }
            self::close();
            return $success;
        }
        
        public static function logout() {
            setcookie('user', '', time()-1);
        }
        
        public static function register($user) {
            self::start();
            
            if(!isset($user['email']) || !isset($user['password'])) {
                $success = false;
            }
            else {
                
                $query = "INSERT INTO TB_User VALUES
                                (DEFAULT, '{$user['email']}', '{$user['password']}', '{$user['firstName']}', '{$user['lastName']}', '{$user['birthday']}', '{$user['cpf']}', NOW())";
                $result = self::$connection->query($query) or exit(self::$connection->error);

                $query = "SELECT LAST_INSERT_ID() INTO @USER_ID";
                self::$connection->query($query) or exit(self::$connection->error);
                

                for($i = 0, $x = count($user['address']['street']); $i < $x; $i++) {
                    
                    $fullStreet = $user['address']['street'][$i].";".$user['address']['number'][$i].";".$user['address']['complement'][$i];
                    
                    $query = "INSERT INTO TB_Address VALUES (DEFAULT, '{$fullStreet}', '{$user['address']['neighborhood'][$i]}', '{$user['address']['city'][$i]}', '{$user['address']['state'][$i]}')";
                    self::$connection->query($query) or exit(self::$connection->error);

                    $query = "SELECT LAST_INSERT_ID() INTO @ADDRESS_ID";
                    self::$connection->query($query) or exit(self::$connection->error);

                    $query = "INSERT INTO TB_User_Address VALUES ('{$user['address']['name'][$i]}', @USER_ID, @ADDRESS_ID)";
                    self::$connection->query($query) or exit(self::$connection->error);
                }
                
                for($i = 0, $x = count($user['phone']['number']); $i < $x; $i++) {
                    
                    $query = "INSERT INTO TB_Phone VALUES (DEFAULT, '{$user['phone']['number'][$i]}', '{$user['phone']['type'][$i]}', '{$user['phone']['provider'][$i]}', @USER_ID)";
                    self::$connection->query($query) or exit(self::$connection->error);
                }
                $success = true;
            }
            
            self::close();
            return $success;
        }
        
        public static function userIsSet() {
            if(!isset($_COOKIE['user'])) {
                header('Location: index.php');
            }
        }
        
        public static function getUserProfile() {
            self::start();
            
            $userID = unserialize($_COOKIE['user'])['id'];
            $profile = false;
            
            $query = "SELECT User_ID, User_Email, User_FirstName, User_LastName, User_Birthday FROM TB_User WHERE User_ID = {$userID}";
            
            $result = self::$connection->query($query) or exit(self::$connection->error);
            
            if($result->num_rows == 1) {
                $profile = $result->fetch_assoc();
            }
            
            self::close();
            return $profile;
        }
        
        public static function getUserAddresses() {
            self::start();
            
            $userID = unserialize($_COOKIE['user'])['id'];
            $addresses = array();
            
            $query = "SELECT * FROM TB_User_Address JOIN TB_Address ON User_Address_Address_ID = Address_ID JOIN TB_User ON User_Address_User_ID = {$userID}";
            
            $result = self::$connection->query($query) or exit(self::$connection->error);
            
            while($row = $result->fetch_assoc()) {
                $addresses[] = $row;
            }
            
            self::close();
            return $addresses;
        }
        
        public static function getUserPhones() {
            self::start();
            
            $userID = unserialize($_COOKIE['user'])['id'];
            $phones = array();
            
            $query = "SELECT * FROM TB_Phone WHERE Phone_User_ID = {$userID}";
            
            $result = self::$connection->query($query) or exit(self::$connection->error);
            
            while($row = $result->fetch_assoc()) {
                $phones[] = $row;
            }
            
            self::close();
            return $phones;
        }
        
        public static function getAllStates() {
            self::start();
            $states = array();
            
            $query = "SELECT * FROM TB_State";
            
            $result = self::$connection->query($query) or exit(self::$connection->error);
            
            while($row = $result->fetch_assoc()) {
                $states[] = $row;
            }
            
            return $states;
            self::close();
        }
        
        public static function getAllCategories() {
            self::start();
            $categories = array();
            
            $query = "SELECT * FROM TB_Category";
            
            $result = self::$connection->query($query) or exit(self::$connection->error);
            
            while($row = $result->fetch_assoc()) {
                $categories[] = $row;
            }
            
            return $categories;
            self::close();
        }
        
        public static function getAllIngredientsByCategory($categoryID) {
            self::start();
            $ingredients = array();
            
            $query = "SELECT Ingredient_Category_Category_ID, Ingredient_ID, Ingredient_Name, Ingredient_Price, Ingredient_Price, UnitMeas_SingularName FROM TB_Ingredient_Category
            JOIN TB_Ingredient ON Ingredient_ID = Ingredient_Category_Ingredient_ID
            JOIN TB_UnitMeas ON UnitMeas_ID = Ingredient_UnitMeas_ID
            WHERE Ingredient_Category_Category_ID = {$categoryID}
            ORDER BY Ingredient_Name";
            
            $result = self::$connection->query($query) or exit(self::$connection->error);
            
            while($row = $result->fetch_assoc()) {
                $ingredients[] = $row;
            }
            
            return $ingredients;
        }
        
        public static function saveNewItem() {
            self::start();
            
            $query = "";
            self::close();
        }
    }
?>

Tenho ainda outro arquivo, checkout.php, responsável por mediar as transações realizadas na aplicação. Quando um usuário solicita a adição de um novo ingrediente, é essa a página requisitada via ajax para callback.

<?php
    require_once "class/Connection.php";

    {
        if(isset($_POST['name'])) {
            $fullName = explode(" ", ($_POST['name']), 2);
        } else {
            $fullName[0] = null;
            $fullName[1] = null;
        }
        
        $user['email']                   = @$_POST['email'];
        $user['password']                = @$_POST['password'];
        $user['keepConn']                = @$_POST['keepConn'];
        $user['firstName']               = @$fullName[0];
        $user['lastName']                = @$fullName[1];
        $user['birthday']                = @$_POST['birthday'];
        $user['cpf']                     = @$_POST['cpf'];
        $user['address']['street']       = @$_POST['street'];
        $user['address']['number']       = @$_POST['addressNumber'];
        $user['address']['complement']   = @$_POST['complement'];
        $user['address']['neighborhood'] = @$_POST['neighborhood'];
        $user['address']['city']         = @$_POST['city'];
        $user['address']['state']        = @$_POST['state'];
        $user['address']['name']         = @$_POST['addressName'];
        $user['phone']['number']         = @$_POST['phoneNumber'];
        $user['phone']['type']           = @$_POST['phoneType'];
        $user['phone']['provider']       = @$_POST['provider'];

        $action = isset($_POST['action']) ? $_POST['action'] : '';
    }

    if(isset($_POST['login'])) {
        Connection::login($user) ? header('Location: index.php') : header('Location: login.php');
    }

    if(isset($_POST['register'])) {
        if(Connection::register($user)) {
            Connection::login($user); 
            header('Location: index.php');
        } else {
            header('Location: register.php');
        }
    }

    if(isset($_GET['logout'])) {
        Connection::logout();
        header('Location: index.php');
    }

    if(isset($_GET['profile'])) {
        if(isset($_COOKIE['user'])) {
            header('Location: profile.php');
        } else {
            header('Location: index.php');
        }
    }

    if($action == 'addIngredient') {
        
        $ingredients = Connection::getAllIngredientsByCategory(1);
        $max = count($ingredients);
        $options = '';
        
        for($i = 0; $i < $max; $i++) {
            $id = $ingredients[$i]['Ingredient_ID'];
            $name = utf8_encode($ingredients[$i]['Ingredient_Name']);
            $unitMeas = utf8_encode($ingredients[$i]['UnitMeas_SingularName']);
            
            $options .= '<option value="$id">$name ($unitMeas)</option>';
        }
        
        $callback = '<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
                        <div class="box-ingredient">
                            <select name="ingredients">$options</select>
                            <div class="group">
                                <label for="amount">Quantidade:</label>
                                <input type="number" name="amount" min="1" value="1">
                            </div>
                            <div class="row center-xs">
                                <div class="col-xs">
                                    <span class="total">R$ 4,00</span>
                                    </div><div class="col-xs"><a href="" class="removeIngredient">Remover</a>
                                </div>
                            </div>
                        </div>
                    </div>';
        
        return $callback;
    }
?>

Ainda tenho outro arquivo, functions.js, que se utiliza de jQuery para fazer as requisições ajax de que preciso.

$(document).ready(function() {
        var maxField = 5;
        var xIngredients = 1; // campos iniciais
        var wrapIngredients = ".wrap-ingredients";
        var addIngredient = ".add-ingredient";
        
        $(addIngredient).click (function(e) {
                e.preventDefault();     //prevenir novos clicks
                
                if (xIngredients < maxField) {
                    $.ajax({
                        url: 'checkout.php',
                        type: 'POST',
                        data: {action: 'addIngredient'},
                        success: function(callback) {
                            $(wrapIngredients).append(callback);
                        }
                    });
                    xIngredients++;
                }
        });

    // Remover o div anterior
        $(wrapIngredients).on("click",".removeIngredient",function(e) {
                e.preventDefault();
                $(this).parent('div').remove();
                xIngredients--;
        });
});

Porém, é aí que mora o meu problema. O DOM retorna o callback vazio, como podemos ver na imagem Screenshot_4.png anexada.

Alguma ideia do que eu possa estar fazendo errado? Sinceramente, não consigo entender o porque o callback retorna vazio.

DavidsonBruno · 16 de março de 2017

Olá mais uma vez! Creio que consegui resolver o problema.

Na página de checkout eu estava utilizando return para devolver o callback pra chamada ajax, quando na verdade ela espera dado escrito. Então modifiquei "return $callback" para "echo "$callback", como se segue:

$callback = '<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
                        <div class="box-ingredient">
                            <select name="ingredients">'.$options.'</select>
                            <div class="group">
                                <label for="amount">Quantidade:</label>
                                <input type="number" name="amount" min="1" value="1">
                            </div>
                            <div class="row center-xs">
                                <div class="col-xs">
                                    <span class="total">R$ 4,00</span>
                                    </div><div class="col-xs"><a href="" class="removeIngredient">Remover</a>
                                </div>
                            </div>
                        </div>
                    </div>';
        
        echo $callback; //antes essa linha estava declarada como "return $callback"

Desde já quero agradecer demais a disponibilidade da sua ajuda e espero que esta solução possa ser útil para mais pessoas. Valeu!