Load client data into a PHP modal

Asked

Viewed 1,041 times

1

Hello,

I have a problem developing a page that reports a list of clients. In the main screen appear the fields ID, Name and CPF. In addition, on the same line, the "View" button appears, which should open a modal, in which the database information of that client (ID) must be loaded. Below the code that generates the list with the 4 columns.

            <tbody>
            <?php
            $result2 = mysqli_query($user->mysqli, $sql) or die(mysqli_error());
            while($row = mysqli_fetch_array($result2)) {
                ?>
                <tr>

                    <th><?php echo $row[0]; ?></th>
                    <th class="ls-txt-center"><?php echo $row[1];?></th>
                    <th class="ls-txt-center"><?php echo $row[2]; ?></th>
                    <th class="ls-txt-center">
                    <a class="ls-btn" href="" data-ls-module="modal" data-target="#ModalUpdate" class="bg-customer-support" >Visualizar</a>
                    </a>
                    </th>
                </tr>
                <?php
            }
            ?>

        </tbody>

Follow the modal:

 <div class="ls-modal" id="ModalUpdate">
    <form class="ls-form ls-form-horizontal row" method="POST" action="modal_clientes.php">     
    <input type="hidden" id='id' name='$id' value="">
    <div class="ls-modal-box">
        <div class="ls-modal-header">
            <a href="clientes.php" data-dismiss="modal">&times;</a>
            <h1 class="ls-modal-title">Visualizar</h1>
        </div>
        <div class="ls-modal-body" id="myModalBody">
        <table class="ls-table">
            <tr>
            <td style='width:20%'><label for="id_update">ID:</label></td>
            <td style='width:80%'><input type="text" style='width:100%' name="id_update" id="id_update" /></td>
            </tr>
            <tr>
            <td style='width:20%'><label for="nome_update">Nome:</label></td>
            <td style='width:80%'><input type="text" style='width:100%' name="nome_update" id="nome_update" /></td>
            </tr>
            <tr>
            <td style='width:20%'><label for="nascimento_update">Data Nascimento:</label></td>
            <td style='width:80%'><input type="date" min="1901-01-02" max="2050-12-31" style='width:50%' name="nascimento_update" id="nascimento_update" class="ls-mask-date" placeholder="AAAA-MM-DD" /></td>
            </tr>
            <tr>
            <td style='width:20%'><label for="sexo_update">Sexo:</label></td>
            <td style='width:80%'><select name="sexo_update" type="text" id="sexo_update">
            <option value="M">Masculino</option>
            <option value="F">Feminino</option>
            </select>
            <span class="style1">*      </span></td>
            </td>
            </tr>
            <tr>
            <td style='width:20%'><label for="rg_update">RG:</label></td>
            <td style='width:80%'><input type="text" style='width:50%' name="rg_update" id="rg_update" /></td>
            </tr>
            <tr>
            <td style='width:20%'><label for="orgao_emissor_update">Órgão emissor:</label></td>
            <td><input type="text"  style='width:50%' name="orgao_emissor_update" id="orgao_emissor_update" /></td>
            </tr>
            <tr>
            <td style='width:20%'><label for="ufEmissor_update">UF:</label></td>
            <td style='width:30%'><select name="ufEmissor_update" type="text" id="ufEmissor_update">
            <option>Selecione...</option>
            <option value="AC">AC</option>
            <option value="AL">AL</option>
            <option value="AP">AP</option>
            <option value="AM">AM</option>
            <option value="BA">BA</option>
            <option value="CE">CE</option>
            <option value="ES">ES</option>
            <option value="DF">DF</option>
            <option value="MA">MA</option>
            <option value="MT">MT</option>
            <option value="MS">MS</option>
            <option value="MG">MG</option>
            <option value="PA">PA</option>
            <option value="PB">PB</option>
            <option value="PR">PR</option>
            <option value="PE">PE</option>
            <option value="PI">PI</option>
            <option value="RJ">RJ</option>
            <option value="RN">RN</option>
            <option value="RS">RS</option>
            <option value="RO">RO</option>
            <option value="RR">RR</option>
            <option value="SC">SC</option>
            <option value="SP">SP</option>
            <option value="SE">SE</option>
            <option value="TO">TO</option>
            </select>
            </td>
            </tr>
            <tr>
            <td style='width:20%'><label for="dataEmissaoRG_update">Data Emissão RG:</label></td>
            <td style='width:80%'><input type="date" min="1901-01-02" max="2050-12-31" style='width:50%' name="dataEmissaoRG_update" id="dataEmissaoRG_update" class="ls-mask-date" placeholder="AAAA-MM-DD" /></td>
            </tr>
            <tr>
            <td style='width:20%'><label for="cpf_update">CPF:</label></td>
            <td style='width:80%'><input type="text" style='width:50%' name="cpf_update" id="cpf_update" /></td>
            </tr>
            <tr>
            <td style='width:20%'><label for="ddd1_update">DDD:</label></td>
            <td style='width:20%'><input type="text" style='width:50%' name="ddd1_update" id="ddd1_update" /></td>
            </tr>
            <tr>
            <td style='width:20%'><label for="fone1_update">Telefone:</label></td>
            <td style='width:40%'><input type="text" style='width:50%' name="fone1_update" id="fone1_update" /></td>
            </tr>
            <tr>
            <td style='width:20%'><label for="ddd2_update">DDD:</label></td>
            <td style='width:20%'><input type="text" style='width:50%' name="ddd2_update" id="ddd2_update" /></td>
            </tr>
            <tr>
            <td style='width:20%'><label for="fone2_update">Telefone:</label></td>
            <td style='width:40%'><input type="text" style='width:50%' name="fone2_update" id="fone2_update" /></td>
            </tr>
            <tr>
            <td style='width:20%'><label for="ddd3_update">DDD:</label></td>
            <td style='width:20%'><input type="text" style='width:50%' name="ddd3_update" id="ddd3_update" /></td>
            </tr>
            <tr>
            <td style='width:20%'><label for="fone3_update">Telefone:</label></td>
            <td style='width:40%'><input type="text" style='width:50%' name="fone3_update" id="fone3_update" /></td>
            </tr>
            <tr>
            <td style='width:20%'><label for="ddd4_update">DDD:</label></td>
            <td style='width:20%'><input type="text" style='width:50%' name="ddd4_update" id="ddd4_update" /></td>
            </tr>
            <tr>
            <td style='width:20%'><label for="fone4_update">Telefone:</label></td>
            <td style='width:40%'><input type="text" style='width:50%' name="fone4_update" id="fone4_update" /></td>
            </tr>
            <tr>
            <td style='width:20%'><label for="ddd5_update">DDD:</label></td>
            <td style='width:20%'><input type="text" style='width:50%' name="ddd5_update" id="ddd5_update" /></td>
            </tr>
            <tr>
            <td style='width:20%'><label for="fone1_update">Telefone:</label></td>
            <td style='width:40%'><input type="text" style='width:50%' name="fone5_update" id="fone5_update" /></td>
            </tr>
            <tr>
            <td style='width:20%'><label for="endereco_update">Endereço:</label></td>
            <td style='width:30%'><input type="text" style='width:100%' name="endereco_update" id="endereco_update" /></td>
            </tr>
            <tr>
            <td style='width:20%'><label for="bairro_update">Bairro:</label></td>
            <td style='width:30%'><input type="text" style='width:100%' name="bairro_update" id="bairro_update" /></td>
            </tr>
            <tr>
            <td style='width:20%'><label for="cidade_update">Cidade:</label></td>
            <td style='width:30%'><input type="text" style='width:100%' name="cidade_update" id="cidade_update" /></td>
            </tr>
            <tr>
            <td style='width:20%'><label for="cep_update">CEP:</label></td>
            <td style='width:30%'><input type="text" style='width:50%' name="cep_update" id="cep_update" class="ls-mask-cep" placeholder="99999-000" /></td>
            </tr>
            <tr>
            <td style='width:20%'><label for="estado_update">UF:</label></td>
            <td><select name="estado_update" type="text" id="estado_update">
            <option>Selecione...</option>
            <option value="AC">AC</option>
            <option value="AL">AL</option>
            <option value="AP">AP</option>
            <option value="AM">AM</option>
            <option value="BA">BA</option>
            <option value="CE">CE</option>
            <option value="ES">ES</option>
            <option value="DF">DF</option>
            <option value="MA">MA</option>
            <option value="MT">MT</option>
            <option value="MS">MS</option>
            <option value="MG">MG</option>
            <option value="PA">PA</option>
            <option value="PB">PB</option>
            <option value="PR">PR</option>
            <option value="PE">PE</option>
            <option value="PI">PI</option>
            <option value="RJ">RJ</option>
            <option value="RN">RN</option>
            <option value="RS">RS</option>
            <option value="RO">RO</option>
            <option value="RR">RR</option>
            <option value="SC">SC</option>
            <option value="SP">SP</option>
            <option value="SE">SE</option>
            <option value="TO">TO</option>
            </select>
            </td>
            </tr>
            <tr>
            <td style='width:20%'><label for="matricula1_update">Matrícula 1:</label></td>
            <td style='width:30%'><input type="text" style='width:50%' name="matricula1_update" id="matricula1_update" /></td>
            </tr>
            <tr>
            <td style='width:20%'><label for="codMatricula1_update">Cod. Matrícula 1:</label></td>
            <td style='width:30%'><input type="text" style='width:50%' name="codMatricula1_update" id="codMatricula1_update" /></td>
            </tr>
            <tr>
            <td style='width:20%'><label for="matricula2_update">Matrícula 2:</label></td>
            <td style='width:30%'><input type="text" style='width:50%' name="matricula2_update" id="matricula2_update" /></td>
            </tr>
            <tr>
            <td style='width:20%'><label for="codMatricula1_update">Cod. Matrícula 2:</label></td>
            <td style='width:30%'><input type="text" style='width:50%' name="codMatricula2_update" id="codMatricula2_update" /></td>
            </tr>
            <tr>
            <td style='width:20%'><label for="banco_emp_update">Banco empréstimo:</label></td>
            <td><select name="banco_emp_update" type="text" id="banco_emp_update">
            <option>Selecione...</option>
            <option value="Banco do Brasil">BANCO DO BRASIL</option>
            <option value="BMG">BMG</option>
            <option value="Banrisul">BANRISUL</option>
            <option value="Bradesco">BRADESCO</option>
            <option value="Caixa">CAIXA</option>
            <option value="ViaCredi">VIACREDI</option>
            <option value="HSBC">HSBC</option>
            </select>
            </tr>
            <tr>
            <td style='width:20%'><label for="credito_update">Crédito:</label></td>
            <td style='width:30%'><input type="text" style='width:50%' oninput="mascara(this,mvalor)" placeholder="9999.99" name="credito_update" id="credito_update" /></td>
            </tr>
            <tr>
            <td style='width:20%'><label for="valor_update">Valor:</label></td>
            <td style='width:30%'><input type="text" style='width:50%' oninput="mascara(this,mvalor)" placeholder="9999.99" name="valor_update" id="valor_update" /></td>
            </tr>
            <tr>
            <td style='width:20%'><label for="status_update">Status:</label></td>
            <td><select name="status_update" type="text" id="status_update">
            <option>Selecione...</option>
            <option value="Ativo">Ativo</option>
            <option value="Inativo">Inativo</option>
            <option value="Falecido">Falecido</option>
            </select>
            </tr>
            <tr>
            <td style='width:20%'><label for="retorno_update">Data Retorno:</label></td>
            <td style='width:80%'><input type="date" min="1901-01-02" max="2050-12-31" style='width:50%' name="retorno_update" id="retorno_update" class="ls-mask-date" placeholder="AAAA-MM-DD" /></td>
            </tr>
            <tr>
            <td style='width:20%'><label for="observacao_udpate">Observação:</label></td>
            <td style='width:80%'><textarea rows="10"  style='width:100%' name="observacao_udpate" id="observacao_udpate"></textarea></td>
            </tr>
        </table>
        </div>
        <div class="ls-modal-footer">
            <button href="clientes.php" class="ls-btn ls-float-right" data-dismiss="modal">Cancelar</button>
            <button type="submit" class="ls-btn-primary">Salvar</button>
        </div>
    </div>
    </form>
