Delete parent div when clicking link using JQuery - javascript

I need to fade out the parent 'content' div when clicking on either of the hyperlinks with the 'dc' class. The following code is what I already have, but does not work.
<script>
$('.dc').unbind("click").click(function(){
var dic = this.id;
var strlinkc = "somepage.php?cid=" + dic;
$.post(strlinkc, function(data, textStatus){
$('a.dc#'+dic).closest('.content').fadeOut("slow");
});
});
</script>
<div class="content">
<div id="somediv"><a class="dc" id="23" href="javascript:void(0);">update</a></div>
<div id="anotherdiv">
blah blah blah more text and images
</div>
<div id="yetanother"><a class="dc" id="23" href="javascript:void(0);">update</a></div>
</div>

Put your code in dom ready handler.
$(function () {
$('.dc').unbind("click").click(function () {
var $this = $(this);
var strlinkc = "somepage.php?cid=" + this.id;
$.post(strlinkc, function (data, textStatus) {
$this.closest('.content').fadeOut("slow");
});
return false;
});
});

$('.dc').click(function(){
$(this).parents('.content').fadeOut('fast');
return false;
});

Instead of using unbind, prevent the default event.
$(function () {
$('.dc').click(function (e) {
e.preventDefault();
var $this = $(this);
var strlinkc = "somepage.php?cid=" + this.id;
$.post(strlinkc, function (data, textStatus) {
$this.closest('.content').fadeOut("slow");
});
return false;
});
});

Related

jquery plugin function overriding execute function many times

