Having Issue on Re-Ordering Contents in a Div Using jQuery

Question

Can you please take a look at this demo and let me know why I am not able to reordering the buttons in .popover-content class. What I would like to do is different order of presenting the button on each click on #pop and as you can see I am using

$("#pop").on("click", function(){ $('.popover-content > button').each(function() { $(this).prependTo(this.parentNode); }); });

but it is not reordering the buttons!

var appcontent = '<button class="btn btn-success btn-block">Item 1</button><button class="btn btn-warning btn-block">Item 2</button><button class="btn btn-info btn-block">Item 3</button>'; $("#pop").popover({ html: 'true', title: "<span class='date-title'>Hello</span>", content: appcontent }).on('shown.bs.popover', function() { var popup = $(this); $(this).parent().find("div.popover .close").click(function() { popup.click(); }); }); $("#pop").on("click", function() { $('.popover-content > button').each(function() { $(this).prependTo(this.parentNode); }); });

body {padding:100px;} .popover {min-width:250px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <div class="container"> <h3>Bootstrap 3 Popover Reordering Content Example</h3> <button class="btn btn-default" id="pop">POP UP</button> </div>

Well I do not want to remove anything! why would I use detach() then?! — Behseini
– Behseini, Commented Mar 30, 2016 at 20:32
I don't think .detach() is necessary, as prepending the node elsewhere in the DOM implicitly detaches it. @Behseini what does happen? Are there errors? Does anything change? — Pointy
– Pointy, Commented Mar 30, 2016 at 20:39

Margaret · Accepted Answer · 2016-03-30 21:52:39Z

It looks to me like the buttons are being reordered, but the popover disappears too quickly, by default.

EDIT 2: Looks like you will need to a value to keep track of states; try this:

 <div class="container"> <h3>Bootstrap 3 Popover Reordering Content Example</h3> <button class="btn btn-default" id="pop">POP UP</button> </div>

And:

var appcontent = '<button class="btn btn-success btn-block">Item 1</button><button class="btn btn-warning btn-block">Item 2</button><button class="btn btn-info btn-block">Item 3</button>'; var count = 0; $("#pop").popover({ html: 'true', title : "<span class='date-title'>Hello</span>", content : appcontent }).on('shown.bs.popover', function() { var popup = $(this); $(this).parent().find("div.popover .close").click(function() { popup.click(); }); }); $("#pop").on("click", function(){ if (count == 2) { $('.popover-content > button').each(function() { $(this).prependTo(this.parentNode); }); count = -1; } else if ($('.popover:visible').length == 1) { count++; } });

Thanks Margaret this working now but there is another issue here! technically, bootstrap must close/hide the popover on second click but the popover still remains there!
Ah, that's a little tricker - essentially, you want to toggle between sort orders, but also preserve the show/hide functionality of on-click? The elements only exist when the popover is shown, and the sort order can only be manipulated when the elements exist. You probably need something extra to keep track of the toggle... I have updated my answer, let me know if it works!

Collectives™ on Stack Overflow

Having Issue on Re-Ordering Contents in a Div Using jQuery

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related