jQuery remove then add again for live search - javascript

So I have a set of dynamically created content "boxes," generated by a wordpress plugin. Each box is contained within a div with class "front-page-post". I'm trying to create a "live search" that will remove non-matching boxes, but will also add them back when a user changes or erases their search term.
Using $(this).fadeOut(); and $(this).fadeIn(); works, but because the boxes aren't actually being removed - just hidden - the page layout doesn't dynamically update and the boxes stay where they were originally. I can get the page layout to update if I completely remove the boxes using $(this).remove(); but can't figure out how to re-add them back if the search term is updated. Trying to store them within a hidden div on the page with class "store" but this isn't working either.
The page I'm working on is here. Here is my code; any help would be appreciated! Thanks!
<script type="text/javascript">
$(document).ready(function(){
$("#filter").keyup(function(){
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(), count = 0;
// Loop through the comment list
$(".front-page-post").each(function(){
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).clone().appendTo("div.store");
$(this).remove().delay(500); $(window).resize();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).prepend( function() { $("div.store").contents(); } );
count++;
}
});
// Update the count
var numberItems = count;
$("#filter-count").text("Number of Resources = "+count);
});
});
</script>

It took me a while to figure it out, but this seems to work nicely on my browser.
the first line simply disables your function so i could try it in console, you dont need it.
working pastebin sample

Looks like the site has positioned the blocks using positin:absolute, and top, left , which means you have to recalculate those, even if you remove the boxes.

Related

Adding a bootstrap attribute to cells in a DataTables.js column

I'm trying to add an attribute to the first column in my debatable so I just add a class in the columns[] setting called popperup.
However for the bootstrap popover to work I need to add the attribute "tabindex":"0"
This can be done with $(".popperup").attr({"tabindex":"0"})
however this only adds it to the first entries that load 10 in my datatable which then allows the popover to work the problem is when you click the next paginate button or numbered buttons it will not work as the tabindex:0 is missing
I have tried using
$("#Ttable3").on('page.dt', function() {
console.log("here")
$(".popperup").attr({"tabindex":"0"})
});
This only works once you have gone to the next page and then go back again. so you click next page or go to page 2/3/4 etc nothing happens. you go back to page 1 then back to page 2/3/4 and it will work
how can I get it so "tabindex":"0" is on every cell in a column
spend hours working on an issue and fix it the moment you post it on Stackoverflow
I needed to use draw.dt in the on call.
so this
$("#Ttable3").on('page.dt', function() {
console.log("here")
$(".popperup").attr({"tabindex":"0"})
});
becomes this
$("#Ttable3").on('draw.dt', function() {
console.log("here")
$(".popperup").attr({"tabindex":"0"})
});
Assuming you have defined your DataTable and assigned it to a variable...
var table = $('#example').DataTable( {
// your options here
} );
Then you can use the following to iterate over every node in the first column, using the table reference you defined:
var selectedCol = table.column(0).nodes();
for (var i = 0; i < selectedCol.length; i++) {
$(selectedCol).attr({ "tabindex": "0" })
}

How can I modify a list item after I created it with jQuery?

This is my todo list what I made.
(To make my code more readable I tried to comment. I hope it worked.)
If you try my demo, you can add li items with the "add" button. And the li items has 2 more buttons.
I want to create a modify button to users with can modifying their list items. I have no idea what I can to do for this with jQuery.
Second problem is that list buttons don't work perfectly well. Because if I use once a delete button it change the done button to delete an item. But if I dont use the delete button, the done button is working well.
I dont know why, maybe the same class name is the problem?
Here is my demo in JS Bin:https://jsbin.com/natiziqawa/edit?html,js,output
$(document).ready(function(){
$("#add").click(function(){
// Created list elements and their's buttons
var list_item =document.createElement("li");
var remove_button=document.createElement("button");
var done_button=document.createElement("button");
// append the buttons some string to caption buttons
$(remove_button).append("Delete");
$(done_button).append("Done");
// added class name the items to to distinguish them
$(list_item).addClass("item")
$(remove_button).addClass("delete");
$(done_button).addClass("done");
// filled the created items with the input values
var list_text =$("#input").val();
var time=$("#time").val();
// filled the list item with their's buttons and class names and input values
$(list_item).append(time," : ",list_text,done_button,remove_button);
// finally fill the ul with list items but first check out what is written in the input
if(input.value==""){
alert("Please enter an activity")
}
// If the input has some value can go
else{
$("ul").append(list_item);
// after clicked, clear the input field
$("#input").val("");
// list item's buttons
$(".done").click(function(){
$(list_item).click(function(){
$(this).css("color","white")
$(this).css("text-decoration","line-through")
});
});
$(".delete").click(function(){
$(list_item).click(function(){
$(this).remove()
});
});
}
});// main function close
}); // document ready close
The idea behind my solution is to use the contenteditable attribute for the added fields. To do this, you need to dynamically wrap the first two fields in an additional div, as shown here:
$(list_item).append('<div class="edit_item" contenteditable="true">'+time+'</div>'," : ",'<div class="edit_item" contenteditable="true">'+list_text+'</div>',done_button,remove_button);
You will need to replace this code with your existing one. For a better understanding, this code is located in the comment: "// filled the list item with their's buttons and class names and input values"
Also, you need to add this rule to the css to align the fields:
.edit_item {
display: inline-block;
}
And regarding the second question:
You had a targeting problem. You must refer to the current list_item using the closest() method.
For mark:
$(".done").click(function(){
$(this).closest(list_item).css("color","white")
$(this).closest(list_item).css("text-decoration","line-through");
});
For removing:
$(".delete").click(function(){
$(this).closest(list_item).remove();
});

