javascript - Conflict between jquery and bootstrap -
i have code including jquery files , bootstrap files in header.php. running issues if include jquery file before bootstrap.js file, messes other tabs on webpage , if click on other tabs not navigate me.
i think there conflict between jquery , bootstrap. pasting header.php file below more reference.
header.php
<?php require_once "essentials.php"; //error_reporting(~0); //ini_set('display_errors', 1); ?> <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--<style>{height:150px; width:1300px;}</style>--> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="cache-control" content="public"> <title><?php echo $page_title?></title> <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js" type="text/javascript"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <script src="script_dbafactory.js?<?php echo rand(0,511);?>"></script> <link href="css/bootstrap.css" rel="stylesheet"> <!--<link href="css/style_header.css" rel="stylesheet">--> </head> <body> <div class="container"> <div class="row clearfix"> <div class="col-md-4 column"> <img alt="logo" src="./images/source.png"> </div> <div class="col-md-8 column dbf"> <h2> dba factory </h2> </div> </div> <div class="row clearfix"> <div class="col-md-12 column"> <div class="tabbable" id="tabs-775712"> <ul class="nav nav-tabs"> <li> <a href="../dbafactory/home_page.php?sub=1" data-toggle="tab">home</a> </li> <li> <a href="../dbafactory/form_page.php?sub=2" data-toggle="tab">submit project</a> </li> <li> <a href="../dbafactory/view_table.php?sub=3" data-toggle="tab">all projects</a> </li> <li> <a href="#panel-4" data-toggle="tab">innovative ideas</a> </li> <li> <a href="#panel-5" data-toggle="tab">matchmaker</a> </li> <li> <a href="#panel-6" data-toggle="tab">meet team</a> </li> <div class="dropdown"> <?php include "userlogin.php"; ?> </div> </ul> </div> </div> </div> </div> </body> <!--<script type="text/javascript"> //script implement tabs $('#mytab a').click(function (e) { e.preventdefault() $(this).tab('show') }) </script>--> <script> $.noconflict(); $(document).ready(function (){ $('.dropdown-toggle').dropdown(); $('#userlogin').dropdown('toggle'); }); </script> can please let me know how solve issue? , how should load js , css files avoid issues webpage.
thanks
data-toggle="tab" bootstrap means there has have [tab panel] it, however, use nav, , caused problem.
please read: http://getbootstrap.com/javascript/#tabs
also, use js closure can more easier avoid js conflict issue:
(function($){ .... })(jquery); please check code below, can use winmerge compare code own:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--<style>{height:150px; width:1300px;}</style>--> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="cache-control" content="public"> <title><?php echo $page_title ?></title> <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js" type="text/javascript"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"> <!--<link href="css/style_header.css" rel="stylesheet">--> </head> <body> <div class="container"> <div class="row clearfix"> <div class="col-md-4 column"> </div> <div class="col-md-8 column dbf"> <h2> dba factory </h2> </div> </div> <div class="row clearfix"> <div class="col-md-12 column"> <div class="tabbable" id="tabs-775712"> <ul class="nav nav-tabs"> <li> <a href="#panel-4">home</a> </li> <li> <a href="#panel-4">submit project</a> </li> <li> <a href="#panel-4">all projects</a> </li> <li> <a href="#panel-4">innovative ideas</a> </li> <li> <a href="#panel-5">matchmaker</a> </li> <li> <a href="#panel-6">meet team</a> </li> <li class="dropdown"> <a id="userlogin" role="button" data-toggle="dropdown" href="#">rdesai<span class="caret"</span></a> <ul class="dropdown-menu" role="menu" aria-labelledby="userlogin"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">settings</a></li> </ul> </li> </ul> </div> </div> </div> </div> <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script> (function($){ $(document).ready(function (){ $('.dropdown-toggle').dropdown(); $('#userlogin').dropdown('toggle'); }); })(jquery); </script> </body> </html>
Comments
Post a Comment