bootstrap alert not working

StackOverflow https://stackoverflow.com/questions/19491892

質問

I am trying to make an alert using bootstrap and its not wokring. In the mozilla firebug console its showing 

ReferenceError: $ is not defined


$('#openAlert').click(function () {

The code is as follows.May i know what is missing.I am including jquery as well as bootstrap js files.

<head>
<title>Twilio Messages (Send message Example)</title>
<meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="span12">
                <h2>Twilio Messages (Send message Example)</h2>
                <form class="form-signin" action="#Twilio" method="post">
                    <div class="row">
                        <div class="span3">
                            Enter Number to send:
                        </div>
                        <div class="span3">
                            <input type="text" name="toNumber" maxlength="10" placeholder="Enter 10 digits number to send" value="+16822037149"/>
                        </div>
                        <div class="span6">
                            <div class="alert">
                                <button type="button" class="close" data-dismiss="alert">&times;</button>
                                The number to send an SMS to. This field accepts formatted and unformatted US numbers, e.g. +14155551212, (415) 555-1212 or 415-555-1212.<hr />
                                To send message from SandBox Account. The Number has to be <a href="https://www.twilio.com/user/account/phone-numbers/verified" target="_blank">verified</a>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="span3">
                            Enter Message to send:
                        </div>
                        <div class="span3">
                            <textarea name="body" maxlength="160" placeholder="Enter message to send">
                            </textarea>
                        </div>
                        <div class="span6">
                            <div class="alert">
                                <button type="button" class="close" data-dismiss="alert">&times;</button>
                                The text of the message you want to send, limited to 160 characters.
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="span3">
                        </div>
                        <div class="span9">
                            <button class="btn" type="submit" id="openAlert">Send</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>


 <div id="le-alert" class="alert alert-warn alert-block fade">
      <button href="#" type="button" class="close">&times;</button>
      <h4>Alert title</h4>
      <p>Roses are red, violets are blue...</p>
    </div>
    </div>
<script type="text/javascript">
$('#openAlert').click(function () {
      $('#le-alert').addClass('in'); // shows alert with Bootstrap CSS3 implem
    });

    $('.close').click(function () {
      $(this).parent().removeClass('in'); // hides alert with Bootstrap CSS3 implem
    });
</script>

</body>
<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
</html>
役に立ちましたか？

解決

Include your scripts to <head></head> and then use alert()or whatever you library call you are making,

As you are calling the library functions before loading library

$('#openAlert').click(function () {
      $('#le-alert').addClass('in'); //
.................

should be *after* 

<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>

Remember: You need to include JS library first and then you can use the functions as $ is to be initialized

他のヒント

This should work:

<div id="le-alert" class="alert alert-warn alert-block fade">
      <button href="#" type="button" class="close">&times;</button>
      <h4>Alert title</h4>
      <p>Roses are red, violets are blue...</p>
    </div>
    </div>

    <script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<script type="text/javascript">
$('#openAlert').click(function () {
      $('#le-alert').addClass('in'); // shows alert with Bootstrap CSS3 implem
    });

    $('.close').click(function () {
      $(this).parent().removeClass('in'); // hides alert with Bootstrap CSS3 implem
    });
</script>
</body>
</html>

Please make sure to include jquery before calling any jquery dependencies and custom functions based on jquery.

You need to include a script reference to jQuery.

<script src="scripts/jquery.js">

You forget the jQuery add to head before bootstrap.js:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  1. Make sure you imported jQuery plugin in your code
  2. Make sure jQuery plugin is loaded before using(wrapping inside document handler function).

The simplest check to verify jQuery is loaded or not is

if (typeof jQuery != 'undefined') {  
    // do operation's here
}

Or

if (window.jQuery) {
    // jQuery is available.
}

DEMO

Your reference to the jQuery file needs to be placed just before your script that uses the $ function.

You have got it nearly right by placing all your js at the bottom.

But you need to make sure that the jQuery file is referenced before anything else that is going to try and use it.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top