</div>

Also, I have another file, modal_clients.php, with the following code:

   <?php
  $nome = $_POST['nome_update'];
  $nascimento = $_POST['nascimento_update'];
  $sexo = $_POST['sexo_update'];
  $rg = $_POST['rg_update'];
  $orgao_emissor = $_POST['orgao_emissor_update'];
  $ufEmissor = $_POST['ufEmissor_update'];
  $dataEmissaoRG = $_POST['dataEmissaoRG_update'];
  $cpf = $_POST['cpf_update'];
  $ddd1 = $_POST['ddd1_update'];
  $fone1 = $_POST['fone1_update'];
  $ddd2 = $_POST['ddd2_update'];
  $fone2 = $_POST['fone2_update'];
  $ddd3 = $_POST['ddd3_update'];
  $fone3 = $_POST['fone3_update'];
  $ddd4 = $_POST['ddd4_update'];
  $fone4 = $_POST['fone4_update'];
  $ddd5 = $_POST['ddd5_update'];
  $fone5 = $_POST['fone5_update'];
  $endereco = $_POST['endereco_update'];
  $bairro = $_POST['bairro_update'];
  $cidade = $_POST['cidade_update'];
  $cep = $_POST['cep_update'];
  $matricula1 = $_POST['matricula1_update'];
  $codMatricula1 = $_POST['codMatricula1_update'];
  $matricula2 = $_POST['matricula2_update'];
  $codMatricula2 = $_POST['codMatricula2_update'];
  $banco_emp = $_POST['banco_emp_update'];
  $credito = $_POST['credito_update'];
  $valor = $_POST['valor_update'];
  $status = $_POST['status_update'];
  $retorno = $_POST['retorno_update'];
  $observacao = $_POST['observacao_update'];
  $id = $_POST['id_update'];

