0

Mi problema es el siguiente, en mi html tengo una table en la que hay un botón que debe acompañar la información de cada columna, el botón lo puse dentro de un form ya que por el método post es como obtengo el id de cada columna. Mi idea es que al oprimir cualquier boton, me abra un pop up con un formulario para actualizar de la información, pero, como ya he mencionado antes los botones están dentro de un form, y el pop up se abre por el onaction, pero se cierra por que el form refresca la pagina.

Asi se encuentra mi tabla (dentro de un for para que se rellene la tabla).

<tr>
    <td><?=$inmueble[$var]['nomenclatura']?></td>
    <td><?=$inmueble[$var]['ubicacion']?></td>
    <td><?=$inmueble[$var]['id_tipo_inmueble']?></td>
    <td><?=$inmueble[$var]['area']?></td>
    <td><?=$inmueble[$var]['descripcion']?></td>
    <td><?=$inmueble[$var]['coeficiente']?></td>
    <td><?=$inmueble[$var]['chip_catastral']?></td>
    <td><?=$inmueble[$var]['matri_inmo']?></td>
    <td><?=$inmueble[$var]['id_propietario']?></td>
    <td><?=$inmueble[$var]['id_residente']?></td>
    <td>
        <form method="POST">
            <input type="hidden" name="id" value="<?=$inmueble[$var]['id']?>">
            <button onclick="document.getElementById('editInmu').style.display='block'" class="button edit">Editar</button>
        </form>
    </td>
</tr>

Este es mi pop up (Es un div con display none y con el botón cambia a block).

<div id="editInmu" class="agregarInmu">
    <div class="contenidoPop  animate">
        <span onclick="document.getElementById('editInmu').style.display='none'" class="cerrarPop">&times;</span>
        <h2 class="p1">Actualizar Inmueble</h2>
        <form method="POST" class="item  i-b  v-top  ph12  center">
            <input type="text" name="nomen" placeholder="Numero Inmueble" value=" <?=$inmueble[0]['nomenclatura']?>" required>
            <input type="text" name="ubi" placeholder="Ubicacion" required>
            <input type="text" name="tipInmu" placeholder="Tipo Inmueble" required>
            <input type="text" name="area" placeholder="Area Inmueble" required>
            <input type="text" name="descr" placeholder="Descripcion" required>
            <input type="text" name="coef" placeholder="Coeficiente" required>
            <input type="text" name="chiCat" placeholder="Chip Catastral" required>
            <input type="text" name="matInmo" placeholder="Matricula Inmobiliaria" required>
            <input type="text" name="prop" placeholder="Propietario" required>
            <input type="text" name="res" placeholder="Residente" required>
            <div class="p_25">
                <input class=" button  add" type="submit" value="crear">
                <input type="hidden" name="crud" value="edit">
            </div>
        </form>
    </div>
</div>
3
  • Podrias usar Ajax.
    – alanfcm
    Commented el 30 ago. 2018 a las 22:05
  • métele el evento click() de jquery para mostrar .show() el popup. Y .hide() para cerrar el popup. Y nos dices si te funciona Commented el 31 ago. 2018 a las 9:44
  • Lo siento, podrian ser un poco mas especificos? Sucede que soy nuevo en esto jeje
    – user87296
    Commented el 31 ago. 2018 a las 13:10

2 respuestas 2

0

tendrias que crear un boton y una estructura de div por ejemplo :

<button type="button" id="button" onclick="abrirPopup">
   Abrir popup
</button>
<div id="popup-bg">
   <div id="popup-div-principal>
     <div class="cerrar-popup" title="cerrar el popup" onclick="cerrarPopup()">
        <p>X</p>
     </div>
   </div>
</div>

el primer div seria el fondo, osea le podes poner que sea negro semitrasparente para opacar el resto del contenido y sobretodo debe tener el display: none; y position: absolute; para que no se vea de entrada y para que puedas jugar con el top, botton, right y left para darle la posicion.

