Rectangle 27 72

You need to make the markup right

<button type="button" id="example" class="btn btn-primary">example</button>

Then, one way is to attach the close-handler inside the element itself, the following works :

$(document).ready(function() {
    $("#example").popover({
        placement: 'bottom',
        html: 'true',
        title : '<span class="text-info"><strong>title</strong></span>'+
                '<button type="button" id="close" class="close" onclick="$(&quot;#example&quot;).popover(&quot;hide&quot;);">&times;</button>',
        content : 'test'
    });
});

@Sebf, bootstrap is intended to be as light as possible, many issues is meant to be solved on the implementation layer. Yeah, some "missing" parts is baffling ;-)

@jonschlinkert data-dismiss="popover" inplace of the onclick doesn't work. This is a well documented problem.

@Mario Fink (and Robert Kotcher) - totally agree off course. But this was how you could implement the desired functionality in twitter bootstrap 2.x, now the intended way fails. I simply answer the question.

For me the example above only worked by replacing the double quotes () with single quotes ()

jquery - How to insert close button in popover for bootstrap - Stack O...

jquery twitter-bootstrap popover
Rectangle 27 42

<a class="btn btn-primary announce" data-toggle="modal" data-id="107" >Announce</a>

Then use jQuery to bind the click and send the Announce data-id as the value in the modals #cafeId:

$(document).ready(function(){
   $(".announce").click(function(){ // Click to only happen on announce links
     $("#cafeId").val($(this).data('id'));
     $('#createFormId').modal('show');
   });
});

Works great, but how can I get the fade in effect? Doesn't same to work with the commands.

@Mittchel most likely its too late but you can get fade effect if you remove the hide class from the div

jquery - How to pass values arguments to modal.show() function in Boot...

jquery javascript-events twitter-bootstrap modal-dialog
Rectangle 27 42

<a class="btn btn-primary announce" data-toggle="modal" data-id="107" >Announce</a>

Then use jQuery to bind the click and send the Announce data-id as the value in the modals #cafeId:

$(document).ready(function(){
   $(".announce").click(function(){ // Click to only happen on announce links
     $("#cafeId").val($(this).data('id'));
     $('#createFormId').modal('show');
   });
});

Works great, but how can I get the fade in effect? Doesn't same to work with the commands.

@Mittchel most likely its too late but you can get fade effect if you remove the hide class from the div

jquery - How to pass values arguments to modal.show() function in Boot...

jquery javascript-events twitter-bootstrap modal-dialog
Rectangle 27 28

I needed to find something that would work for multiple popovers and in Bootstrap 3.

<button class="btn btn-link foo" type="button">Show Popover 1</button>
<button class="btn btn-link foo" type="button">Show Popover 2</button>
<button class="btn btn-link foo" type="button">Show Popover 3</button>

The content for the save and close buttons inside the popover:

var contentHtml = [
    '<div>',
        '<button class="btn btn-link cancel">Cancel</button>',
        '<button class="btn btn-primary save">Save</button>',
    '</div>'].join('\n');

and the javascript for all 3 buttons:

This method works when the container is the default not attached to body.

Then, use the aria-describedby to find the popup and hide it.

