Búsqueda de sitios web

javascript - TypeError: $ (...).modal no es una función con bootstrap Modal

Tengo un modal de Bootstrap 2.32 que estoy intentando insertar dinámicamente en el HTML de otra vista. Estoy trabajando con Codeigniter 2.1. Siguiendo 'Insertando dinámicamente una vista parcial de modal de Bootstrap en una vista', tengo:

<div id="modal_target"></div>

como el div objetivo para la inserción. Tengo un botón en mi vista que se ve así:

     <a href="#message" class="btn btn-large btn-info" data-action="Message" data-toggle="tab">Message</a>

Mi JS tiene:

$.ajax({
    type    : 'POST', 
    url     : "AjaxUpdate/get_modal",
    cache   : false,
    success : function(data){ 
       if(data){
            $('#modal_target').html(data);

            //This shows the modal
            $('#form-content').modal();
       }
    }
});

El botón de la vista principal es:

<div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary btn-large">Modal powers, activate!</a></p></div>

Aquí está lo que me gustaría almacenar por separado como una vista parcial:

<div id="form-content" class="modal hide fade in" style="display: none;">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Send me a message</h3>
    </div>
    <div class="modal-body">
        <form class="contact" name="contact">
             <fieldset>

               <!-- Form Name -->

            <legend>modalForm</legend>

            <!-- Text input-->
            <div class="control-group">
              <label class="control-label" for="user">User</label>
              <div class="controls">
                <input id="user" name="user" type="text" placeholder="User" class="input-xlarge" required="">
                <p class="help-block">help</p>
              </div>
            </div>

            <!-- Text input-->
            <div class="control-group">
              <label class="control-label" for="old">Old password</label>
              <div class="controls">
                <input id="old" name="old" type="text" placeholder="placeholder" class="input-xlarge">
                <p class="help-block">help</p>
              </div>
            </div>

            <!-- Text input-->
            <div class="control-group">
              <label class="control-label" for="new">New password</label>
              <div class="controls">
                <input id="new" name="new" type="text" placeholder="placeholder" class="input-xlarge">
                <p class="help-block">help</p>
              </div>
            </div>

            <!-- Text input-->
            <div class="control-group">
              <label class="control-label" for="repeat">Repeat new password</label>
              <div class="controls">
                <input id="repeat" name="repeat" type="text" placeholder="placeholder" class="input-xlarge">
                <p class="help-block">help</p>
              </div>
            </div>



                </fieldset>
        </form>
    </div>


    <div class="modal-footer">
        <input class="btn btn-success" type="submit" value="Send!" id="submit">
        <a href="#" class="btn" data-dismiss="modal">Nah.</a>
    </div>
</div>

Cuando hago clic en el botón, el modal se inserta correctamente, pero obtengo el siguiente error:

TypeError: $(...).modal is not a function

¿Cómo puedo arreglar esto?

Respuesta #1

Solo quiero enfatizar lo que mwebber dijo en el comentario:

también verifica si jQuery no está incluido dos veces

:)

ese fue el problema para mí

Respuesta #2

Este error es en realidad el resultado de no incluir el JavaScript de bootstrap antes de llamar a la función modal. Modal está definido en bootstrap.js, no en jQuery. También es importante notar que bootstrap realmente necesita jQuery para definir la función modal, por lo que es vital que incluyas jQuery antes de incluir el JavaScript de bootstrap. Para evitar el error, solo asegúrate de incluir jQuery y luego el JavaScript de bootstrap antes de llamar a la función modal. Normalmente hago lo siguiente en mi etiqueta header:

<header>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="/path/to/bootstrap/js/bootstrap.min.js"></script>
</header>

Respuesta #3

Después de enlazar tu jquery y bootstrap, escribe tu código justo debajo de las etiquetas Script de jquery y bootstrap.

$(document).ready(function($) {
  $("#div").on("click", "a", function(event) {
    event.preventDefault();
    jQuery.noConflict();
    $('#myModal').modal('show');

  });
});
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Respuesta #4

He resuelto este problema en React usándolo de esta manera.

window.$('#modal-id').modal();

Artículos relacionados