How to correctly create a modal to make data change using w3

0

I would like to know how to implement a modal to receive the change data. I'm using w3 . In the Picture Below when the user presses the button AWAY has to open a MODAL with the patient's line information. Name, tel, his health plan, plan card etc ..

Theoretically I have to make a php request for popular modal, but the problem is that I do not know where to place this request or if the form I'm calling modal for that case is wrong Home Below I show what I call ANOTHER MODE when I press the FIX button 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 above code shows this MODAL

ThecodeIusetoproduceMODAISlookslikethis:

<divclass="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 above code is a prototype for the MODAL in question that I am trying to do. This code is in a .php file. He is on the page of MARKED CONSULTATIONS:

<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 the php code in status_paciente_modal.php to make the connection and mount the MODAL with the patient data, this code does not work correctly because when the MARKED CONSULTS page enters, the code of the include status_paciente_modal.php is triggered and of the error on the page.

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

<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>

Then in the patient status function, I get 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. There a friend my programmer always says ..:
"GOOD CODE IS THAT WORKS"
I know that when we are being preached by TIME / BOSS this is quite true. :) But right now this is NOT the case :). Then I return the original POST question .. How / Where should I implement php code to make a query in base is popular MODAL?
Because as I said before although I know how to do php queries and call them in various places and in various ways, in this particular situation did not succeed. Certainly for my lack of language experience :) I hope I have exposed my NEED clearly. If someone understands and can synthesize it would be cool :) and I would appreciate :). If someone "THINK" who understood my need please .. do not change anything .. write me and I will try to explain otherwise :)
Hugs to all:)

    
asked by anonymous 03.01.2018 / 19:03

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 in the table is referred to a id of the database, generated by while . (This code is missing, but we assume it is)

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

Now move on to script

First you should check if you loaded it, so the code would be:

$(".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 move to buscar_modal.php

The beginning of the file should begin with the verification of the variable sent, whether it was received or not

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

This will check if it was sent. Next we will select the desired line from the database.

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, you only have to display 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>

This will display what you want.

    
05.01.2018 / 22:08