Swap Divs then swap selected option value between two select lists

The Problem:
Before I began adding the div swaps, I could only type into the left (from_value) input and the result of the calculations would be applied via ajax to the right (to_value) input.
I would like to allow the user to type into either box and have the results display in the opposite box they're typing in.
What I am doing to make this happen:
I am swapping the left div with the right div on mouseover of the to_value input. Here's the code i'm using to do the swap:
$.fn.swapWith = function (that) {
var $this = this;
var $that = $(that);
// create temporary placeholder
var $temp = $("<div>");
// 3-step swap
$this.before($temp);
$that.before($this);
$temp.after($that).remove();
return $this;
};
var leftSide = $('#left-side');
var rightSide = $('#right-side');
$('#to_value_input').on('mouseover', function () {
$(rightSide).swapWith(leftSide);
});
This effectively swaps the divs, bringing along with it ids and names of the inputs which retains functionality of my server-side script to perform calculations. As expected, the from_unit select list and to_unit select list are swapped and their values / displayed text are also swapped from one side to the other.
I would like to swap the values and text of the two select boxes either directly before or more likely, directly after the div swap so it appears as if nothing changed on screen.
Similar questions that I have reviewed:
How to swap values in select lists with jquery?
How to swap selected option in 2 select elements?
I have tried several variations of each of the provided solutions. This seems like it should be a fairly simple thing to do but I find myself stuck. Any further help would be greatly appreciated.
The full code base is available on github if you need to see it: https://github.com/pschudar/measurement-conversion
I have made minor changes to the code hosted there to accommodate the div swaps.

Changing a link when a button is focused

Basically I am going with an application style site for mobile view and they wanted a button on the bottom to flip through the pages in order while the nav at the top allows you to flip through them in any order. I want to change the bottom button to link to the following page depending on which one it is on. so I want the button to change links when specific buttons are focused. I tried many different things and can not seem to make it work. Please do your magic.
if(document.getElementById("abt").hasFocus()) {
document.getElementById("golink").href = "#work";
}
I don't believe focus is what you're looking for as focus can be fleeting to track outside of form objects.
I've mocked up a possible solution to help aid you to what you're looking for.
Here is a link to the JSFiddle:
EDIT - Updated Fiddle: https://jsfiddle.net/t0uwff4t/
Javascript in the fiddle:
// Array of sections.
var sections = [
'#first',
'#second',
'#third',
'#fourth',
'#fifth'
]
// Get the last value in the array.
var lastArrayValue = sections[sections.length - 1];
// Button pointer
var btn = document.querySelector('#button');
// On click of the button, do work.
btn.onclick = function() {
// Get the current href.
var href = btn.getAttribute('href');
// Ternary operator setting the index to zero if the user is on the last index of array.
// Else set the index to the next array value.
var index = (href === lastArrayValue) ? 0 : sections.indexOf(href) + 1;
// Set the href attribute.
btn.setAttribute('href', sections[index]);
}
NOTE: While this example works, this is only a mockup - meaning that it doesn't account for rapid button clicking by the user to 'flip pages'.
Good luck and I hope this helps you to your goal.

How do I count the number of hidden divs of a certain class with jquery

I have a dynamic form that I've written in rails. I want to be sure that a user can add no more than five links.
I start with two links and I have another link that allows the user to add another field. I also have a link next to the links that allows the user to remove a field, which sets a hidden field and then hides the field with slideUp();.
I want to know if there are 5 fields on the screen that the user is hoping to submit.
Here's what I'm currently using - this just counts all of the divs with that classname.
if($(".classname").length <5){
//create element dynamically
}
I want to check if "style='display: none;'" How might I do that?
Use the :hidden selector:
if ($(".classname:hidden").length < 5) {
//create element dynamically
}
This will return any element with that class which is not viewable to the user. If you just want to check for display:none, then use filter():
$(".classname").filter(function () {
return $(this).css("display") == "none";
});
You can try like this
$('.classname:not([style*="display: none"])').length

Categories