lo que falta ahora es hacerlo aparecer cuando le das click al boton y eso se hace de la siguiente manera :

 //JavaScript puro
 //agarramos el div de fondo 
 var miDiv = document.getElementById("popup-bg");

 function abrirPopup() {
    miDiv.style.display = "block";
 }

 function cerrarPopup() {
    miDiv.style.display = "none";
 }

EDIT

creas el div del popup adentro del ciclo for en el cual tomas los datos de la tabla

<body>
  <table>
     <tr>
        <th>titulo</th>
        <th>titulo 2 </th>
     </tr>
     <tr>
        <td>primera linea</td>
        <td><button id="boton">editar</button></td>
     </tr>
     <div class="popup-bg">
        <div class="main-popup">
          <input type="hidden" name="id" value="<?=$inmueble[$var]['id']?>">
        </div>
     </div>
  </table>
</body>

EDIT 2

o usando JQuery :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

function abrirPopup(){
      $("button#boton").on('click', function() {
          var row = $(this).closest('tr').index());
          $("div#popup-bg").toggle();
      }

y despues utilizas la variable row para tener el index del elemento que selecciono el utente y ahi tendrias que ver vos, sin ver el codigo php se me hace dificil decirte mas :) espero sirva de ayuda, exitos

5
  • Sucede que ya tengo eso, lo que no he podido hacer es pasar el ID al Pop Up
    – user87296
    Commented el 3 sept. 2018 a las 13:56
  • @SantiagoBueno ya que el popup es un <div> que esta presente al interno de la pagina, yo te diria que tomes el id directamente di ahi, sin necesidad del form --> <?=$inmueble[$var]['id']?>
    – Federico
    Commented el 3 sept. 2018 a las 14:26
  • Entiendo, pero como se haria eso? Lo que pasa es que no se como enviar ese dato al div
    – user87296
    Commented el 3 sept. 2018 a las 15:15
  • ahi tenes una opcion en la edicion que hice, en caso podrias tambien tramite un formulario, ahora hago otra edicion y ves cual te sirve mas y sobretodo si te sirven
    – Federico
    Commented el 3 sept. 2018 a las 15:19
  • Entiendo lo que me dices, muchas gracias, pero cuando pongo el pop up dentro del for, solo me recibe el id de la primera posicion
    – user87296
    Commented el 3 sept. 2018 a las 17:31
0

ACTUALIZADO

Podés hacerlo sin necesidad de un formulario, mediante llamadas AJAX desde Javascript.

Tu tabla tendría los botones algo así:

<td>
    <button onclick="mostrarPopUp(id)">Editar</button>
</td>

mostrarPopUp() es una función Javascript que recibe el ID de cada fila con el que se consulta la información. Bien puede ser obtenido accediendo al DOM (tal cual lo estás haciendo) o ser un valor incrustado a la hora de generar la tabla (si ésta fuese dinámica).

Y en tu Javascript:

mostrarPopUp = function(idRecibido) {
    // Llamada AJAX pasando el id...
    // Actualizar la información del PopUp
    // Mostrar PopUp
}

Siguiendo ese orden, harías una llamada a tu almacén de datos mediante AJAX, algo como esto (muy genérico en jQuery, ya que no sé cómo estás haciendo tu llamada):

$.get(
  'http://mi.api.com/getCosas', // URL del almacén a consultar
  { id: idRecibido }, // Se le pasa el parámetro
  function (data, status) { // Función callback que recibe los datos
    // Rellenar los datos del PopUp: data.valor1, data.valor2...
  }
);

Y luego podrías mostrar el PopUp con un show():

$('#idPopUp').show();

Si bien no es la opción más reutilizable (ni la más eficiente, seguramente), sí es la más sencilla y que menos librerías necesita. De hecho, se podría hacer incluso sin jQuery, pero me parece mas engorroso.

2
  • Disculpa, podrias explicar mas a fondo esto?
    – user87296
    Commented el 3 sept. 2018 a las 13:39
  • Okas, actualizo la respuesta. Commented el 4 sept. 2018 a las 6:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.