$('.foo').popover({
    title: 'Bar',
    html: true,
    content: contentHtml,
    container: 'body',
    trigger: 'manual'
}).on('shown.bs.popover', function (eventShown) {
    var $popup = $('#' + $(eventShown.target).attr('aria-describedby'));
    $popup.find('button.cancel').click(function (e) {
        $popup.popover('hide');
    });
    $popup.find('button.save').click(function (e) {
        $popup.popover('hide');
    });
});
popup.find('button.cancel').on('click',function(e) {...}

when I click on cancel link, it closes the popover. But I have to click twice on popover-trigger link as it does not open popover in first click.

There's predefined class .close with hover effect, so inserting close button into title or content is as easy as <span class=close></span>.

jquery - How to insert close button in popover for bootstrap - Stack O...

jquery twitter-bootstrap popover
Rectangle 27 20

I found other answers were either not generic enough, or too complicated. Here is a simple one that should always work (for bootstrap 3):

$('[data-toggle="popover"]').each(function () {
    var button = $(this);
    button.popover().on('shown.bs.popover', function() {
        button.data('bs.popover').tip().find('[data-dismiss="popover"]').on('click', function () {
            button.popover('toggle');
        });
    });
});

Then just add attribute data-dismiss="popover" in your close button. Also make sure not to use popover('hide') elsewhere in your code as it hides the popup but doesn't properly sets its internal state in bootstrap code, which will cause issues next time you use popover('toggle').

For some reason, using Bootstrap 3, .popover('toggle'); never does anything for me, where as .popover('hide'); does work. Other than that, this solution is my favorite. Thank you!

Wouldn't that bind the click event on every popover-show-event, resulting in multiple bindings?

@pduersteler this is old code, but it's used in production, so I'm pretty sure it works. I guess bootstrap creates a new popover, and therefore a new close button, each time the button is clicked. If there was multiple events on the close button, it would toggle multiple times, and I would have noticed the bug (hopefully). Let me know if you can confirm an issue though. On second thought, maybe that's why I had an issue with popover('hide') that would not destroy the popover but just hide it?

jquery - How to insert close button in popover for bootstrap - Stack O...

jquery twitter-bootstrap popover
Rectangle 27 2

You can use the jTruncate jQuery plugin.

In a nutshell, jTruncate provides simple yet customizable truncation for text entities in your web page.

$().ready(function () {
    $('p').jTruncate({
        moreText: "See more..."
    });
});

javascript - Jquery Collapse and expand plugin for bootstrap - Stack O...

javascript jquery twitter-bootstrap
Rectangle 27 14

$(document).ready(function() {
    $('#createFormId').on('show.bs.modal', function(event) {
        $("#cafeId").val($(event.relatedTarget).data('id'));
    });
});
shown
show

jquery - How to pass values arguments to modal.show() function in Boot...

jquery javascript-events twitter-bootstrap modal-dialog
Rectangle 27 14

$(document).ready(function() {
    $('#createFormId').on('show.bs.modal', function(event) {
        $("#cafeId").val($(event.relatedTarget).data('id'));
    });
});
shown
show

jquery - How to pass values arguments to modal.show() function in Boot...

jquery javascript-events twitter-bootstrap modal-dialog
Rectangle 27 13

The following is what i just used in my project .And hope it can help you

<a id="manualinputlabel" href="#" data-toggle="popover" title="weclome to use the sql quer" data-html=true  data-original-title="weclome to use the sql query" data-content="content">example</a>


$('#manualinputlabel').click(function(e) {
              $('.popover-title').append('<button id="popovercloseid" type="button" class="close">&times;</button>');
              $(this).popover();

          });

      $(document).click(function(e) {
         if(e.target.id=="popovercloseid" )
         {
              $('#manualinputlabel').popover('hide');                
         }

      });
h3.popover-title

Worked well, but I had the same issue with vertical alignment. I added my own class to the close button with line-height: 0.7 !important; and looked good

jquery - How to insert close button in popover for bootstrap - Stack O...

jquery twitter-bootstrap popover
Rectangle 27 4

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.

(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>

I have commented the ui JS file..still no difference :(

can you load bootstrap at footer of your html? Bootstrap suggested it.

XHTML 1.0 Transitional

I loading the bootstrap right before the </body> tag but no luck. The tabs start working but the dropdown stops working :( Me too think I may have to include HTML5..any suggestions on how to do that?

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

javascript - Conflict between jquery and bootstrap - Stack Overflow

javascript php jquery css twitter-bootstrap
Rectangle 27 70

rubaxa-sortable is a fast, no-dependencies, small reorderable lists widget with touch support that works with the HTML5 native drag&drop API. You can use it with Bootstrap, Foundation, or any CSS library you want, and instantiating it only takes one line.

It supports reordering within a list or across lists. You can define lists that can only receive elements, or lists from which you can drag, but onto which you cannot drop. It's also very actively maintained and MIT licensed on GitHub.

new Sortable(document.getElementsByClassName('sortable')[0]);
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<!-- Sortable -->
<script src="https://rawgit.com/RubaXa/Sortable/master/Sortable.js"></script>

<ul class="list-group sortable">
  <li class="list-group-item">This is <a href="http://rubaxa.github.io/Sortable/">Sortable</a></li>
  <li class="list-group-item">It works with Bootstrap...</li>
  <li class="list-group-item">...out of the box.</li>
  <li class="list-group-item">It has support for touch devices.</li>
  <li class="list-group-item">Just drag some elements around.</li>
</ul>

@FezVrasta: are you the Fez Vrasta who made the Material Bootstrap Design?

yup I'm the developer

jquery ui - How can I implement a touch-sensitive, responsive, sortabl...

twitter-bootstrap jquery-ui touch jquery-ui-sortable
Rectangle 27 9

I've checked many of the mentioned code examples and for me the approach from Chris is working perfectly. I've added my code here to have a working demo of it.

I have tested it with Bootstrap 3.3.1 and I haven't tested it with an older version. But it's definitely not working with 2.x because the shown.bs.popover event was introduced with 3.x.

$(function() {
  
  var createPopover = function (item, title) {
                       
        var $pop = $(item);
        
        $pop.popover({
            placement: 'right',
            title: ( title || '&nbsp;' ) + ' <a class="close" href="#">&times;</a>',
            trigger: 'click',
            html: true,
            content: function () {
                return $('#popup-content').html();
            }
        }).on('shown.bs.popover', function(e) {
            //console.log('shown triggered');
            // 'aria-describedby' is the id of the current popover
            var current_popover = '#' + $(e.target).attr('aria-describedby');
            var $cur_pop = $(current_popover);
          
            $cur_pop.find('.close').click(function(){
                //console.log('close triggered');
                $pop.popover('hide');
            });
          
            $cur_pop.find('.OK').click(function(){
                //console.log('OK triggered');
                $pop.popover('hide');
            });
        });

        return $pop;
    };

  // create popover
  createPopover('#showPopover', 'Demo popover!');

  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<button class="btn btn-primary edit" data-html="true" data-toggle="popover" id="showPopover">Show</button>

<div id="popup-content" class="hide">
    <p>Simple popover with a close button.</p>
    <button class="btn btn-primary OK">OK</button>
</div>
$cur_pop.popover('hide');

jquery - How to insert close button in popover for bootstrap - Stack O...

jquery twitter-bootstrap popover
Rectangle 27 3

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

does not work @user3221743

how about using jquery-ui bootstrap 1.10.2 instead of 1.10.3?

Can you please give me the link from where to download?

.noConflict() is a jQuery method to avoid conflicts between other libraries using $ as an alias for something else. Bootstrap components are built on top of jQuery, so this has nothing to do with conflicts between jquery and bootstrap

javascript - Conflict between jquery and bootstrap - Stack Overflow

javascript php jquery css twitter-bootstrap
Rectangle 27 45

Just thought I'd post a supplemental answer to the one from @KyorCode. I followed his advice and went with JQuery Sortable and it worked seamlessly for me. It took me maybe 10 minutes to get this working.

I didn't have to include any JQuery UI CSS - just the JavaScript - so there were no issues with the CSS conflicting in anyway with Bootstrap.

Here's a working example on www.bootply.com.

<!-- Bootstrap 3 panel list. -->
<ul id="draggablePanelList" class="list-unstyled">
    <li class="panel panel-info">
        <div class="panel-heading">You can drag this panel.</div>
        <div class="panel-body">Content ...</div>
    </li>
    <li class="panel panel-info">
        <div class="panel-heading">You can drag this panel too.</div>
        <div class="panel-body">Content ...</div>
    </li>
</ul>
<!-- Assumes that JQuery is already included somewhere. Size: 22kb or 13kb minified. -->
<script src="/Scripts/jquery-ui-1.10.4.custom.js"></script>

<script type="text/javascript">
    jQuery(function($) {
        var panelList = $('#draggablePanelList');

        panelList.sortable({
            // Only make the .panel-heading child elements support dragging.
            // Omit this to make the entire <li>...</li> draggable.
            handle: '.panel-heading', 
            update: function() {
                $('.panel', panelList).each(function(index, elem) {
                     var $listItem = $(elem),
                         newIndex = $listItem.index();

                     // Persist the new indices.
                });
            }
        });
    });
</script>
<style type="text/css">
    /* show the move cursor as the user moves the mouse over the panel header.*/
    #draggablePanelList .panel-heading {
        cursor: move;
    }
</style>

@light24bulbs - Just tested it on my iPad, and it doesn't work, maybe by design... If I'm honest, I don't like the idea of drag-and-drop on touch devices, because it's hard (impossible?) to tell the difference between scroll actions and drag actions. I use JIRA for bug tracking, and one of my gripes about their interface is that I keep accidentally changing issue priorities when I try to scroll on my iPad because it allows issues to be dragged into priority order. It's a great feature on desktop, but a better approach for touch would be fat-finger-sized up/down arrows on each row.

@Acentric why not use a handle and/or delay to distinguish between scroll and drag actions?

@speendo - I am using handle in my example. There's a brief discussion of the UX concerns of drag-and-drop on touch devices - but essentially it conflicts with scroll gestures, and many devices now use the long-touch as a right-click - so delay can conflict with that.

One minor caveat -- you may encounter some namespace collisions running both jQuery UI and Bootstrap together. You can mitigate this by either performing a custom jQuery UI export and including only the features you need (as is the case here), or by using jQuery's 'bridge' function to rename the jQuery UI functions that duplicate Bootstrap functions, such as 'tooltip' and 'button.' See stackoverflow.com/questions/13731400/ for more information.

jquery ui - How can I implement a touch-sensitive, responsive, sortabl...

twitter-bootstrap jquery-ui touch jquery-ui-sortable
Rectangle 27 149

http://bootboxjs.com/ - latest works with Bootstrap 3.0.0

bootbox.alert("Hello world!");

The library exposes three methods designed to mimic their native JavaScript equivalents. Their exact method signatures are flexible as each can take various parameters to customise labels and specify defaults, but they are most commonly called like so:

bootbox.alert(message, callback)
bootbox.prompt(message, callback)
bootbox.confirm(message, callback)

Here's a snippet of it in action (click "Run code snippet" below):

$(function() {
  bootbox.alert("Hello world!");
});
<!-- required includes -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<!-- bootbox.js at 4.4.0 -->
<script src="https://rawgit.com/makeusabrew/bootbox/f3a04a57877cab071738de558581fbc91812dce9/bootbox.js"></script>

Unfortunately, the moment you need non-english text on title and buttons you either have to modify the JS or start parameterizing almost as much as just adding the bootstrap html and JS yourself. :)

jquery - Confirm delete modal/dialog with Twitter bootstrap? - Stack O...

jquery twitter-bootstrap
Rectangle 27 146

http://bootboxjs.com/ - latest works with Bootstrap 3.0.0

bootbox.alert("Hello world!");

The library exposes three methods designed to mimic their native JavaScript equivalents. Their exact method signatures are flexible as each can take various parameters to customise labels and specify defaults, but they are most commonly called like so:

bootbox.alert(message, callback)
bootbox.prompt(message, callback)
bootbox.confirm(message, callback)

Here's a snippet of it in action (click "Run code snippet" below):

$(function() {
  bootbox.alert("Hello world!");
});
<!-- required includes -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<!-- bootbox.js at 4.4.0 -->
<script src="https://rawgit.com/makeusabrew/bootbox/f3a04a57877cab071738de558581fbc91812dce9/bootbox.js"></script>

Unfortunately, the moment you need non-english text on title and buttons you either have to modify the JS or start parameterizing almost as much as just adding the bootstrap html and JS yourself. :)

jquery - Confirm delete modal/dialog with Twitter bootstrap? - Stack O...

jquery twitter-bootstrap
Rectangle 27 6

Solution posted by Sudhir worked for me except it had one minor issue: When you have more than one choosen control inside the div and you expand other choosen while there is one already expanded, the new one will fall behind the accordion. This is because the first dropdown sets the overflow to hidden after 2nd one is expanded. Here is the fix.

$(function () {
   fixChoosen();
});

function fixChoosen() {
   var els = jQuery(".chosen-select");
   els.on("chosen:showing_dropdown", function () {
      $(this).parents("div").css("overflow", "visible");
   });
   els.on("chosen:hiding_dropdown", function () {
      var $parent = $(this).parents("div");

      // See if we need to reset the overflow or not.
      var noOtherExpanded = $('.chosen-with-drop', $parent).length == 0;
      if (noOtherExpanded)
         $parent.css("overflow", "");
   });
}

I added a few more lines and made it work for me. Thank you +1

html - jQuery Chosen div falls behind Twitter Bootstrap accordion - St...

jquery html css twitter-bootstrap jquery-chosen
Rectangle 27 5

$(".datepicker").datepicker({
    minDate: 0
});
$(".datepicker").datepicker({
     startDate: new Date()
});

Thankz it worked. I'm using bootstrap version bt i'm trying to use jquery minDate

Wow thank you. I was driving myself crazy trying to use the jQuery API, only to learn from this that I was actually using the Bootstrap version. :)

jQuery Datepicker minDate is not working in bootstrap - Stack Overflow

jquery