I created a small jQuery plugin that shows and hides a div when the user clicks on the button .show and the button .hide, respectively. I want to pass a function as a plugin option to do some specific processing for onhide. But the onhide function executes as many times as the show and hide buttons are clicked.
Here is the jsfiddle.
When you click show/hide buttons more then once then the alert will show the same number of times.
I think it should alert only once for the hide button.
$.fn.showhide = function(options){
var popup = this;
defaultOptions = {
onHide : function() { },
onShow : function() { }
};
var Options = $.extend({},defaultOptions, options);
this.each(function() {
$(this).on('click',function(e){
var id = $(this).data('id');
$('#'+id).show();
$('.hide').on('click',function(){
var id = $(this).data('id');
$('#'+id).hide();
if (Options.onHide.call() === false) {
return;
}
});
});
});
}
$('.show').showhide({
onHide :function() {
alert('hide');
}
}
);
It's because you're implementing your onHide method inside a loop.
Move this bit:
$('.hide').on('click',function(){
var id = $(this).data('id');
$('#'+id).hide();
if (Options.onHide.call() === false) {
return;
}
});
to right before your closing bracket of your method and everything works fine!
Edit: Fiddle here: https://jsfiddle.net/ka9gw09t/10/
Just replace
$('.hide').on('click',function(){
To
$('.hide').one('click',function(){
Explanation:
With your code, each time the user clicks on .show you attach one more delegation .click to the button. one will do it just once.
$.fn.showhide = function(options){
var popup = this;
defaultOptions = {
onHide : function() { },
onShow : function() { }
};
var Options = $.extend({},defaultOptions, options);
this.each(function() {
$(this).on('click',function(e){
var id = $(this).data('id');
$('#'+id).show();
$('.hide').unbind('click').one('click',function(){
var id = $(this).data('id');
$('#'+id).hide();
if (Options.onHide.call() === false) {
return;
}
});
});
});
};
$('.show').showhide({
onHide :function() {
alert('hide');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="show" data-id="123">
Show
</button>
<button class="hide" data-id="123">
Hide
</button>
<div class="showhide" id="123" style="display:none;">
This is div with id 123
</div>
Update
I was added unbind('click') before the one to unbind the older listeners.

Get Same Function used to load ajax content work on ajax content

I want to load all site via ajax for this I am using this, the code explains itself more than I can:
<script>
function lage(url){
$.get(url, function(data) {
$('#plus').html(data);
$('[href]').each(function() {
var el = $(this);
var val = el.attr('href');
var sal= 'lage(\'' + val + '\')';
el.removeAttr('href')
.attr('onclick', sal);
});
});
}
</script>
<body onload="lage('http://crossorigin.me/http://anycorssite')">
<div id="plus"></div>
The lage() function is not working on the ajax loaded content but is working on onload event.
You can make use of jQuery to attach events. Instead using attribute onclick you can use .click(..) to bind the event to the element.
$(document).ready(function() {
lage('http://crossorigin.me/http://m.ndtv.com');
$(document).on('click', 'a', function() { // dynamicaly bind event
var el = $(this);
var val = el.attr('href');
lage('http://crossorigin.me/' + val); //< call lage function
return false; // prevent to for default behavior (redirecting to href)
});
function lage(url) {
$.get(url, function(data) {
$('#plus').html(data);
});
}
});
.header { background-color: red; width: 700px; height: 150px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header" />
<div id="plus"></div>
You probably look for something like this:
<script>
function lage(url){
$.get(url, function(data) {
$('#plus').html(data);
});
}
var initialUrl = $('body').data('initialUrl');
lage(initialUrl);
$('body').on('click', 'a', function (e) {
var url = $(e.currentTarget).attr('href');
lage(url);
e.preventDefault();
});
</script>
<body data-initial-url="http://crossorigin.me/http://anycorssite">
<div id="plus"></div>

jQuery hide(), delay() and clearTimeout() not Working as Expected

I want if a user hovers over .userNames, .details should slide out after a little delay and also wants .details show hide() when the mouse leaves .userNames, after a little delay too. This is working. Now I want .details to stay if the mouse enters it but it still disappears.
Obsv: A good example of this is Facebook's user names when a mouse hovers them.
HTML code:
<div class = 'posts'>
<p class = 'userNames'> Yax </p>
<div class = 'details'>
<p> Full Name </p>
<p> Birthday </p>
<p> Age </p>
</div>
</div>
jQuery:
$(document).ready(function(){
$('.details').hide();
$(document).on('mouseenter', ".userNames", function () {
var $this = $(this);
$.data($this, 'timer', setTimeout(function(){
$this.parents('.posts').find('.details').slideDown(100);
},900));
});
$(document).on('mouseleave', ".userNames", function () {
var $this = $(this);
$this.parents('.posts').find('.details').delay(800).hide(100);
});
$(document).on('mouseenter', ".details", function () {
var $this = $(this);
var $dataTime = $this.parents('.posts').find('.userNames');
clearTimeout($.data($dataTime, 'timer'));
});
$(document).on('mouseleave', ".details", function () {
var $this = $(this);
$this.hide();
});
});
Thank you in advance.
Try
$(document).ready(function () {
$('.details').hide();
$(document).on('mouseenter', ".userNames", function () {
var $this = $(this),
$post = $this.closest('.posts');
$post.data('timer', setTimeout(function () {
$post.find('.details').stop(true, true).slideDown(100);
}, 900));
});
$(document).on('mouseleave', ".userNames", function () {
var $this = $(this),
$post = $this.closest('.posts');
clearTimeout($post.data('timer'));
$post.data('timer', setTimeout(function () {
$post.find('.details').stop(true, true).delay(800).hide(100);
}, 900));
});
$(document).on('mouseenter', ".details", function () {
var $this = $(this),
$post = $this.closest('.posts');
clearTimeout($post.data('timer'));
$this.stop(true, true)
});
$(document).on('mouseleave', ".details", function () {
var $this = $(this);
$this.hide();
});
});
Demo: Fiddle
Here is a solution that works and simplifies your jQuery a lot:
$(document).ready(function(){
$('.details').hide();
$('.userNames').mouseenter(function () {
$('.details').delay(900).slideDown(100);
});
$('.userNames').mouseleave(function () {
$('.details').delay(800).hide(100);
});
$('.details').mouseenter(function () {
$(this).stop(true, true);
});
$('.details').mouseleave(function () {
$(this).hide(100);
});
});
Try it here.

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(); }
});
}

How can I trigger a 'focusout' after I click on an element?

I have the following markup:
<select style="display:none">
<option value='1'>1</option>
<option vlaue='2'>2</option>
</select>
<input type="text" id="comboBox" />
<ul id="comboBoxData" style="display:none">
<li id='1'>1</li>
<li id='2'>2</li>
</ul>
and the following JQuery code:
$(document).ready(function() {
$('select').each(function() {
var parent = this;
$('#comboBoxData').on('click', 'li', function() {
var value = $(this).prop('id');
$(parent).val(value);
$('#comboBox').val(value);
});
});
$('#comboBox').bind('focusin', function () {
$('#comboBoxData').show();
});
$('#comboBox').bind('focusout', function () {
$('#comboBoxData').hide();
});
});
When I click on one of the LI's the 'comboBoxData' element disappears before the click trigger happens. Is there a way around this or an alternate event that I can use instead to have the same effect as a focusout?
Put mouseenter and mouseleave events and change the value of a global variable say isOver.
$('select').each(function() {
var parent = this;
$('#comboBoxData').on('click', 'li', function() {
var value = $(this).prop('id');
$(parent).val(value);
$('#comboBox').val(value);
$('#comboBoxData').hide();
});
});
$('#comboBoxData').mouseover(function(){
isOver = true;
}).mouseleave(function(){
isOver = false;
});
$('#comboBox').bind('focusin', function () {
$('#comboBoxData').show();
});
$('#comboBox').bind('focusout', function () {
if(!isOver){
$('#comboBoxData').hide();
}
});
You do not require this:
$('#comboBox').bind('focusout', function () {
$('#comboBoxData').hide();
});
instead use this inside $('#comboBoxData').on('click', 'li', function() {
if you are fine with plugin , you could just use this way:
$('#menu').bind('clickoutside', function (event) {
$(this).hide();
});
You can get that plugin here
Also, I have changed the code without using the plugin:
Please check the updated answer:
DEMO
try with blur() function
$('#comboBox').blur(function () {
$('#comboBoxData').hide();
});
The blur event is sent to an element when it loses focus.
from http://api.jquery.com/blur/
Not exactly elegant but it works.
$("body").click(function(event){
if(!$(event.target).is("#comboBoxData") && !$(event.target).is("#comboBox") ){
$("#comboBoxData").hide(); }
});
$(document).ready(function() {
$('select').each(function() {
$('#comboBoxData').on('click', 'li', function() {
var value = $(this).prop('id');
$('#comboBox').val(value);
$('#comboBoxData').hide();
});
});
$('#comboBox').bind('focusin', function () {
$('#comboBoxData').show();
});
});

Categories

Resources