Modal problems with jquery: Uncaught Typeerror: $(...). modal is not a Function

Asked

Viewed 4,911 times

-2

I don’t know what else I do to try to fix this mistake! Help me, please.

NOTE: JQUERY WORKS NORMAL BECAUSE I HAVE VALIDATIONS THERE. ONLY THE MODAL DOESN’T WORK, I DON’T KNOW WHY =/

        <!DOCTYPE html>
    <html lang="pt-br">
    <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">
        <title>...</title> 
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <script type="text/javascript" src="js-anuncio/cadastrese.js"></script>
        <link href="css-anuncio/style-cadastrese.css" rel="stylesheet">


    </head>
    <body>
        <div class="modal fade" id="modal-mensagem" style="display:none;">
       <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal"><span>×</span></button>
                     <h4 class="modal-title">Título da mensagem</h4>
                 </div>
                 <div class="modal-body">
                     <p>Conteúdo da mensagem</p>
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                 </div>
           </div>
        </div>
    </div>
[...]
<button type="button" class="btn btn-warning" onclick="waitingDialog.show();">Show dialog</button>

js:

$(document).ready(function(){

            $( "#esqueci" ).click(function() {
                $( "#princ" ).toggle( "slow" );
                $( "#sec" ).toggle( "hide" );
            });

            $( "#lembrei" ).click(function() {
                $( "#sec" ).toggle( "slow" );
                $( "#princ" ).toggle( "hide" );
            });

        $( "#criarConta" ).click(function(){
            $("#modal-mensagem").modal();
            if($('#nome_completo').val() == ''){

                $('#nome_completo').css({'border-color': '#A94442'});
                $( "#nome_branco" ).toggle( "hide" );

            }else{

                $('#nome_completo').css({'border-color': '#72ACE7'});
                if($('#senha').val() == ''){

                    $('#senha').css({'border-color': '#A94442'});
                    $( "#senha_branco" ).toggle( "hide" );


                }else{
                    $('#senha').css({'border-color': '#72ACE7'});

                }
                    var sEmail = $('#email').val();
                    if (!validateEmail(sEmail)){
                            $('#email').css({'border-color': '#A94442'});
                            $( "#erro_email" ).toggle( "hide" );

                        }else{

                            if($('#email').val() == ''){

                                $('#email').css({'border-color': '#A94442'});

                            }else{

                                $('#email').css({'border-color': '#72ACE7'});

                                var dados_cadastro = $('#cadCliente').serialize(); 
                                $.ajax({
                                        url: 'cadastro_cliente.php', 
                                        type: 'post',
                                        data: dados_cadastro,
                                        success: function(data) {
                                            if (data == "200"){

                                                $( "#su_cad" ).toggle( "hide" );
                                            } else if (data == "400"){

                                                $("#su_cad").html(data).toggle( "hide" );
                                            } else {

                                                $( "#su_cad" ).toggle( "hide" );
                                            }
                                        }
                                }); 
                            }
                        }
                    }    
                });
            });

        function validateEmail(sEmail) {
            var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
            if (filter.test(sEmail)) {
                return true;
            }
            else {
                return false;
            }
    }

inserir a descrição da imagem aqui

javascript jquery html twitter-bootstrap modal
  • 1

    With what you posted you can not check anything. You have to provide code that we can use to reproduce the problem.

  • Have you imported the full bootstrap script or customized it? Play it on the console and see the result typeof $.fn.modal if it is function

  • yes, I imported it complete.. I will post the full js code, hold on

  • posted the full JS code, you can verify?

  • Yeah, he’s in the head, and he’s the first to be charged =/

1 answer

0

My dear, you can solve it this way:

(function( $ ) {
    $(function() {

//codigo

 })(jQuery);

Thank you to all who are willing to help me!

Browser other questions tagged javascript jquery html twitter-bootstrap modal

You are not signed in. Login or sign up in order to post.