We Keep Coding

DataTables on click search per column

I'm trying to active the seach per column on click of the related element.
I managed to get the search box on click but it doesn't perform the search
I'm not that expert with javascript and jQuery but this is my code:
// Setup - add a text input to each footer cell
$('#DataTable tfoot th').each(function () {
var title = $(this).text();
$(this).click(function (event) {
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
$(this).unbind('click');
});
});
// DataTable
var table = $('#DataTable').DataTable({
initComplete: function () {
// Apply the search
this.api().columns().every(function () {
var that = this;
$('input', this.footer()).on('keyup change clear', function () {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
});
});
}
});
Is there also a way to make the code shorter?
Thank you

The input doesn't exist at the point where you attach your keyup change clear event handler to it. You'll need to use delegated events instead.
initComplete: function() {
this.api().columns().every(function() {
var that = this;
$(this.footer()).on('keyup change clear', 'input', function() {
if (that.search() !== this.value) {
that.search(this.value).draw();
}
});
});
}
You can use jQuery's one method to attach an event handler which will only be called once. You should also avoid creating multiple jQuery wrappers for the same input where you can.
$('#DataTable tfoot th').each(function () {
var $this = $(this);
$this.one("click", function (event) {
$this.empty().append($('<input/>').attr("type", "search").attr("placeholder", "Search " + $this.text()));
});
});

jQuery on click again, should hide the box (like toggle)

I have the following example:
https://codepen.io/baidoc/pen/LYVvOZq
jQuery(function ($) {
$(".box").click(function() {
$(".box").removeClass("active");
$(this).addClass("active");
$(".boxContent").removeClass("show-content");
var target = $(this).attr("target");
$(".boxContent_" + target).addClass("show-content");
});
});
2 Boxes, by default deactivated (hidden), and only once clicked, the content will be shown.
What I'm trying to do: when I click again on the box, it should hide the box (display:none)
I've tried with toggle function, but somehow it doesn't seem to work. What alternative do I have?

What about this?
jQuery(function ($) {
$(".box").click(function() {
var currentActive = $(this).hasClass("active");
$(".boxContent").removeClass("show-content");
$(".box").removeClass("active");
if (!currentActive){
$(this).addClass("active");
var target = $(this).attr("target");
$(".boxContent_" + target).addClass("show-content");
}
});
});

Try this below :
jQuery(function ($) {
$(".box").click(function() {
$(".box").removeClass("active");
$(this).addClass("active");
if($(".boxContent").hasClass("show-content")){
$(".boxContent").removeClass("show-content");
}else{
var target = $(this).attr("target");
$(".boxContent_" + target).addClass("show-content");
};
});
});

Fade in and out when clicking on an anchor tag

I have a page which loads content with php when clicking on the anchor tags on my menu and it works fine.
I have been trying to find the answer for days now.
Which code do I have to use to fade from one content to another? and where exactly do I add this code?
Here is my code:
$(document).ready(function() {
// Set trigger and container variables
var trigger = $('#centerMenu div a'),
container = $('#content');
// Fire on click
trigger.on('click', function() {
// Set $this for re-use. Set target from data attribute
var $this = $(this),
target = $this.data('target');
// Load target page into container
container.load(target + '.php');
// Stop normal link behavior
return false;
});
});

Also you can use this:
$(document).ready(function() {
// Set trigger and container variables
var trigger = $('#centerMenu div a'),
container = $('#content');
// Fire on click
trigger.on('click', function() {
// Set $this for re-use. Set target from data attribute
var $this = $(this),
target = $this.data('target');
// Load target page into container
container.fadeOut(250);
container.load(target + '.php').fadeIn(500);
// Stop normal link behavior
return false;
});
});

Give this a try:
$(document).ready(function(){
var trigger = $('#centerMenu div a'),
container = $('#content');
trigger.on('click', function(e){
e.preventDefault();
var $this = $(this),
target = $this.data('target');
container.fadeOut(500,function(){
container.load(target + '.php', function(){
container.fadeIn(500);
});
});
});
});
Note that 300ms is default fade time. I changed to 500 to show you where to make that change, if desired.

Button targeting 2 'li's in 2 different 'ul's in jquery

I am trying to get a close button to close 2 LIs but they're in 2 different ULs - LIs generated by jQuery dynamically.
When someone enters an item / qty and clicks add they are rendered into a new LI but when they include the pricing, it renders in a different LI
So pressing the "X" in the Item/Qty to close the specific LI wont affect the price corresponding to that item.
Also the "Clear" button works fine just the individual LIs
Any suggestions on fixing this issue without having to add the "X" on the price LI as well?
I hope my explanation makes sense, you can see the code here
$(document).ready(function () {
// Adds typed items and qty to the list
$('#add').on('click', function () {
var item = $('#list').val();
var qty = $('#qty').val();
$('#list-a').append('<li>' + '<div class="delete"></div>' + qty + ' ' + item + '</li>');
var price = $('#price').val();
$('#list-b').append('<li>' + '$' + price + '</li>');
// Resets input field to empty and focus
$('#list').val('').focus();
$('#qty, #price').val('');
});
// Fires Add to List button when enter is clicked
$('#list, #qty, #price').keyup(function (event) {
if (event.keyCode === 13) {
$('#add').click();
}
});
// Deletes/fades out 'li' when X is clicked
$('#list-a').on('click', '.delete', function () {
var listItem = $(this).closest('li');
listItem.fadeOut(500, function () {
listItem.remove();
});
});
// Clear all items on the list and focus back on new shopping item
$('#clear').on('click', function () {
var li = $('li');
li.fadeOut(500, function () {
$(li).remove('li');
});
$('#list').val('').focus();
});
});

You would need to remove the li with the same sibling index from the next ul:
$('#list-a').on('click', '.delete', function () {
var listItem = $(this).closest('li'),
index = listItem.index();
listItem.parent().next('ul').find('li:eq(' + index + ')').add(listItem)
.fadeOut(500, function () {
$(this).remove();
});
});
Demo: http://codepen.io/anon/pen/emdyqX

$('#list-a').on('click', '.delete', function() {
var listItem = $(this).closest('li');
var ind = listItem.index();
listItem.fadeOut(500, function() {
listItem.remove();
});
$('#list-b').find('li').eq(ind).fadeOut(500, function() {
$(this).remove();
});
});
http://codepen.io/anon/pen/OPRzKx

jquery select any dom element on page

Does anyone know how to select any element (possibly on click) on page like body is selected, div is selected, div#foo etc... so i can place it to some variable and edit it later on.
i've tried
$("*", document.body).click(function (e) {
e.stopPropagation();
var domEl = $(this).get(0);
alert("Clicked on - " + domEl.tagName);
});
but it's not working for all elements

You want to get the target property of the event:
$(document).click(function(e) {
e.stopPropagation();
var domEl = e.target; // or $(e.target) to jQuerytize it
alert("Clicked on - " + domEl.tagName);
});
See: http://www.quirksmode.org/js/events_properties.html
Demo: http://jsfiddle.net/karim79/dyHEA/

Try this.
$(function(){
$("*").click(function () {
console.log($(this));
return false;
}
);
});