How to create a modal correctly to change data using W3

Asked

Viewed 246 times

0

I would like to know how to implement a modal to receive the change data. I am using the W3. In Image Below when the user presses the ABSENT button has to open a MODAL with the information of the patient of the line. Name, tel, his health insurance, card number etc.
inserir a descrição da imagem aqui

Theoretically I have to make a php request to popular modal, but the problem is that I don’t know where to put this request or if the way I’m calling the modal for this case is wrong
Below I show how I call ANOTHER MODAL when I press the button SNAP HTML

    <td> <input type="button" class="add"
         onClick="chama_consulta_01_modal('',
                                          '{$row['id_m_h']}','{$diaN}',
                                          'atendimento')" 
         value="ENCAIXE"></td>

JAVASCRIPT

function chama_consulta_01_modal(id_linha_tabs,id_m_h, dia,veio_de)
{   
  document.getElementById('id_consulta_01_modal').style.display='block';
  document.getElementById('id_veio_de').innerHTML = veio_de;    
  document.getElementById("id_m_h_div").innerHTML = id_m_h;
  document.getElementById("data_div").innerHTML = 
           document.getElementById("id_data_atual").innerHTML;
  document.getElementById("index_tab_div").innerHTML = dia;
};

The code above shows this MODAL inserir a descrição da imagem aqui

The code I use to produce MODAIS is like this:

<div class="w3-container">
    <div id="id_consulta_atendimento_02_modal" class="w3-modal" style="padding-top:200px">
        <div class="w3-modal-content">
            <center>   
            <header class="w3-container w3-teal"> 
                <span onclick="document.getElementById('id_consulta_atendimento_02_modal').style.display = 'none'" 
                      class="w3-button w3-display-topright">&times;
                </span>

                <h2>STATUS PACIENTE</h2>                
            </header>
                </center>  
            <div class="w3-container">                

                <div class="row"><br>
                    <div class="col-md-1"></div>
                    <div class="col-md-10" style="text-align: center">
                        <div class="form-group">                            
                            <b><font color="blue" size="3"><label  id="id_ca02m_nome_paciente"><></font><b>                            
                        </div>
                    </div>     
                </div><br>
                <fieldset>
                    <legend>CONVÊNIO...:</legend>
                    <div class="row">

                        <div class="col-md-4">
                            <select name="cb_convenio" class="form-control" id="id_cb_convenio" autofocus style="width:90%;" required="true">
                                <option value="0" disabled selected hidden> 
                                    SELECIONE
                                </option>  
                                <?php include 'consulta_atendimento_02_modal_cb_convenio.php'?>                                                                                                    
                            </select>
                        </div>     
                    </div><br>
                </fieldset>                

                <br>
                <div class="row" align="center">
                    <div class="col-md-12">                     
                        <button onclick="document.getElementById('id_consulta_atendimento_02_modal').style.display = 'none'" type="button" class="w3-button w3-red">FECHAR</button>                     
                    </div>
                </div>
            </div>
            <br>
            <footer class="w3-container w3-teal">
                <p>Modal Footer</p>
            </footer>
        </div>
    </div>
</div>

The code above is a prototype for the MODAL in question that I’m looking to do. This code is in a file .php. It is on the page of MARKED QUERIES: 

<html CONSULTAS MARCADAS>

<body>
  CÓDIGO..CÓDIGO..
CÓDIGO..CÓDIGO..CÓDIGO..
 <?php include 'selecionar_paciente_modal.php' ?>
 <?php include 'status_paciente_modal.php' ?>
 <script>
    CÓDIGO..CÓDIGO..
 </script>

</body>
</html>

When I put php code in the status_paciente_modal.php to connect and assemble the MODAL with the patient data, this code does not work properly because when the MARKED QUERIES page enters, the include status_paciente_modal.php code is triggered and the error on the page.

One way I found was to put attributes in the boot:

<td>
<input type='button' class='add A' 
      data-paciente_nome="<?php echo ($row['nome']);?>" 
      data-paciente_cpf="<?php echo ($row['cpf']);?>" 
      data-id_convenio="<?php echo($row['id_convenio_fk']); ?>"
      id_consulta_ca_01_busca ="<?php echo($row['tem_consulta']);?>"                                                 
      onclick= status_paciente(self)
      value='AUSENTE'>
</td>

Ai in the patient status function caught these attributes: 

 function status_paciente(botao)
{                 
document.getElementById('id_consulta_atendimento_02_modal').style.display='block';
document.getElementById("id_ca02m_paciente_nome").innerHTML = 
                        botao.getAttribute('data-paciente_nome');
document.getElementById("id_ca02m_paciente_cpf").innerHTML = 
                        botao.getAttribute('data-paciente_cpf');
document.getElementById("id_cb_convenio_02_modal").value = 
                        botao.getAttribute('data-id_convenio');
}

