admin管理员组

文章数量:1296311

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=".3.2/assets/css/bootstrap.css" rel="stylesheet">
<link href=".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="" 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=".min.js"></script>
<script type="text/javascript" src=".3.2/assets/js/bootstrap.js"></script>
</html>

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./2.3.2/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://getbootstrap./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./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./jquery.min.js"></script>
<script type="text/javascript" src="http://getbootstrap./2.3.2/assets/js/bootstrap.js"></script>
</html>
  • javascript
  • jquery
  • css
  • twitter-bootstrap
  • twitter-bootstrap-2
Share Improve this question edited Nov 20, 2013 at 16:12 zessx 68.8k29 gold badges138 silver badges164 bronze badges asked Oct 21, 2013 at 10:22 SpringLearnerSpringLearner 13.9k20 gold badges81 silver badges117 bronze badges 4
  • make sure you include jquery with a correct path – coolguy Commented Oct 21, 2013 at 10:24
  • @ubercooluk this is there <script type="text/javascript" src="code.jquery./jquery.min.js"></script> – SpringLearner Commented Oct 21, 2013 at 10:27
  • where is that..?i cant see – coolguy Commented Oct 21, 2013 at 10:31
  • @ubercooluk 3rd line from bottom – SpringLearner Commented Oct 21, 2013 at 10:32
Add a ment  | 

6 Answers 6

Reset to default 3

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./jquery.min.js"></script>
<script type="text/javascript" src="http://getbootstrap./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./jquery.min.js"></script>
<script type="text/javascript" src="http://getbootstrap./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./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.

本文标签： javascriptbootstrap alert not workingStack Overflow

版权声明：本文标题：javascript - bootstrap alert not working - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741616177a2388539.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。