We Keep Coding

How to make sure only one popover is activated at each time

I have the following code that shows an ajax content for each element for my page.
function details_in_popup(link, div_id){
$.ajax({
url: link,
success: function(response){
$('#'+div_id).empty().html(response);
}
});
return '<div id="'+ div_id +'">Loading...</div>';
}
$(function () {
$('[data-toggle="popover"]').popover({
"html": true,
"title": '<span class="text-info"><strong>Quick View</strong></span>' +
'<button type="button" id="close" class="close" >×</button>',
"content": function () {
var div_id = $(this).data('id');
return details_in_popup($(this).data('url'), div_id);
}
}).on('shown.bs.popover', function (e) {
var popover = jQuery(this);
$('body').on('click', '.close', function (e) {
//popover.popover('hide');
$(".popover").remove();
$(this).data('id').remove();
});
});
});
And in the html i have :
<button data-url="<%= my_url %>" href="#" type="button" class="" data-container="body" data-toggle="popover" data-id="<%= product.slug %>" style="">Popover</button>
This code does the trick and shows the popover with the correct content, in the sense that the first time the popover opens. I have the normal behavour
But starting from the second time, i have 2 popovers one on top of the other, One with loading message, and the other with the content. Also the button of the loading popover is the one that can close both popovers.
First time popover:
Second time popover:
Do you have any idea on how could i get ride of the second loading popover and bind the close button the the popover that have the content ?
Thank you very much and i hope that i was clear in my explanation

I tried your html code. I think you need to add data content as well. data-content="your text here". Rest seems to be fine. And for close functionality just add data-trigger = "focus". click here http://www.bootply.com/ZkPQGSAkbq
If you need a close button here is an example. This might help you figure out. [][1]
[1]: http://jsfiddle.net/erik1337/fvE22/

How to open one dialog- box from multiple buttons on the same html page

Div with class ="front" is clone more than once on a html page ,button nested (class=poperbtn) clone as well, the button use is to open dialog-box/pop up (class="poper"), for example : if I have 4 divs -> class=front which means 4 buttons -> class="poperbtn", everytime I click on one of these buttons the dialog-box must pop-up, how to do this? is it possible? here is a code example.
//Dialog - box open button
<div class="front">
<input type="button" class="poperbtn" value="push it!" /> </div>
// Div for Dialog box
<div id="poper"> <h1>here I am </h1></div>
//To avoid using id I select button (id=poperbtn) this way - works fine I got id="poperbtn" button .
var _btnToDialog = "";
$(".front").live("click", function () {
_btnToDialog = $(this).next().children().eq(0);
});
//Dialog box Jquery function - I am not sure about this code.. got stuck here..
$(function () {
$("#poper").dialog({
autoOpen: false,
width: 650,
height: 600,
});
$(_btnToDialog).click(function () {
$("#poper").dialog("open");
});
});
});
**According to comments,I changed the button - has no Id only class.

You can hang click handler for all input inside .front elements.
Due to dynamically created elements it should be, for example
$(document).on("click", "selector", function() {})
instead of
$("selector").click(function() {})
So finally code will look like:
$(document).on("click", ".front input", function() {
$("#poper").dialog("open");
});
You can add class (for example, .button) for required inputs. Then code can be simplified to:
$(document).on("click", ".button", function() {
$("#poper").dialog("open");
});
Update. With inputs class .poperbtn it will be
$(document).on("click", ".poperbtn", function() {
$("#poper").dialog("open");
});

You can also have a look at this JSBin solution. There are many ways you can approach this problem it depends on what the desired behavior is you want to provide and the way you have already things in your codebase.

Bootstrap Modal - show does not remove hide attribute

I am creating a Bootstrap 2.3.1 modal as follows:
myModal = $('<div/>', {
'class': 'modal hide',
'id': id + '-addModal',
'tabindex': -1, // needed for escape to work...
'role': 'dialog',
'data-backdrop': 'static'
}).append(content);
// insert Modal into DOM...
$(jqElement).after(myModal);
// focus on first input when it pops up...
myModal.on('shown', function () {
myModal.find('select:first').focus();
});
// in response to button click...
myModal.modal('show');
On rare occasions, the backdrop shows, but no modal is displayed. Has anyone encountered a similar problem and a workaround? I am aware IE8 does not like animated modals (use of fade class) and this doesn't appear to be the same issue as we don't use fade. The issue appears in FF, Chrome and IE, but like the Spanish Inquisition, never when I'm expecting it.
The failure appears to be within the modal('show') execution. It seems that the modal exists but is not unhidden. I believe this should be achieved by adding the in class to the modal. The show and shown events do occur however. From looking at the bootstrap code, the fact that the shown event occurs means that the event is not prevented from default behaviour.
Note This is a question similar to one I posted earlier, but I have added some more information concerning how it fails.
Please also note that I cannot update to Bootstrap 3. I am responsible for making small changes to an already released product and a change of basic libraries is a non-starter.