$host = 'localhost'; 
$user = 'root'; 
$pass = ''; 
$database = 'vale'; 

@$conexao = mysql_connect($host,$user,$pass) or die ("Can not connect with database.");
$charset = mysql_set_charset('UTF-8', $conexao);
mysql_select_db($database,$conexao) or die ("Can't select the database.");



  $sql = "update cadastro_mailing
             set nome = '$nome',
                 nascimento = '$nascimento',
                 sexo = '$sexo',
                 orgao_emissor = '$orgao_emissor',
                 uf_emissor = '$ufEmissor',
                 data_emissao = '$data_emissao',
                 cpf = '$cpf',
                 DDD_fone1 = '$ddd1',
                 fone1 = '$fone1'
                 DDD_fone2 = '$ddd2',
                 fone2 = '$fone2'
                 DDD_fone3 = '$ddd3',
                 fone3 = '$fone3'
                 DDD_fone4 = '$ddd4',
                 fone4 = '$fone4'
                 DDD_fone5 = '$ddd5',
                 endereco = '$endereco',
                 bairro = '$bairro',
                 cidade = '$cidade',
                 cep = '$cep',
                 matricula_1 = '$matricula1',
                 cod_matricula_1 = '$codMatricula1',
                 matricula_2 = '$matricula2',
                 cod_matricula_2 = '$codMatricula2',
                 banco_emp = '$banco_emp',
                 valor = '$valor'
                 status = '$status',
                 retorno = '$retorno',
                 observacao = '$observacao',                 
           where id = '$id'";
  $resultado = mysql_query($sql, $conexao) or die ($sql);
  header("Location: clientes.php");
