Conflict Between Jquery And Bootstrap
I have a code where I am including jquery files and bootstrap files in the header.php. I am running into issues where if I include the jquery file before bootstrap.js file, it mess
Solution 1:
data-toggle="tab" for bootstrap means there has to have a [tab panel] for it, however, you only use it as nav, and it caused the problem.
Please read: http://getbootstrap.com/javascript/#tabs
Also, use js closure can more easier to avoid js conflict issue:
(function($){
....
})(jQuery);
Please check the code below, you can use WinMerge to compare the code with your own:
<!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><!--<style>{height:150px; width:1300px;}</style>--><metahttp-equiv="Content-Type"content="text/html; charset=UTF-8" /><METAHTTP-EQUIV="CACHE-CONTROL"CONTENT="Public"><title><?phpecho$page_title?></title><scriptsrc="http://code.jquery.com/jquery-1.10.2.min.js"type="text/javascript"></script><scriptsrc="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"type="text/javascript"></script><linkhref="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" ><!--<link href="css/style_header.css" >--></head><body><divclass="container"><divclass="row clearfix"><divclass="col-md-4 column"></div><divclass="col-md-8 column dbf"><h2>
DBA Factory
</h2></div></div><divclass="row clearfix"><divclass="col-md-12 column"><divclass="tabbable"id="tabs-775712"><ulclass="nav nav-tabs"><li><ahref="#panel-4">Home</a></li><li><ahref="#panel-4">Submit a project</a></li><li><ahref="#panel-4">All Projects</a></li><li><ahref="#panel-4">Innovative Ideas</a></li><li><ahref="#panel-5">Matchmaker</a></li><li><ahref="#panel-6">Meet the Team</a></li><liclass="dropdown"><aid="userlogin"role="button"data-toggle="dropdown"href="#">rdesai<spanclass="caret"</span></a><ulclass="dropdown-menu"role="menu"aria-labelledby="userlogin"><lirole="presentation"><arole="menuitem"tabindex="-1"href="#">Settings</a></li></ul></li></ul></div></div></div></div><scripttype="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>Solution 2:
Usually when i run into jquery and bootstrap conflicts, i just add this as the first line of my php file:
<script>jQuery.noConflict();</script>This is to avoid conflicts with other libraries.
You can read more here: https://api.jquery.com/jQuery.noConflict/
Edit:
Or use
<scriptsrc="http://code.jquery.com/ui/1.10.2/jquery-ui.min.js"type="text/javascript"></script>instead of 1.10.3
Post a Comment for "Conflict Between Jquery And Bootstrap"