Conflict Between Jquery and Bootstrap

Conflict between jquery and bootstrap

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 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 a 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 the 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>

Bootstrap and jQueryUI Conflict

Ideal solution will be to take QueryUI without tooltip. This will work. In case you don't want to do that please include Bootstrap after JQueryUI. Ensure you have unique components from each (you can custom build both libraries with required components)

Bootstrap has a way to to reset any component like:

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

The above code will work when bootstrap is loaded after JQueryUI

Ref: http://getbootstrap.com/javascript/

Here is relevant code from Bootstrap:

  var old = $.fn.tooltip

  $.fn.tooltip = function (option) {
    ....
  }

  $.fn.tooltip.noConflict = function () {
    $.fn.tooltip = old
    return this
  }

jquery.js and bootstrap.js conflict

Put the jQuery before bootstrap.

<script src="<?php echo base_url('/assets/js/vendor/jquery-library.js');?>"></script>
<script src="<?php echo base_url('/assets/js/bootstrap.min.js');?>"></script>

Bootstrap 4.3.0 Tooltip Conflicts with jQuery UI 1.12.1

Looks like the jQuery UI Tooltip & Bootstrap Tooltip collision is the issue, discussed here,

jQueryUI Tooltips are competing with Twitter Bootstrap

The solution is to link Bootstrap Bundle AFTER jQuery UI,

https://stackoverflow.com/a/26476505/1005607

List of conflicts between bootstrap and jquery-ui?

Mostly between ui.button and ui.tooltip plugins. This is easily remedied though with scripts included like so:

<script src="js/jquery-1.11.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
    // handle jQuery plugin naming conflict between jQuery UI and Bootstrap
    $.widget.bridge('uibutton', $.ui.button);
    $.widget.bridge('uitooltip', $.ui.tooltip);
</script>
<script src="js/bootstrap.js"></script>

But I don't include any of the jQuery UI CSS, so I don't have anything to offer on CSS conflicts, if there are any.

^{*Added this as answer instead of a comment to include code snippet}

Conflict Between Jquery and Bootstrap