Develop Reference

HTML: Additional search filters control

I am using Node.js as a backend and JQuery as a frontend and I have a search box with filters as checkboxes below it see the next image
Now when I click on the filter it will be added to a used filter list also provided as an image
Then when i click on the x next to the filter it will be deleted and also unchecked. all of the prev things are working in the next code:
$('[id^="facet-"]').on('change',function(){
let xMark = '<i id="'+$(this).attr('id')+'-remove-filter" class="fa fa-times-circle" aria-hidden="true"></i>'
let key = $(this).data('key')
let keyVal = '<div id="'+$(this).attr('id')+'-span" class="btn"><span>'+$(this).data('key')+ ' > ' +$(this).data('value')+'</span>'+xMark+'</div>'
if($(this).is(':checked')){
$('.'+key+'-filters').append(keyVal)
}else{
$('#'+$(this).attr('id')+'-span').remove()
}
$('i[id$="-remove-filter"]').on('click',function(){
let checkboxId = $(this).attr('id').split('-remove-filter')[0]
$('#'+checkboxId).prop('checked', 0)
$(this).parent().remove()
})
})
As I said it's working and good so far, what should happen next is when you click on search it will take all checkboxes and post them to get some search results (this is also working since I surrounded the page with one form.
What I need is when the filters set has at least one checkbox inside it to be bordered like the next photo
I did this using the following piece of code:
$('[aria-controls="'+$(this).data('key')+'-facets"]').addClass('has-selected')
This will keep it bordered whenever some filter has been selected once and I can remove the border using
$('[aria-controls="'+$(this).data('key')+'-facets"]').removeClass('has-selected')
Here I have couple of questions
how to keep the border as long as there is at least one selected checkbox and remove it only when there are 0 selected? please note that there is more than one filters set!
I think this could be some sort of a library for people to use (with some adjustments of course). Where do I start with this?
Is there any better to apply this whole procedure? adding a filter , removing the checkbox?

Let me know if this works, I sadly can't test it:
$('[id^="facet-"]').on('change',function(){
var id = $(this).attr('id')
var key = $(this).data('key')
var value = $(this).data('value')
if($(this).is(':checked')){
let xMark = $('<i id="'+id+'-remove-filter" class="fa fa-times-circle" aria-hidden="true"></i>')
let keyElement = $('<div id="'+id+'-span" class="btn"><span>'+key+ ' > ' +value+'</span></div>')
$('.'+key+'-filters').append(keyElement)
keyElement.append(xMark)
xMark.bind('click',function(){
let checkboxId = id.split('-remove-filter')[0]
$('#'+checkboxId).prop('checked', 0).change()
// adding the change() method here will trigger the event all over again to control adding/removing class
$(this).parent().remove()
})
}else{
$('#'+id+'-span').remove()
}
var panel = $('[aria-controls="'+key+'-facets"]')
var checked_num = panel.find('input[type=checkbox]:checked').length
if(checked_num>0)
panel.addClass('has-selected')
else
panel.removeClass('has-selected')
})

jQuery - remove li from array with delete image

