Develop Reference

Twitter bootstrap:Popop are not showing up on first click but show up on second click

Here is my code. Please help me
$(document).ready(function(){
$(document).delegate(".view","click",function(){
var id = $(this).attr("id");
alert(id);
$("#"+id).popover({
html : true,
content: function() {
return $("#"+id+"tt").html();
},
title: function() {
return $('#popoverTitle').html();
}
});
alert("thisa");
});
});

Try replacing the function .delegate() by .on(), this function has been superseded in the last versions of Jquery.
jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
jQuery 1.7+
$( elements ).on( events, selector, data, handler );
The code would be:
$(document).ready(function(){
$(document).on("click",".view",function(){
var id = $(this).attr("id");
alert(id);
$("#"+id).popover({
html : true,
content: function() {
return $("#"+id+"tt").html();
},
title: function() {
return $('#popoverTitle').html();
}
});
alert("thisa");
});
});

Try doing this way..
$('.view')
.popover({trigger: 'manual'})
.click(function() {
if($(this).hasClass('pop')) {
$(this)
.popover('hide')
.removeClass('pop');
} else {
var id = $(this).attr("id");
var title = $('#popoverTitle').html();
var response = $("#"+id+"tt").html();
$(this)
.attr({'title': title, 'data-content': response})
.popover('show')
.addClass('pop');
}
});

Javascript disable onclick event until it's event is finished

How can I temporary disable onclick event until the event is finished?
So far that's all I've come up with:
<script>
function foStuff(a){
//no modifications here to be done, just some code going on
}
$(document).ready(function(){
$("#btn").click(function(){
var obj = $(this);
var action = obj.prop('onclick');
obj.prop('onclick','');
whenDoStuffFinishes.(function(){ //when do stuff finishes is what i need to get
obj.prop('onclick',action);
});
});
});
</script>
<div id="btn" onclick="doStuff(500)">
</div>
EDIT:
I've tried it this way: but it doesn't unblock the click event
$("#btn").click(function(){
var obj = $(this);
obj.off('click');
$.when( doStuff(500) ).then( function(){
obj.on('click'); // it actually comes here, but click event is being unset
} );
});
<script>
$(document).ready(function(){});
</script>
<div id="btn">
</div>

Well, you can create a variable that tells your function to ignore it while it's true;
var isIgnore = false;
$("#btn").click(function(){
if(isIgnore)
return;
isIgnore = true;
var obj = $(this);
var action = obj.prop('onclick');
obj.prop('onclick','');
whenDoStuffFinishes.(function(){
obj.prop('onclick',action);
isIgnore = false;
});
});
This code is not tested but I think this will work.

Simply reference the handler, and detach it before performing your action, then at the end attach it again ...
$(document).ready(function () {
var handler = function () {
var obj = $(this);
obj.off('click');
whenDoStuffFinishes.(function () {
obj.click(handler);
});
};
$("#btn").click(handler);
});

use pointerEvents.try this:
$("#btn").click(function(){
document.getElementById('btn').style.pointerEvents = 'none';
whenDoStuffFinishes.(function(){
document.getElementById('id').style.pointerEvents = 'auto';
});
});

Using a combination of bind and unbind
https://api.jquery.com/bind/
https://api.jquery.com/unbind/

Turn the event off once it is triggered and reattach it at the end of the callback.
jQuery( '#selector' ).on( 'click', function voodoo( event ) {
jQuery( event.target ).off( event.type );
// Do voodoo...
jQuery( event.target ).on( event.type, voodoo );
});
Alternatively and depending on the scenario, event.stopImmediatePropagation() might also serve as a solution. It will stop all subsequently attached event handlers from firing and itself from bubbling up the DOM tree.
jQuery( '#selector' ).on( 'click', function( event ) {
event.stopImmediatePropagation();
});

jQuery: POST data without refreshing

The link is in the footer, The problem is: onclick, the page jumps to the header with a # in the address bar, is there a way to stay in the footer ?
here is my code
<span style="color: #33A13D"><i class="fa fa-hand-o-up"></i></span>
$(document).on('click', '.clickIn', function(){
var $this = $(this);
var liCount = $('#liCount');
if($(this).attr('attrIn')=='Like'){
$.post('page.php',{i:$(this).attr('id'),action:'like'},function(){
$this.html('done');
$this.attr('attrIn','');
});
}
});
Thanks

Use event.preventDefault():
$(document).on('click', '.clickIn', function(e){
e.preventDefault();
var $this = $(this);
var liCount = $('#liCount');
if($(this).attr('attrIn')=='Like'){
$.post('page.php',{i:$(this).attr('id'),action:'like'},function(){
$this.html('done');
$this.attr('attrIn','');
});
}
});
This cancel default action of browser in specific element. Check reference: http://api.jquery.com/event.preventDefault/

