twitter bootstrap - My jQuery files won't load in any browser -
i'm trying build website templates using bootstrap can't load of js files have in distant servers. i've tried whole lot of solutions website suggesting, in vain : when refresh webpage, no js file appears in resources.
here's how looks :
<head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> <link href="css/shop-homepage.css" rel="stylesheet"> <link href="css/3-col-portfolio.css" rel="stylesheet"> <script href="js/bootstrap.js"></script> <script href="js/grindhouseleather.js"></script> <script href="js/jquery.js"></script> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>grindhouse leather</title> </head> the body of signup form i'm working on :
<?php include 'header.php' ?> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3"> <form role="form"> <h2>please sign <small>it's free , be.</small></h2> <hr class="colorgraph"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-6"> <div class="form-group"> <input type="text" name="first_name" id="first_name" class="form-control input-lg" placeholder="first name" tabindex="1"> </div> </div> <div class="col-xs-12 col-sm-6 col-md-6"> <div class="form-group"> <input type="text" name="last_name" id="last_name" class="form-control input-lg" placeholder="last name" tabindex="2"> </div> </div> </div> <div class="form-group"> <input type="text" name="display_name" id="display_name" class="form-control input-lg" placeholder="display name" tabindex="3"> </div> <div class="form-group"> <input type="email" name="email" id="email" class="form-control input-lg" placeholder="email address" tabindex="4"> </div> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-6"> <div class="form-group"> <input type="password" name="password" id="password" class="form-control input-lg" placeholder="password" tabindex="5"> </div> </div> <div class="col-xs-12 col-sm-6 col-md-6"> <div class="form-group"> <input type="password" name="password_confirmation" id="password_confirmation" class="form-control input-lg" placeholder="confirm password" tabindex="6"> </div> </div> </div> <div class="row"> <div class="col-xs-4 col-sm-3 col-md-3"> <span class="button-checkbox"> <button type="button" class="btn" data-color="info" tabindex="7">i agree</button> <input type="checkbox" name="t_and_c" id="t_and_c" class="hidden" value="1"> </span> </div> <div class="col-xs-8 col-sm-9 col-md-9"> clicking <strong class="label label-primary">register</strong>, agree <a href="#" data-toggle="modal" data-target="#t_and_c_m">terms , conditions</a> set out site, including our cookie use. </div> </div> <hr class="colorgraph"> <div class="row"> <div class="col-xs-12 col-md-6"><input type="submit" value="register" class="btn btn-primary btn-block btn-lg" tabindex="7"></div> <div class="col-xs-12 col-md-6"><a href="#" class="btn btn-success btn-block btn-lg">sign in</a></div> </div> </form> </div> </div> <!-- modal --> <div class="modal fade" id="t_and_c_m" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="mymodallabel">terms & conditions</h4> </div> <div class="modal-body"> <!-- terms , conditions go here --> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">i agree</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> </div> and here jquery script i'm trying use :
$(function () { $('.button-checkbox').each(function () { // settings var $widget = $(this), $button = $widget.find('button'), $checkbox = $widget.find('input:checkbox'), color = $button.data('color'), settings = { on: { icon: 'glyphicon glyphicon-check' }, off: { icon: 'glyphicon glyphicon-unchecked' } }; // event handlers $button.on('click', function () { $checkbox.prop('checked', !$checkbox.is(':checked')); $checkbox.triggerhandler('change'); updatedisplay(); }); $checkbox.on('change', function () { updatedisplay(); }); // actions function updatedisplay() { var ischecked = $checkbox.is(':checked'); // set button's state $button.data('state', (ischecked) ? "on" : "off"); // set button's icon $button.find('.state-icon') .removeclass() .addclass('state-icon ' + settings[$button.data('state')].icon); // update button's color if (ischecked) { $button .removeclass('btn-default') .addclass('btn-' + color + ' active'); } else { $button .removeclass('btn-' + color + ' active') .addclass('btn-default'); } } // initialization function init() { updatedisplay(); // inject icon if applicable if ($button.find('.state-icon').length == 0) { $button.prepend('<i class="state-icon ' + settings[$button.data('state')].icon + '"></i>'); } } init(); }); }); the jquery.js 2.1.1 version, , don't error messages in browsers... what's wrong ? thank in advance !
replace script imports below , try:
<script src="js/bootstrap.js"></script> <script src="js/grindhouseleather.js"></script> <script src="js/jquery.js"></script> the script tag has 'src' attribute , not 'href'
Comments
Post a Comment