1

Buenas, dejare por aqui mi código, he revisado y nada, no sé por que no funciona pense que era algo que habia escrito mal el script pero no sé por que no funciona y lo copié de la página de bootstrap solo cambiandole el id.

Archivo index.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="librerias/bootstrap/css/bootstrap.css">
<!-- Alertify -->
<link rel="stylesheet" type="text/css" href="librerias/alertify/css/alertify.css">
<link rel="stylesheet" type="text/css" href="librerias/alertify/css/themes/default.css">

<!-- CSS propio -->
<link rel="stylesheet" type="text/css" href="css/main.css">

<!-- FontAwsome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- alertify, jquery y bootstrap JS -->
<script src="librerias/jquery/jquery-3.2.1.min.js"></script>
<script src="librerias/bootstrap/js/bootstrap.js"></script>
<script src="librerias/alertify/alertify.js"></script>


<title>Visualización de la Base de Datos NAW</title>
</head>
<body>

<div class="container">
    <div id="tabla"></div>
</div>

    <!-- Modal para registros nuevos -->


    <div class="modal fade" id="modalNuevo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Agrega nueva persona</h4>
        </div>
        <div class="modal-body">
            <label>Nombre</label>
            <input type="text" name="" id="nombre" class="form-control input-sm">
            <label>Apellido</label>
            <input type="text" name="" id="apellido" class="form-control input-sm">
            <label>Email</label>
            <input type="text" name="" id="email" class="form-control input-sm">
            <label>telefono</label>
            <input type="text" name="" id="telefono" class="form-control input-sm">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal" id="guardarnuevo">
          Agregar
          </button>

        </div>
      </div>
    </div>
  </div>

  <!-- Modal para edicion de datos -->

  <div class="modal fade" id="modalEdicion" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Actualizar datos</h4>
        </div>
        <div class="modal-body">
            <input type="text" hidden="" id="idpersona" name="">
            <label>Nombre</label>
            <input type="text" name="" id="nombreu" class="form-control input-sm">
            <label>Apellido</label>
            <input type="text" name="" id="apellidou" class="form-control input-sm">
            <label>Email</label>
            <input type="text" name="" id="emailu" class="form-control input-sm">
            <label>telefono</label>
            <input type="text" name="" id="telefonou" class="form-control input-sm">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-warning" id="actualizadatos" data-dismiss="modal">Actualizar</button>

        </div>
      </div>
    </div>
  </div>

</body>
</html>

<!-- Jquery en el cual llamamos a la tabla -->
<script type="text/javascript">
$(document).ready(function(){
     $('#tabla').load('components/tabla.php');
});
</script>

Archivo tabla.php

<!-- Titulo con clase de bootstrap -->
<h1 class="display-4" id="titulo"> Visualización de Datos</h1>

<div class="row">
<div class="col-sm-12">
    <caption>
      <button class="btn btn-primary"  data-toggle="modal" data-target="#modalNuevo" id="margen_inf"> Agregar Nuevo
          <span class="fa fa-plus-circle"></span>
      </button>
     </caption>

<!-- Table-hover sombrea celdas -->
<!-- table-condensed para que se vea mas comprimido -->
<!-- Parezca una celda la tabla -->
<table class="table table-hover table-condensed  table-bordered"> 

<tr>
  <td>ID</td>
  <td>Nombre y Apellido</td>
  <td>Teléfono</td>
  <td>Correo</td>
  <td>Comuna</td>
  <td>Creado</td>
  <td>Actualizado</td>
  <!-- Columnas extra para edición y eliminación -->
  <td>Editar</td>
  <td>Eliminar</td>
</tr>

<!-- Para ser llenado por PHP -->
<tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <!-- Editar y Eliminar -->
  <td>
   <button class="btn btn-warning fa fa-pencil" data-toggle="modal" data-target="#modalEdicion" ></button>
  </td> 
  <td>
   <button class="btn btn-danger fa fa-trash"></button>
  </td>
</tr>
</table>
</div>
</div>
2
  • No estoy 100% seguro, pero creo que como estas añadiendo elementos HTML dinamicamente, tendras que abrir el modal desde JQuery (lo cual no tiene complicación alguna, solo tienes que aplicar la delegación de eventos correctamente) Commented el 6 sept. 2017 a las 21:31
  • gracias amigo, intente eso que me dijste y nada pero ya resolvi :D me respondo a mi mismo, habia descargado el dist de bootstrap y en modo desarrollador vi que faltaba algo del popper.js asi que me descargue el bootstrap que tiene de todo como sin compilar y saque de ahi el popper.min.js y lo llame desde mi index.php y ya :D
    – Naoto
    Commented el 7 sept. 2017 a las 13:54

1 respuesta 1

1

La respuesta es:

habia descargado el "Compiled CSS and JS" de bootstrap y en modo desarrollador (inspeccionando el elmento clic derecho en mi boton por si acaso) vi que faltaba algo del popper.js que a bootstrap le hacia falta asi que me descargue el bootstrap que tiene de todo como sin compilar "Source files" y saque de ahi el popper.min.js (en la ruta: bootstrap-4.0.0-beta.zip\bootstrap-4.0.0-beta\assets\js\vendor)y lo llame desde mi index.php antes del script de bootstrap ( ) y ya :D

Explico asi por si hay algun novato como yo jeje

2
  • Me alegra que encontraras solucion. Mira Cómo responder para mejorar la calidad de tu respuesta. Y pasadas 12 horas podras aceptar tu propia respuesta como aceptada. Un saludo
    – lois6b
    Commented el 7 sept. 2017 a las 13:59
  • Edita tu respuesta para mostrar los cambios al código original. De modo que sea una auto respuesta completa
    – DEVX75
    Commented el 5 may. 2022 a las 23:34

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.