Yo have to modify your handler to add e.preventDefault() and e.stopPropagation():
$(document).on('click', '.clickIn', function(e){
e.preventDefault();
e.stopPropagation();
var $this = $(this);
var liCount = $('#liCount');
if($(this).attr('attrIn')=='Like'){
$.post('page.php',{i:$(this).attr('id'),action:'like'},function(){
$this.html('done');
$this.attr('attrIn','');
});
}
});
This will prevent default action for your link (follow "#" link) and stop the propagation (bubbling) of the click event.

You can prevent the default behaviour of a triggered event by calling the preventDefaultmethod of the event object. I.e.:
$(document).on('click', '.clickIn', function(event){
var $this = $(this);
var liCount = $('#liCount');
// Do this:
event.preventDefault();
if($(this).attr('attrIn')=='Like'){
$.post('page.php',{i:$(this).attr('id'),action:'like'},function(){
$this.html('done');
$this.attr('attrIn','');
});
}
});

inside click use
event.preventDefault();

Remove parent element jQuery

How can I remove all elements including its parent when click. The tabs is generated dynamically. What I tried so far is:
I'm using bootbox for the confirmation.
function remove() {
bootbox.confirm("Are you sure?", function(result) {
if( result != false ) {
var anchor = $(this).siblings('a');
$(anchor.attr('href')).remove();
$(this).parent().remove();
$(".nav-tabs li").children('a').first().click();
}
});
}
The tab that I will remove is generated through this:
$(document).on('submit','#pop-form', function(e) {
// make an ajax request
$.post('../admin/FLT_add_tab.do',
$('#pop-form').serialize(),
function( data ) {
// if data from the database is empty string
if( $.trim( data ).length != 0 ) {
// hide popover
$('#popover').popover('hide');
//append new tab and new tab content
var id = $(".nav-tabs").children().length - 1;
$('#popover').closest('li').before('<li>' + data + ' </li>');
$('.tab-content').append('<div class="tab-pane" id="tab_' + id + '"> <c:import url="flt-pis.html"></c:import> </div>');
} else {
// error handling later here
}
}
);
e.preventDefault();
});
UPDATE:
remove() is called by appending <i> when the user hover the tab
$(document).ready( function() {
$(document).on('mouseenter', 'a.g-tabs', function() {
$( this ).append( $('<i class="icon-clear-remove" onClick="tabRemove();"></i>') );
});
$(document).on('mouseleave', 'a.g-tabs', function() {
$( this ).find( ".icon-clear-remove:last" ).remove();
});
});
The JS that concern if the page is refreshed
<!-- Other tabs from the database -->
<c:forEach var="tabNames" items="${ allTabs }">
<li>${ tabNames.key } </li>
</c:forEach>
Popover for adding new tab
<!-- Add new tab -->
<li>New <i class="icon-plus-sign"></i></li>

The main problem is remove method does not know on which element it is getting called, I've changed the remove to use jQuery handler instead of inlined click handler.
Try
$(document).on('mouseenter', 'a.g-tabs', function () {
$(this).append($('<i class="icon-clear-remove"></i>'));
});
$(document).on('mouseleave', 'a.g-tabs', function () {
$(this).find(".icon-clear-remove:last").remove();
});
jQuery(function () {
$(document).on('click', '.icon-clear-remove', function () {
var $this = $(this);
bootbox.confirm("Are you sure?", function (result) {
if (result != false) {
alert('delete:' + $this[0].tagName)
var $a = $this.closest('.g-tabs');
alert($a.length)
$($a.attr('href')).remove();
$a.parent().remove();
$(".nav-tabs li").children('a').first().click();
}
});
})
})

I can't tell exactly how you are implementing this but if my guess is right this should work.
If it doesn't work, you should consider setting up a fiddle.
function remove() {
bootbox.confirm("Are you sure?", function(result) {
if (result) { $(this).remove(); }
});
}

hiding element on blur, when it is shown

I don't understand why my function is not working.
It is showing up the login form, but when I blur (click somewhere else than the form) it is not hiding.
here is my buggy code:
$(document).on('click', '#login-btn', function(){
var $form = $("#login");
$form.show("slow" );
$("#login").on('blur', function (){
$form.hide("slow");
});
});

You probably do not want this blur to be handled only when click event gets fired.
Move the blur event out of the click event
var $form = $("#login");
$(document).on('click', '#login-btn', function(){
$form.show("slow" );
$('#loginUsername').focus();
});
$form.on('focusout', function (){
$form.hide("slow");
});

You can do this:
var $form = $("#login");
$(document).on('click', '#login-btn', function () {
$form.show("slow");
}).on('blur', '#login', function () {
$form.hide("slow");
});