I've modified the code and appended to the body instead of the unknown jqElement specified in your example. I've also added some example place holder content. See the following JS Fiddle for a working example http://jsfiddle.net/kYVtf/5/
var id = 'test',
content = '<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="myModalLabel">Modal header</h3></div><div class="modal-body"><p><select><option>TEST</option></select></p></div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> </div>';
var myModal = $('<div/>', {
'class': 'modal hide fade',
'id': id + '-addModal',
'tabindex': -1, // needed for escape to work...
'role': 'dialog',
'data-backdrop': 'static'
}).html(content);
// insert Modal into DOM...
$('body').append(myModal);
// focus on first input when it pops up...
myModal.on('shown', function () {
myModal.find('select:first').focus();
});

I found the following issues helped:
a) The 'shown' action of the modal checks for a display:block attribute and forces it to be set.
b) the close button (which needed to do validation) was set to a click event - changing this to a delegated event made it work reliably
c) both the cancel buttons were mapped to the modal-dismiss action.
myModal.on('show', function (event) {
self._debug("show modal");
// show add form - should be a modal
myModal.find('form')[0].reset();
myModal.find('.alerts').empty();
self._debug('show end');
return true;
});
myModal.on('shown', function () {
var $el = $('#myModal');
if ($el.css('display') == 'none') {
self._debug(" WARNING! modal css error");
}
self._debug("fix for bootstrap error");
$el.css('display', 'block');
myModal.find('select:first').focus();
self._debug('Shown modal');
return true;
});
myModal.on('hide', function () {
self._debug('Hide modal');
return true;
});
myModal.on('hidden', function () {
var $el = $('#myModal');
$el.css('display', 'none');
self._debug('Hidden modal');
return true;
});

This behaviour started happening for me after I added the following to prevent unhandled modal closure.
$('.modal').modal({
backdrop: 'static',
keyboard: false
});
I fixed it by adding show: false to the modal options and making sure there was no hide class in <div class="modal fade"

How to create a "next" button that switches tabs using Java Script and Twitter Bootstrap

I have the following code: http://jsfiddle.net/h6rQ2/2/
I'm using html to create a basic form. This form has two sections -- each section is contained within a tab (tabs created with Twitter Bootstrap).
How do I create a "next" button which switches from the first tab to the second tab? When I try doing it right now, it only submits the form. Does Twitter Bootstrap already provide a function that lets you switch tabs via an external button? If so, how do you use it?

Given those buttons :
<div class="btn-group">
<button class="btn" id="prevtab" type="button">Prev</button>
<button class="btn" id="nexttab" type="button">Next</button>
</div>
You'd need this JS :
var $tabs = $('.tabbable li');
$('#prevtab').on('click', function() {
$tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');
});
$('#nexttab').on('click', function() {
$tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');
});
Working demo (jsfiddle)

To make it cyclic (last tab goes to first, first tab goes to last), here is my code :
function previousVin(){
var previousElement = $('#myTab li').filter('.active').prev('li').find('a[data-toggle="tab"]');
if(previousElement.html()===undefined){
$('#myTab a:last').tab('show');
}else{
previousElement.tab('show');
}
}
function nextVin(){
var nextElement = $('#myTab li').filter('.active').next('li').find('a[data-toggle="tab"]');
if(nextElement.html()===undefined){
$('#myTab a:first').tab('show');
}else{
nextElement.tab('show');
}
}

For bootstrap 3
$('a[data-toggle^="tab"]').click(function(){
var data = $(this).attr("href");
$('a[data-toggle^="tab"]').parent("li").removeClass("active");
$('li a[href^="'+data+'"]').parent("li").addClass("active");
$('.tab-pane').removeClass("active");
$(data).addClass("active");
})
You can add links like these anywhere
Next
Previous

Reveal: jQuery Modal Plugin Won't Appear

I'm trying to use Reveal by Zurb to display a form, yet when I select the item that triggers the event the screen darkens like Reveal is working, but it will not show the pane. Any ideas? Thanks a lot for the help!
Planner.js
$(function() {
$('.event_list li').click( function(e) {
console.log(this.id);
$('#update_view_content').reveal('http://example.com/user/planner/update/'+this.id);
});
$('#updateForm').live('submit', function() {
var data = $('#updateForm').serialize();
var url = $(this).attr('action');
$.post(url, data);
return false;
});
});

From looking at the documentation online it seems there are no parameters for the reveal() method - the reveal method just shows a div on the screen, so
You would created markup on your page :
<div id="myModal" class="reveal-modal">
<h1>Modal Title</h1>
<p>Any content could go in here.</p>
<a class="close-reveal-modal">×</a>
</div>
then reveal it ...
$('#myButton').click(function(e) {
e.preventDefault();
$('#myModal').reveal();
});
If you want to load something into the div and then reveal i suggest this approach :
$('.event_list li').click( function(e) {
console.log(this.id);
$('#update_view_content').load('http://example.com/user/planner/update/'+this.id,function() {
$('#update_view_content').reveal();
});
});
That should load in the contents and then once the load has completed call the reveal method. untested