Bootstrap manners are not shown on my div that loads all my content with ajax

Question

Bootstrap manners are not shown on my div that loads all my content with ajax

Navigation

#1 by (2 votes)

0

I have an index with a navigation made with AJAX and thus load all the other pages within the div that has the index.php, so that the browser does not recharge.

My problem is when in that div I want to load a CRUD that uses the Bootstrap manners, since when opening them through a button they appear but it does not stay on the screen, that is, it appears and is deleted very fast.

This is what the index looks like. In the CRUD menu option, this function is executed in 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
        }
    });
}

In the HTML is the AJAX function that I execute when I click:

By clicking on the green button you must display the modal within div with the container ID but it only appears and vanishes very quickly. I do not know what I can do to make it work.

This is the code:

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

javascript jquery html5 bootstrap ajax

asked by Julio Flores 27.07.2017 в 22:49

source

1 answer

How to join tables in MySQL? Does PageCollectionView work differently in WPF with the ListCollectionView?

score 2 · Accepted Answer

What happens here is that when you inject the html that returns the ajax it has configured the modal classes of bootstrap so it is injected and bootstrap js hidden, what you should do is open the modal after the injection: in this way:

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
        }});
}

I hope it works for you!

Greetings!