I'm attempting to make a menu bar that can have <li> elements added and removed. So far so good, but when I try and remove them I'm running into issues. I've toyed with this for a couple hours and now I'm wondering if this whole process could just be made easier (maybe an object?).
Anyways, here's the full code (80 lines), with comments to follow along.
var tabs = $('.accountSelectNav');
var titles = [];
var listItems = [];
// when the page loads check if tabs need to be added to the ul (menu bar)
$(document).ready(function(e) {
if ($.cookie('listItems') != null) {
console.log('not null');
//return "listItems" to it's array form.
listItems = JSON.parse($.cookie('listItems'));
$('.accountSelectNav').append(listItems);
}
});
$('.selectTable td:first-child').on('click', function(e) {
$('#home_select').removeClass('navHighlight');
//grab the text value of this cell
title = $(this).text();
$.ajax({
url:'core/functions/getAccountId.php',
type: 'post',
data: {'title' : title}
}).fail (function() {
alert('error');
}).done(function(data) {
accountId = $.trim(data);
// store values in the cookie
$.cookie('account_id', accountId, {expires : 7});
$.cookie('title', title, {expires : 7});
window.location = ('home_table.php');
});
// make sure the value is NOT currently in the array. Then add it
var found = jQuery.inArray(title, titles);
if (found == -1) {
titles.push(title);
addTab();
}
// make sure the value is NOT currently in the array. Then add it
found = jQuery.inArray(title, listItems);
if (found == -1) {
addListItem();
//place <li>'s in cookie so they may be used on multiple pages
$.cookie('listItems', JSON.stringify(listItems));
};
});
$("body").on("click", ".deleteImage", function (e) {
var removeTitle = $(this).closest('li').find('a').text();
var removeItem = $(this).closest('li')[0].outerHTML;
//remove title from "titles" array
titles = jQuery.grep(titles, function (value) {
return value != removeTitle;
});
//remove <li> from "listItems" array
listItems = jQuery.grep(listItems, function (value) {
return value != removeItem;
});
// this shows the <li> is still in the listItemsarray
console.log(listItems);
// put the array back in the cookie
$.cookie('listItems', JSON.stringify(listItems));
removeTab(this);
});
$("body").on("mouseover", ".accountSelectNav li", function(e) {
$(this).find('.deleteImage').show();
});
$("body").on("mouseleave", ".accountSelectNav li", function(e) {
$(this).find('.deleteImage').hide();
});
function addTab() {
tabs.append('<li class="navHighlight">' + '' + title + '' + '' + '<img src="images/delete.png" class="deleteImage"/>' + '' + '</li>');
};
function removeTab(del) {
$(del).closest('li').remove();
}
function addListItem() {
var s = ('<li class="navHighlight">' + '' + title + '' + '' + '<img src="images/delete.png" class="deleteImage"/>' + '' + '</li>');
listItems.push(s);
}
So you see I have two arrays of equal length that should always be the same length. One stores the title to be displayed in the tab, the other holds the html for the <li> which will be appended to the <ul>. I have no problem removing the title from its array. However removing the <li> from it's array is becoming a rather big hassle. You see when I get the <li> element after its been inflated the html inside does not exactly match what was put in, the browser adds style elements.
Example, the variable "removeItem" represents the html value of the selected <li> I wish to remove. It looks like this:
<li class="navHighlight">Test1<img src="images/delete.png" class="deleteImage" style="display: inline;"></li>
yet the value in my array "listItems" looks like this:
<li class="navHighlight">Test1<img src="images/delete.png" class="deleteImage"/></li>
So my attempt at removing it from my array always fails because they aren't a perfect match.
Now my question is how do I remove this <li> item? Also is there an easier way to do this whole process and I'm just not seeing it?
Thanks for your time.
EDIT
Fiddle by request here
Easiest way I can explain it.
Click the link to the fiddle.
Click any cell in the "App Name" column
This will add a <li> to the <ul> (menu) above of the table
When you hover over the <li> a picture appears
Click the picture
This should remove the <li>, both from the <ul> and from the array listItems
right now it does not

