You can see the site I am working on here: zelda.wptoolkit.us
Basically, I have a form with checkboxes that lists a bunch of 'ingredients' which are actually WordPress post tags. Users will click the ingredients they want and then it will auto update the 'recipe' posts based on whether the recipes (posts) include these ingredient options (tags).
My question is, how do I store an array of 'checked' boxes, then use this array of post tag slugs to add a class to their corresponding link found in the recipe result card?
Here is a mock up of what I am trying to accomplish:
https://cloudup.com/cNfVNMzePpl
Try this out. I think that's what you're after. Can't really test it but it should work
$(".wpas-checkbox").change(function() {
if(this.checked) {
var val = $(this).val().toLowerCase();
var activeClass = 'active';
$('.myCard a').each(function() {
if(val == $(this).text().toLowerCase()) {
$(this).addClass(activeClass');
}
});
}
});
Problem is that checkbox val not equal a link text for example
value="any-flower" in checkbox but in link text is "Any Flower".
So must select label text of any checkbox:
var label_text = $('---checkboxSelector---').next().html();
and push to your checkedAttr variable
Then in complete function of ajax :
$('.myCard a').each(function() {
var a_text = $(this).text();
for (var i = 0; i < checkedAttr.length; i++) {
if(checkedAttr[i] == a_text ) {
$(this).addClass('activeClass');
}
}
});
Found it! Had to modify Saeeds code, but he is a gentleman and a scholar who I am indebted to now!
<script>
(function($) {
var checkedAttr = [];
$("input.wpas-checkbox[name='tax_post_tag[]']:checked").each(function(){
checkedAttr.push($(this).val().replace(/-/g, " "));
});
console.log(checkedAttr);
$('.myCard a').each(function() {
var a_text = $(this).text().toLowerCase();
for (var i = 0; i < checkedAttr.length; i++) {
if(checkedAttr[i] == a_text ) {
$(this).addClass('activeClass');
}
}
console.log('a_text: ', a_text);
});
})( jQuery );
</script>
Related
In this example ill have a filter function but it will only search value in the table if i type inside the input text field, so i what i need help on is that i want that this function filters data when the input is changed by code not by a user inserting text inside the input.
<script>
$(document).ready(function(){
$("#txtSearch").on("change", function() {
var value = $(this).val().toLowerCase();
$("#tblSearch tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
This second script will change the value of the txtSearch input to explain how i want the filter option to be working. By a changed input but not when a user type on it.
function selectedRow(){
var index,
table = document.getElementById('taCiclo');
for(var i = 1; i < table.rows.length; i++)
{
table.rows[i].onclick = function()
{
document.getElementById("id_ciclo").value = this.cells[0].innerHTML;
//i've tried the trigger or eventDispatcher is this part too, but is not working at all.
document.getElementById("id_ciclo").value ;
if(typeof index !== "undefined"){
table.rows[index].classList.toggle("selected");
}
console.log(typeof index);
index = this.rowIndex;
this.classList.toggle("selected");
console.log(typeof index);
};
}
}
selectedRow();
this is how i soved it, thanks for yout help!
var el = document.getElementById("id_ciclo");
el.value=this.cells[0].innerHTML;
el.dispatchEvent(new Event('change'));
I am trying to append an error message to html once there was no match in the search bar. I have a list and once there is no match the list items get display:none; That's when i want to have the message. The problem is that being inside a loop to iterate through the list this message is appended the same number of times as the number of list items.
Updated code: it seems the error message doesn't appear each time i search for a student that is not a match...unless i refresh the page. Also sometimes even when i have the matching student the error shows although it shouldn't.
//add search bar
$( ".page-header" ).append('<div class="student-search"></div>');
$( ".student-search" ).append('<input id="input-search" placeholder="Search for students..."/><button id="search">Search</button>');
$('.page').append('<div class="error"></div>');
$('.error').append('<p>"Student not found!"</p>');
$('.error').hide();
var found = true;
//myFunction
function myFunction() {
var input = document.getElementById("input-search");
var filter = input.value.toUpperCase();
var ul = document.getElementsByClassName("student-list");
var li = document.getElementsByTagName("li");
for (var i = 0; i < li.length; i++) {
var h = li[i].getElementsByTagName("h3")[0];
if (h.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
found = true;
} else {
li[i].style.display = "none";
console.log('Hello! Student is not found!');
found = false;
}
}
$('.pagination').hide();
if (found === false) {
$('.error').show();
}
}
//myFunction end
// when the input is empty return to page 1, empty the error div, show pagination,
$('#input-search').on('keyup', function() {
if($(this).val() === '') {
$('.error').empty();
go_to_page(0);
$('.pagination').show();
}
});
$('#search').click(function(){
myFunction();
});
Thanks,
Alina
I made a demo for you, I hope it's what you want:
https://jsfiddle.net/jondion/xpdof2jh/14/
First, every time the user makes a search, we need to remove all the previous errors. I added a variable found to track if the username matches the filter. I added conditions to show the search results.
Reset the .error when the input is empty.
$('input').on('keyup', function() {
if($(this).val() === '') {
$('.error').empty()
}
});
There is a table which contains an user dropdown per row. Needs to prevent of selecting duplicate users of dropdown in the table.
While selecting the duplicate user in the above table as "easy",The js code should keep the first of user dropdowm the rest of duplicate user dropdown wants to remove from table.
HTML
Javascript Code
function checkDuplicateUserId(obj){
var user_id=$("#"+obj.id+" option:selected").val();
$('tbody#data tr select').each(function (i, row) {
if ($('tbody#data tr select').find('option[value="' + $(this).val() + '"]').size() > 1) {
alert();
}
});
}
function checkAlreadySelected(obj){
checkDuplicateUserId(obj);
var num = parseInt($(obj).attr('num'));
var user_id=$("#"+obj.id+" option:selected").val();
var next_user_id=$("#user_id_"+eval(num+1)+" option:selected").val();
if(user_id && typeof next_user_id == 'undefined'){
var row = updateSrNo(num);
$("#data").append(row);
}
}
As i mentioned in the js code, I have written a function as called as checkDuplicateUserId() to detect the duplicate dropdown from the table, Unfortunately the alert() not prompted while select the duplicate users.
What's the issue of jquery code which i have written wrongly there?
If you have other way to accomplish this, Please say it
Thanks in advance
Try this:
function checkDuplicateUserId(obj){
var user_id=$("#" +obj.id + " option:selected").val();
if( $('tbody#data tr select option:selected').filter( function(){ if( $(this).val() == user_id ) return true; } ).length > 1) {
alert('something');
}
}
You can do something like this:
function checkAlreadySelected(obj){
var user_id=$("#"+obj.id+" option:selected").val();
$('tbody#data tr select').each(function (i, row) {
if ($(this).val()==user_id) {
return false ;
}
});
return true ;
}
I have a form which contains buttons to add and delete rows. My javascript function to check all checkboxes works for the first row, but once I add more rows to the form, the first row is still the only one that gets checked.
Any tips?
Here is my javascript function:
<code>
//checks all rows
function checkAll() {
var masterCheck = document.getElementById('masterCheck');
var on = false;
if(masterCheck.checked==true) {
document.getElementById('checkbox').checked=true;
} else {
document.getElementById('checkbox').checked=false;
}
}
</code>
And here is the form:
http://crimsonroot.com/files/freelance/new.html
Any help is appreciated!
I found out what was wrong! #Mohammed your answer really helped. There were just one or two syntax errors that I found. In order to check and uncheck all of the boxes, I needed to add a boolean variable as an input to the function as follows:
//checks all rows
function checkAll(bool) {
var masterCheck = document.getElementById('masterCheck');
var allcheck = document.getElementsByClassName('checkbox');
var on = false;
for (var i = 0; i < allcheck.length; i++) {
if (masterCheck.checked == true) {
allcheck[i].checked = true;
} else {
allcheck[i].checked = false;
}
}
}
For some reason, this was the final piece to the puzzle. Thanks for all of the help!
You should try something like this.
$("#masterCheck").click(function () {
$('input:checkbox').not(this).prop('checked', this.checked);
});
Since document.getElementById() returns first element, because id cannot be used more than one. To make it usable, add a class checkbox and try the following code:
//checks all rows
function checkAll() {
var masterCheck = document.getElementById('masterCheck');
var allcheck = getElementsByClassName('checkbox');
var on = false;
for (var i = 0; i < allcheck.length; i++) {
if (masterCheck.checked == true) {
allchecked[i].checked = true;
} else {
allchecked[i].checked = false;
}
}
}
Would anyone know of a ready-made script or plugin providing:
-Shift click for check/uncheck all in range
-CTRL click to select or unselect all
That can works off the check inputs 'name' (instead of all on a page or all inside a div):
input[name='user_group[]']
input[name='record_group[]']
I've been using a couple of scripts (javascript and jQuery) but they're based on all checkboxes in a div or table and I'm not smart enough to roll my own or modify another script. Google searching on this has been a little difficult (too many common terms I think)...
Thanks Much Appreciated!
I started playing around with this script, although it's missing a CTRL+Click feature (select all/none control).
In it's original form it works against all checkboxes on a page. I changed the "$('input[type=checkbox]').shiftClick();" linke to "$("input[name='selected_employees[]']").shiftClick();" and as far as I can tell it seems to be working perfectly now against only the single checkbox group.
The only flaw (for my requirements) is there is not a CTRL+Click function to toggle check or un-check all checkboxes in the group.
<script type="text/javascript">
$(document).ready(function() {
// shiftclick: http://sneeu.com/projects/shiftclick/
// This will create a ShiftClick set of all the checkboxes on a page.
$(function() {
$("input[name='selected_employees[]']").shiftClick();
// $('input[type=checkbox]').shiftClick();
});
(function($) {
$.fn.shiftClick = function() {
var lastSelected;
var checkBoxes = $(this);
this.each(function() {
$(this).click(function(ev) {
if (ev.shiftKey) {
var last = checkBoxes.index(lastSelected);
var first = checkBoxes.index(this);
var start = Math.min(first, last);
var end = Math.max(first, last);
var chk = lastSelected.checked;
for (var i = start; i < end; i++) {
checkBoxes[i].checked = chk;
}
} else {
lastSelected = this;
}
})
});
};
})(jQuery);
});
</script>
I believe this should work!
Working demo on jsFiddle: http://jsfiddle.net/SXdVs/3/
var firstIndex = null;
$(":checkbox").click(function(e) {
$this = $(this);
if (e.ctrlKey) {
if ($this.is(":checked")) {
$("input[name='"+ $this.attr("name") +"']").attr("checked", "checked");
} else {
$("input[name='"+ $this.attr("name") +"']").removeAttr("checked");
}
} else if (e.shiftKey) {
$items = $("input[name='"+ $this.attr("name") +"']");
if (firstIndex == null) {
firstIndex = $items.index($this);
} else {
var currentIndex = $items.index($this);
var high = Math.max(firstIndex,currentIndex);
var low = Math.min(firstIndex,currentIndex);
if ($this.is(":checked")) {
$items.filter(":gt("+ low +"):lt("+ high +")").attr("checked", "checked");
} else {
$items.filter(":gt("+ low +"):lt("+ high +")").removeAttr("checked");
}
firstIndex = null;
}
}
});