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()));
});
});
Related
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");
};
});
});
I have the following toggle function filter() where I display the childrow of a table when the <tr> parent is being clicked. In this function I've also included a key shortcut, so whenever ALT+A is pressed all the childrows are displayed.
In addition I have another script, mouseover(), where the background color of the parent tr is changed to #2C4367 hover.
So here's my question: How can I toggle the background-color of a tr parent whenever I expand (click on) it and back to normal when it is closed. This function should also work on all tr parents when the key shortcut is pressed, so the background color of all parent tr's is changed when the shortcut is being pressed.
I hope I made myself clear. Otherwise please say so and I will try to elaborate.
Toggle filter() script:
$(document).ready(function mouseover(){
$(".parent").hover(function(){
$(this).css("background", "#2C4367");
$(this).css("color", "#FFFFFF");
},
function(){
$(this).css("background", "#FFFFFF");
$(this).css("color", "#000000");
});
});
Change bgcolor mouseover() script:
$(document).ready(function filter() {
$('table.detail').each(function() {
var $table = $(this);
$table.find('.parent').click(function() {
$(this).nextUntil('.parent').toggle(); // must use jQuery 1.4 for nextUntil() method
}); /// Below is toggle on image
var $childRows = $table.find('tbody tr').not('.parent').hide();
$("img.pushme").toggle(function funcVis() {
$childRows.show();
},
function() { $childRows.hide();
});
shortcut.add("Alt+A",function(){ funcVis() }); /// Shortcut functions
shortcut.add("Alt+N",function(){ expandform() }); /// Shortcut functions
});
});
Create a CSS class that defines the background-color change, and apply or remove it with
$(target).parent().toggleClass('yourclass');
Insert this line wherever the expand is triggered.
Solved!
JSFiddle
function toggle(it) {
if ((it.className == "") || (it.className == "rowactive")) {
it.className = "rownotactive";
} else {
it.className = "rowactive";
}
}
$(document).ready(function filter() {
$('table.detail').each(function () {
var $table = $(this);
$table.find('.parent').click(function () {
$(this).toggleClass('rowactive');
$(this).nextUntil('.parent').toggle();
}); /// Below is toggle on image
var $childRows = $table.find('tbody tr').not('.parent').hide();
$("img.pushme").toggle(function funcVis() {
$("tr.parent").addClass('rowactive');
$childRows.show();
},
function () {
$("tr.parent").removeClass('rowactive');
$childRows.hide();
});
shortcut.add("Alt+N", function () {
expandform()
}); /// Shortcut functions
});
});
I've broken it again, and no idea how.
I have a CodePen of my recent activities.
What I've been trying to implement is a sortable function that checks first if there's only one #p_scents. If there is, it shouldn't be sortable (ie the .icon-sort shouldn't be activated). However if there is more than one, it should be sortable.
The problem I ran into however is after all but one has been deleted, the sortable functionality is still activated as it doesn't RE-check for how many #p_scents exist.
How can I fix this?
FYI somehow I broke the sortable functionality now o_O
$(function () {
var i = 1;
//ADD ROW
$('body').on('click', '.addPTbutton', function () {
var box = '<table class="manage-pt" id="' + i + '"><tr class="pt-entry"><td class="pt-toggle-group"><input class="pt-button togPTbutton" id="0" type="button" value="▾"><input class="pt-button addPTbutton" id="0" type="button" value="+"><input class="pt-button delPTbutton" id="' + i + '" type="button" value="-"></td><td class="pt-values"><div><input class="vendor" placeholder="*Vendor Name" type="text"><i class="icon-sort"></i><i class="icon-lock"></i></div><div><textarea class="ptCode" name="ptCode" placeholder="*Pixel Tag Code"></textarea></div><div class="page-select"><select><option value="AllPages">All Pages</option><option value="HomePage">HomePage</option><option value="VehicleDetailsPage">VehicleDetailsPage</option><option value="VehicleSearchResults">VehicleSearchResults</option><option value="ContactUsForm">ContactUsForm </option></select></div><div class="area-checkboxes"><p class="wheretosave">*Where?</p><input name="head" type="checkbox"><label for="head">Head</label><input name="body" type="checkbox"><label for="body">Body</label></div><hr/></td></tr></table>';
i++;
$("#p_scents").append(box);
return false;
});
//DELETE ROW
$('body').on('click', '.delPTbutton', function () {
var boxnum = $(".manage-pt").length;
if (boxnum <= '1') {
alert('Cannot Delete Last Remaining Row');
} else {
$(this).parents().eq(3).remove();
}
return false;
});
//TOGGLE BUTTON
$('body').on('click', '.togPTbutton', function () {
var hiddenarea = $(this).parent().next().children().next();
if ($(hiddenarea).is(':hidden')) {
//PT-VALUES OPENED
$(this).val('▾');
$(this).parent().next().children(0).children(0).attr('readonly', false);
} else {
//PT-VALUES HIDDEN
$(this).val('▸');
$(this).parent().next().children(0).children(0).attr('readonly', true);
}
//TOGGLE VISIBILITY OF HIDDEN AREA
hiddenarea.toggle();
});
//CHECKS FOR MORE THAN ONE 1 MANAGE-PT BEFORE ENABLES SORTABLE
$('body').on('click', '.icon-sort', function () {
if ($(".manage-pt").size() > 1) {
$('#p_scents').sortable({
disabled: false,
placeHolder: '.placeHolderHighlight',
handle: '.icon-sort',
});
} else $('#p_scents').sortable({
disabled: true,
});
});
//CHECK TO MAKE SURE ONLY ONE CHECKBOX IS SELECTED
var $onlyOne = $('.onlyOne');
$onlyOne.click(function () {
$onlyOne.filter(':checked').not(this).removeAttr('checked');
});
//LOCK BUTTON ON/OFF LOCKS FORM
$('body').on('click', '.icon-lock', function () {
$(this).toggleClass('locked');
var lockedarea = $(this).parents(0).eq(2);
$(lockedarea).find('input[type=text],input[type=checkbox],textarea,select').prop('disabled', function (_, val) {
return !val;
});
});
});
Your problem is here:
//CHECKS FOR MORE THAN ONE 1 MANAGE-PT BEFORE ENABLES SORTABLE
$('body').on('click', '.icon-sort', function () {...});
When make click on element ".icon-sort" is still sortable. You must use an action that makes the check before sort action begins: like mouseenter.
Here a jsfiddle
it barely working, it worked for the 1st time, but not the next hit..
$('.edit').on('click', itemClick);
itemClick is my custom function..
http://jsfiddle.net/nurullia/ndCty/1/
You seem to be adding elements dynamically to your page.
Try delegating the event.
Replace
$('.edit').on('click', itemClick);
with
$(document).on('click', '.edit', itemClick);
Code
$(document).ready(function () {
// Event when clicked on li
$(document).on('click', 'li', function () {
$('li').removeClass('active');
$(this).addClass('active');
});
// Delegate the .edit event
$(document).on('click', '.edit', itemClick);
// Delegate the input event
$(document).on('blur', 'input', editInputBlur);
function itemClick(e) {
// Stop the propagation when you click on edit
e.stopPropagation();
var $this = $(this),
// Find the closest li
$li = $this.closest('li'),
// Get the text
txt = $li.find('.items').text();
// Add and remove class for li
$li.addClass('active').siblings().removeClass('active');
// Empty the li
$li.empty();
// Create input and append it to $li
var $input = $("<input type='text' maxlength='30'/>").val(txt);
$input.appendTo($li).focus();
}
function editInputBlur(e) {
// You can use $(this) here directly as that is the event target
var $this = $(this),
v = $this.val(); // new edited value
if (v.trim() !== "") {
var html = '';
html += "<a href='#'><span class='items'>" + v + "</span></a>";
html += "<a href='#'><span class='edit'>edit</span></a>";
var $a = $(html);
// Use closest so that it does not break if any
// extra container is added later
$this.closest('li').append($a);
$this.remove();
}
}
});
Check Fiddle
I have two functions.
The first function translates a div click into a checked/unchecked toggle.
The second function translates a checkbox change into a hide/show event.
The problem is that when I use the first function to check/uncheck the box, the second function is not called. I am new to javascript, thanks.
<script type="text/javascript">
$(document).ready(function() {
$(":checkbox").parent().click(function(evt) {
if (evt.target.type !== 'checkbox') {
var $checkbox = $(":checkbox", this);
$checkbox.attr('checked', !$checkbox.attr('checked'));
evt.stopPropagation();
return false;
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(":checkbox").change(function() {
if($(this).attr("checked")) {
$('.'+this.id).show();
}
else {
$('.'+this.id).hide();
}
});
});
</script>
The change event does not fire when you programmatically change the value of a check box. What you can do to ensure it fires is:
$(":checkbox").parent().click(function(evt) {
if (evt.target.type !== 'checkbox') {
var $checkbox = $(":checkbox", this);
$checkbox.attr('checked', !$checkbox.attr('checked'));
$checkbox.change();
}
});
Don't bother with the first snippet. Just use LABEL elements:
<label><input type="checkbox">Some option</label>
Now, when the user clicks the label (the text next to the checkbox), the checkbox will be activated.
The second snippet can be optimized:
$('input:checkbox').change(function() {
$('#' + this.id).toggle(this.checked);
});
you are using '.' which is for class selectors instead use '#' since you are using the element ID. Like this:
$(document).ready(function() {
$(":checkbox").bind('change', function() {
if($(this).attr("checked")) {
$('#'+this.id).show();
}
else {
$('#'+this.id).hide();
}
});
});