In the process of making this easier to check, I've taken your JSFiddle and did the following:
removed extra console.log and comments
removed interaction with cookies (since I did not have them in the first place, I figured they wouldn't just the first scenario)
After doing so I reached a point (you can see it here) where the desired functionality just works.
I even went ahead and removed the ajax stuff because that alert was driving me crazy. (here)
Since this works fine, my guess is that your issue lies between the lines that I removed.
Your usage of cookies is as follows:
To load existing tabs and add them back again
To save account_id and title, which is not used back again
To persist the listItems after a new item has been added
I then opened up the console with your version of the fiddle and the execution of javascript stops at $.cookie() with the error undefined is not a function.
This clearly indicates that the issue present in the Fiddle is that jQuery.cookie is not present and so those calls are halting the execution of the rest of your script. This also explains why it just started working when I took them out.
I posted the whole process of how I got there to indicate how I trimmed down the problem to specific parts, which is useful to reduce the problem space. When you're out of options and reach a place when you're lost, it's easier to post a question with less code and the specific part of the problem that you've identified. This will help you in finding the issues that you're facing and StackOverflow to provide proper answers to your questions.
Hope it helps!

Here is the solution I came up with. It should be much easier for people to understand than my original post. Although it's a long read it may be worth it, especially for new developers.
The point of this code is to make a menu bar out of an un-ordered list or <ul>. The menu bar needs to be used on multiple pages. So I'll be using cookies.
I start with this code to get a text value from my table.:
$('.selectTable td:first-child').on('click', function(e) {
// This value will be used later for the name of the tab or `<li>` inside our menu bar or `<ul>`
title = $(this).text();
});
Then I place the value in an array. I do this only if the array does not already have this string inside it. I do not want duplicates:
var found = jQuery.inArray(title, titles);
var titles = [];
if (found == -1) {
titles.push(title);
}
Then I store the array into a cookie, using a library like this:
$.cookie('titles', JSON.stringify(titles));
Now when any page loads that needs this menu bar I run this code to check if there are any values:
$(document).ready(function() {
if ($.cookie('titles') != null) {
titles = JSON.parse($.cookie('titles'));
}
});
Now I need to loop through the array. When I loop through the array I have to do 3 things:
1) Grab the string value.
2) Add the html to my new string so it becomes a list item or <li>.
3) Append the newly created <li> to our <ul>.
Like so:
for(var i = 0; i < titles.length; i++) {
var str = titles[i];
var listItem = '<li class="navHighlight">'
+ '<a href="#">'
+ str
+ '</a>'
+ '<a href="#">'
+ '<img src="images/delete.png" class="deleteImage"/>'
+ '</a>'
+ '</li>';
$('.accountSelectNav').append(listItem);
}
Now, if I want to remove this <li> I click the delete image found inside our <li>. What delete image you say? Look at the html I added again. You will see I add an <img> tag in there.
Now delete like so:
$("body").on("click", ".deleteImage", function (e) {
// grabs the text value of my li, which I want to remove
var removeTitle = $(this).closest('li').find('a').text();
// runs through my titles array and returns an array without the value above
titles = jQuery.grep(titles, function (value) {
return value != removeTitle;
});
});
Then I simply place the new array inside my cookie once again. Like this:
$.cookie('titles', JSON.stringify(titles));
And finally I remove the tab like this:
removeTab(this);
function removeTab(del) {
$(del).closest('li').remove();
}
Yay, I'm done. So now, if anyone has a more elegant way of accomplishing this I'm listening. I have no doubt there's a better way, javascript/jQuery isn't even close to my strong point.
The full code can be found here.

JScrollPane Plugin - Reinitialize on Collapse

I'm trying to get JScrollPane to reinitialize on expand/collapse of my accordion found here. You can demo the accordion by clicking on one of the parents (Stone Tiles, Stone Sinks, Stone Wall Clading, etc).
Right now I set it as a click event using the following JQuery...
var pane = $('.menuwrap')
pane.jScrollPane();
var api = pane.data('jsp');
var i = 1;
$("ul#widget-collapscat-5-top > li.collapsing").click(function() {
$(this).delay(3000);
api.reinitialise();
});
It seems to work when you click the parent the second time, but not the first. I have no idea why but I went into trying to edit the JS for the accordion so that I can add this function when the collapse is complete (as opposed to trying to do this click workaround). The collapse JS can be viewed here.
I tried to add the JS for the reinitialize function here, but I think I'm not doing something properly.
May you point me in the right direction?
Thanks!