Running the above code works. Ai a friend of mine programmer always says..:
"GOOD CODE IS THE ONE THAT WORKS"
I know that when we are being bullied by TIME/ CHIEF it is very true. :)
But right now it’s NOT the case :).
Then I return to the original question of the POST.. How/Where should I implement php code to make a consultation at the base is popular the MODAL?
Because as I said before despite knowing how to make php queries and call them in various places and in various ways, in this particular situation I did not succeed. Certainly for my lack of language experience :) I hope I’ve made my need clear.
If someone understands and succeeds to synthesize it would be cool :) and I would appreciate :).
If someone "THINK" who understood my need please.. do not change anything.. write to me and I will try to explain otherwise :)
Hug to all :)

php javascript w3.css

  • If you’re willing to use JQuery, recommend ajax()

  • Good morning @I_like_trains . Thanks for the tip :). Would you have an example of what you’re talking about.. or something to read?? Hugs

  • Here is the documentation of ajax, I will give an example soon http://api.jquery.com/jquery.ajax/

1 answer

0

In ajax(), you can run php that comes out of the file.

Let’s start at the beginning.

If I understand correctly, each row of the table is referred to a id of the database, generated by while. (This code is missing but we assume it is so)

We will give the name for example $dados, thus the variable that receives the data from the while, on the button you press, add data-id="<?=$dados['id']; ?>", thus all lines were identified and never equal.

Now let’s move on to script

First you should check if you clicked there, that would be the code:

$(".add").click(function(){       //Visto que o botão tem esta `class`, podemos ir buscar assim
  var id = $(this).data("id");    //O $(this) irá buscar a seguinte informação de onde carregou
$.ajax({
  url: "buscar_modal.php",        //Ficheiro onde iremos buscar as informações
  data: "id="+id,
  type: "POST",
  success: function(e){           //Variável e servirá para escrever no modal ou mostrar erros, se houver
    console.log(e);               
    $("#id_consulta_atendimento_02_modal").html(e);
  }
})
});

The script is done, now let’s go to buscar_modal.php

The start of the file must start with checking the sent variable, whether it was received or not

if(isset($_POST['id'])){

With this you will check if it was sent. Next we will select from the database the desired line.

I’ll assume you’re using mysqli.

require "ligacao.php";
$select=mysqli_query($db, "SELECT * FROM nome_tabela where id = '".$_POST['id']."'") or die ("Erro 01");
$mostra=mysqli_fetch_assoc($select);

With the selected line only present it.

<div class="w3-modal-content">
    <center>   
    <header class="w3-container w3-teal"> 
        <span onclick="document.getElementById('id_consulta_atendimento_02_modal').style.display = 'none'" 
              class="w3-button w3-display-topright">&times;
        </span>

        <h2>STATUS PACIENTE</h2>                
    </header>
        </center>  
    <div class="w3-container">                

        <div class="row"><br>
            <div class="col-md-1"></div>
            <div class="col-md-10" style="text-align: center">
                <div class="form-group">                            
                    <b><font color="blue" size="3"><?=$mostra['nome']; ?></font><b>                            
                </div>
            </div>     
        </div><br>
        <fieldset>
            <legend>CONVÊNIO...:</legend>
            <div class="row">

                <div class="col-md-4">
                    <select name="cb_convenio" class="form-control" id="id_cb_convenio" autofocus style="width:90%;" required="true">
                        <option value="0" disabled selected hidden> 
                            //Executar um while com as informações desejadas
                        </option>  

                    </select>
                </div>     
            </div><br>
        </fieldset>                

        <br>
        <div class="row" align="center">
            <div class="col-md-12">                     
                <button onclick="document.getElementById('id_consulta_atendimento_02_modal').style.display = 'none'" type="button" class="w3-button w3-red">FECHAR</button>                     
            </div>
        </div>
    </div>
    <br>
    <footer class="w3-container w3-teal">
        <p>Modal Footer</p>
    </footer>
</div>

With this you will present what you want.

  • Good morning @I_like_trains . Very cool the link you passed so I can read. Thank you. Very cool example :) A question: Does the "PARAMETROS" of $.ajax({ , , , }) have to have an order??? I use this function but in a different way and with the parameters in a different order. And the way I use the Success paremeter: Function(e){ } I return an echo from the page . php which is an id or word. I didn’t know it was possible to return $("#id_consulta_attendance_02_modal"). html(e); On Monday (08/11/2018) I’ll make another page the way you demonstrated :) . Thanks and Hugs.

  • The parameters can have any order, but in terms of organization, leave the success last

Browser other questions tagged php javascript w3.css

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