?>

The modal can be opened, however, without customer data. How can I solve this?

Grateful!

php mysql modal id

  • Is it another page? GET or POST? Check if you’re receiving the information ( opening as tab makes it easy )?

  • The modal is on the same page. I’m creating everything in one page. The modal, in addition to loading the Infos should allow to update, so I believe that it is a POST

  • Are you using boostrap Modal? If so, take a look at documentation. To, by clicking on the modal and updating it with a new content you will have to use the event show.bs.modal

  • I’m using a framework released by Locaweb, I wouldn’t know if it has any relation to bootstrap: http://opensource.locaweb.com.br/locawebstyle/

  • Nothing to do. You have to check for data brought from the bank when sending the request

  • I gave an Edit in the question with another part, which is in another PHP file too.

Show 1 more comment

2 answers

2


After a lot of tinkering, I found that the error was in the parameters. The jquery was pulling some wrong parameters, then it did not load any in the modal. I was putting one by one and testing, and it worked. Thank you to everyone who tried to help!

    <script>
function carregar_update(param1, param2, param3, param4, param5, param6, param7, param8, param9, param10, param11, param12, param13, param14, param15, param16, param17, param18, param19, 
                        param20, param21, param22, param23, param24, param25, param26, param27, param28, param29, param30, param31, param32, param33, param34) {
        $("#id_update").val(param1);
        $("#nome_update").val(param2);
        $("#nascimento_update").val(param3);
        $("#sexo_update").val(param4);
        $("#rg_update").val(param5);
        $("#orgao_emissor_update").val(param6); 
        $("#uf_emissor_update").val(param7);        
        $("#data_emissao_update").val(param8);
        $("#cpf_update").val(param9);
        $("#ddd1_update").val(param10);
        $("#fone1_update").val(param11);
        $("#ddd2_update").val(param12);
        $("#fone2_update").val(param13);
        $("#ddd3_update").val(param14);
        $("#fone3_update").val(param15);
        $("#ddd4_update").val(param16);
        $("#fone4_update").val(param17);
        $("#ddd5_update").val(param18);
        $("#fone5_update").val(param19);
        $("#endereco_update").val(param20);
        $("#bairro_update").val(param21);
        $("#cidade_update").val(param22);
        $("#cep_update").val(param23);
        $("#uf_update").val(param24);
        $("#matricula_1_update").val(param25);
        $("#cod_matricula_1_update").val(param26);
        $("#matricula_2_update").val(param27);
        $("#cod_matricula_2_update").val(param28);
        $("#banco_emp_update").val(param29);
        $("#credito_update").val(param30);
        $("#valor_update").val(param31);
        $("#status_update").val(param32);
        $("#retorno_update").val(param33);
        $("#observacao_update").val(param34);
    }
</script>

0

At the end of the block called by the modal, the page should end with exit();, because it will limit itself to calling only the block (I imagine by ajax) of the code.

EDIT: DO NOT USE THE HEADER! It does not return values. Use this page as AJAX, returning these values in a JSON, Array, mounted HTML, as you prefer. That might be your problem with the code.

  • But, that doesn’t make the ID load into the modal, right? That’s the problem. My list reports thousands of records, when I click on the view have to load the complete registration, based on the user ID of that line.

Browser other questions tagged php mysql modal id

You are not signed in. Login or sign up in order to post.