The api.reinitialise() is working properly. What is happening is that it updates the size when you click, and at this moment the element is not expanded yet. You may notice that if you expand, colapse and expand again the same section, nothing happens. But if you expand one and then click another one, the ScrollPane will adjust to the size of the first expanded element.
You can solve this with events: place $(this).trigger('colapseComplete') when the colapse ends. Then you can use:
//Listening to the colapseComplete event we triggered above
$("#widget-collapscat-5-top > li.collapsing").on('colapseComplete', function() {
api.reinitialise();
});

Maybe you can alter the addExpandCollapse function to call the reinitialise function at the end of each of its click actions this way :
function addExpandCollapse(id, expandSym, collapseSym, accordion) {
jQuery('#' + id + ' .expand').live('click', function() {
if (accordion==1) {
var theDiv = jQuery(this).parent().parent().find('span.collapse').parent().find('div');
jQuery(theDiv).hide('normal');
jQuery(this).parent().parent().find('span.collapse').removeClass('collapse').addClass('expand');
createCookie(theDiv.attr('id'), 0, 7);
}
jQuery('#' + id + ' .expand .sym').html(expandSym);
expandCat(this, expandSym, collapseSym);
api.reinitialise(); // HERE
return false;
});
jQuery('#' + id + ' .collapse').live('click', function() {
collapseCat(this, expandSym, collapseSym);
api.reinitialise(); // and HERE
return false;
});
}
and to be on a safer side, make sure you have the var api = pane.data('jsp'); line before the above piece of code anywhere in the file.

How to Expand All/Collapse All Using Adi Palaz's Nested Accordion

Adi Palaz's Nested Accordion
This seems like it should be simple but I can't seem to figure this out and I have been sitting here slamming my head on my desk after like four hours without a solution.
You will notice in the demo on the page that there are expand all/collapse all buttons that fire a function to open all the accordion panels or close them.
I DON'T want to use those buttons. I want to write my own function and fire the expand all or collapse all function after the user completes a gesture on a DIV somewhere else on the page.
But I can't seem to figure out how to call the same function the author is using on the buttons to properly expand and collapse the accordion panels.
If it helps, I set up a test page to play with:
http://dl.dropbox.com/u/22224/Newfolder/nested_accordion_demo3.html
And here are the two scripts it needs to work:
Nested Accordion Script
Expand.js
Please help! I am desperate and the author is not responding to emails!

I was able to solve the expand/collapse all problem with the following code, hope it will work for you as well.
function expand(id) {
var o = $.extend({}, $.fn.accordion.defaults, null);
var containerID = o.container ? id : '', objID = o.objID ? o.objID : o.obj + o.objClass, Obj = o.container ? containerID + ' ' + objID : id, El = Obj + ' ' + o.el, hTimeout = null;
$(El + ' a.trigger').closest(o.wrapper).find('> ' + o.next).show().closest(o.wrapper).find('a.trigger').addClass('open').data('state', 1);
}
function collapse(id) {
var o = $.extend({}, $.fn.accordion.defaults, null);
var containerID = o.container ? id : '', objID = o.objID ? o.objID : o.obj + o.objClass, Obj = o.container ? containerID + ' ' + objID : id, El = Obj + ' ' + o.el, hTimeout = null;
$(El + ' a.trigger').closest(o.wrapper).find('> ' + o.next).not('.shown').hide().closest(o.wrapper).find('a.open').removeClass('open').data('state', 0);
}
Example:
expand('#accordion1');
collapse('#accordion1');

I'm faced with the exact same problem and would like to know if you ever found an answer?
The work around I plan to use is something like $('.accordion a').click(); to programmatically click each link in the list - not pretty but it seems to work...

