0

Tengo un index con una navegación hecha con AJAX y así cargar todos las demás páginas dentro del div que tiene el index.php, para que el navegador no se recargue.

Mi problema es cuando en ese div quiero cargar un CRUD que hace uso de los modales de Bootstrap, ya que al abrirlos a través de un botón aparecen pero no se mantiene en la pantalla, es decir, aparece y se borra muy rápido.

introducir la descripción de la imagen aquí

Así es como se ve el index. En la opción del menú CRUD, ahí se ejecuta esta función en AJAX:

function crud(){
    $.ajax({
        url : "php/crud.php",//valor obligatorio para solicitar el doc que se quiere cargar
        dataType : "text",
        success : function(data) {
            $("#container").html(data);//Id del contenedor para mostrar el archivo
        }
    });
}

En el HTML está la función AJAX que ejecuto al darle clic:

introducir la descripción de la imagen aquí

Al dar click en el botón verde se debe desplegar el modal dentro del div con el ID container pero solo aparece y se desvanece muy rápido. No sé qué puedo hacer para que funcione.

Éste es el código:

<h1>Este es la pagina principal</h1>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#" onclick="crud();">CRUD</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

<div class="container">
  <h3>Cargar contenido yo soy el index</h3>
    <div id="container">

    </div>
</div>
2
  • Por favor coloca el código que estás usando y revisa la redacción de tu pregunta. el 27 jul. 2017 a las 21:50
  • Es todo el codigo, en el menu nada mas esta una opcion que ejecuta la funcion crud(); <li><a href="#" onclick="crud();">CRUD</a></li> Y luego en el div que esta en el archivo index.php carga el contenido del crud.php el 27 jul. 2017 a las 22:01

1 respuesta 1

3

Lo que ocurre aquí es que cuando inyectas el html que te retorna el ajax este tiene configuradas las clases de modal de bootstrap por lo tanto se inyecta y bootstrap js te lo oculta, lo que debes hacer es abrir el modal luego de la inyección: de esta manera:

function crud(){
    $.ajax({
        url : "php/crud.php",//valor obligatorio para solicitar el doc que se quiere cargar
        dataType : "text",
        success : function(data) {
            $("#container").html(data);//Id del contenedor para mostrar el archivo
            $("#TuModalID").modal('show'); //Esto abrirá el modal que inyectaste
        }});
}

Espero que te funcione!

Saludos!

1
  • Gracias por las aportación. La verdad es que tenia un problemas con las CDN el orden no era el correcto. Gracias el 28 feb. 2018 a las 14:39

Tu Respuesta

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

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