Two years later and I have the same desire... use Adi Palaz nested accordion, but have my OWN styled and specific action expand/collapse all buttons. I did finally get it to work the way I wanted even though I am admittedly a novice level jquery programmer. Here's my key learnings:
I started with example nested_accordion_demo5.html with the #acc1
example. I did not use expand.js at all, I never could get it to
work.
I changed the function defaults in my demo5.html to add the obj: "div".
$("#acc1").accordion({
obj: "div",
el: ".h",
head: "h4, h5",
next: "div",
iconTrigger: true
});
Then I added a div with class="accordion" around the whole ul structure and removed the accordion class from the ul.
I made my own two expand/collapse links and put them inside the div but before the ul. Later I got fancy and added styling to make them look like buttons, but first I got it working.
[Expand All] [Collapse All]
Then I added two new separate event handlers to jquery.nestedAccordion.js using snippets from the one that handles the a.trigger events. I placed them immediately after the existing event handler. Here's my new CollapseAll:
$(Obj).delegate('a.CollapseAll', ev, function(ev) {
$( o.obj + o.objClass ).find('a.trigger').each(function() {
var $thislink = $(this), $thisWrapper = $thislink.closest(o.wrapper), $nextEl = $thisWrapper.find('> ' + o.next);
if (($nextEl).length && $thislink.data('state') && (o.collapsible)) {
$thislink.removeClass('open');
$nextEl.filter(':visible')[o.hideMethod](o.hideSpeed, function() {$thislink.data('state', 0);});
}
});
});
Then I made a second event handler that does the ExpandAll.
I know this could likely be much more efficient, but I am thrilled to at least have it working given my skill level!

getting an element id from a plain javascript call

This example is simplified a bit, but in my ASP.NET web page in my c#/jquery code I am using a right hand context menu that displays ‘rightMenu’ when a right mouse is clicked.
$(document).ready(function() {
$(".RH_signoffrow td").contextMenu({
menu: 'rightMenu'
},
function(action, el, pos) {
var mykey = getkeyforitem(el);
mykey = "Details|" + mykey;
alert(
'Action: ' + action + '\n\n' +
'Key is: ' + mykey
);
if(action == "details"){
trigger_details_panel(mykey);
}
});
};
//for any td in the right hand side - get its row key
function getkeyforitem(el){
var mykey = $(el).parent().find('.hiddenrowkey').text();
// alert(
// 'Internal getkeyforitem Call' + '\n\n' +
// 'Key is: ' + mykey
// );
return mykey;
};
The callback of the menu passes back the element that was clicked, and that can be used to pull the keydata out of the current table row. Once I have that keydata, I can use it to call the real function I was after:
trigger_details_panel(mykey).
This works fine if I only want to use the right mouse, but I want to include an image in some of the rows, so that when the image is clicked, it produces the same effect,as the right mouse menu selection.
I am not sure how to accomplish that cleanly.
I can include an image that links to javascript in my page…
<asp:ImageButton ID="imgDetails" runat="server" ToolTip="Show Details"
ImageUrl="./images/details.gif" OnClientClick="showdetailsclicked();return
false;"></asp:ImageButton>
But how can I get it to call the code:
getkeyforitem(el);
Or at least know the element (el) it belongs to? It seems like there should be a way to use the (this) pointer to get at what I want - but I don't see it.
Am I just missing a more straightforward way to accomplish the whole problem?

If you replace the line:
var mykey = $(el).parent().find('.hiddenrowkey').text();
with
var mykey = $(el).parents("tr").find('.hiddenrowkey').text();
Then you can use this function to find the hidden rowkey from any element in the row.
Edit after comment:
You were right about using this. I'd probably do something like:
function showdetailsclicked(){ var rowKey = getkeyforitem(this);}
However, Im not sure if theres some issue with ASP, I doubt it, but you never know... You may have to do something like:
<asp:ImageButton ID="imgDetails" runat="server" ToolTip="Show Details"
ImageUrl="./images/details.gif" OnClientClick="showdetailsclicked(this);return
false;"></asp:ImageButton>
function showdetailsclicked(el){ var rowKey = getkeyforitem(el);}
Hope that helps!