jQuery - remove li from array with delete image - javascript

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.

Related

How do I use session variables with jQuery?

I have a button on one page another button on a different page. This second button has the text in it "0 items selected". When the first button is clicked I want to increase the number in the second button by one.
Seeing it is transferring data over different pages I didn't manage to do it the standard way.
Please do not suggest PHP, I am unable to use it.
var yetVisited = localStorage[0];
if ($('.#CallToActionCustomise').click()){
localStorage++;
}
$('.#CallToActionCustomise').click(function(){
$(".Main_MenuButtonReview").append(localStorage);
});
<button class="Main_MenuButtonReview">0 items selected <i class="fa fa-caret-down"></i></button>
You need to access localStorage as if it were an Object, not an array.
Also, you can only store String values, so to get a number to perform math on, you will need to use parseInt.
localStorage.setItem('yetVisited', 0);
$(".Main_MenuButtonReview").text(localStorage.yetVisited + ' items selected');
$('.CallToActionCustomise').click(function()){
localStorage.yetVisited = parseInt(localStorage.yetVisited) + 1;
$(".Main_MenuButtonReview").text(localStorage.yetVisited + ' items selected');
}
Here's an example.
In addition to the above answer, I think you need to init some tag when it loaded.
Put this code on another page.
$(document).ready(function() {
if (typeof localStorage.yetVisited === 'undefined') {
localStorage.setItem('yetVisited', 0);
}
yetVisited = localStorage.yetVisited;
$('.Main_MenuButtonReview').text(yetVisited + ' items selected');
});
$(document).ready(function() {
// this area means after your page(document) ready completely.
});

Using jQuery / Javascript to apply filter function from an external link when linked page loads

This is an extension of questions I asked here: Owl Carousel 2: filtering items, but keep the sort order using Javascript (hope this is ok).
I have a menu which filters items. I want the filter to be applied when clicked from and external page link. So on page X you click FilterA this directs you to page Y and filters the items to FilterA as if you had just clicked FilterA on page Y.
In the ideal world it would simply use a link such as www.example.com/pageY/#filterA.
You can see the live page here.
This is the filter function:
$(document).ready(function () {
function showProjectsbyCatEur(cat) {
var owl = $(".owl8").data('owlCarousel');
owl.addItem('<div/>', 0);
var nb = owl.itemsAmount;
for (var i = 0; i < (nb - 1); i++) {
owl.removeItem(1);
}
if (cat == 'all8') {
$('#projects-copy8 .project8').each(function () {
owl.addItem($(this).clone());
});
} else {
$('#projects-copy8 .project8.' + cat).each(function () {
owl.addItem($(this).clone());
});
}
owl.removeItem(0);
}
$('.owl8 .project8').clone().appendTo($('#projects-copy8'));
$('#project-terms8 a').click(function (e) {
e.preventDefault();
$('#project-terms8 a').removeClass('active');
cat = $(this).attr('ID');
$(this).addClass('active');
showProjectsbyCatEur(cat);
});
});
My filter menu looks like this:
<div id="filter">
<h1 class="title">Eurorack</h1>
<div id="project-terms8">
<ul class="filter">
<li class="filter"><a id="all8" class="active all" onclick="event.preventDefault();" href="#">Show All</a></li>
<li class="filter 3x"><a id="3x" onclick="event.preventDefault();" href="#">Clocks, Logic & CV</a></li>
<li class="filter 2x"><a id="2x" onclick="event.preventDefault();" href="#">Filters & Resonators</a></li>
<li class="filter 1x"><a id="1x" onclick="event.preventDefault();" href="#">Waveform Modifiers</a></li>
</ul>
</div>
So the answers so far have been helpful but not quite solve my issue. If anyone else has any advice that would be great! It seems using # is not helpful as the filter uses the id this just creates anchors down to the filter, so a /?filter=FILTERITEM would be best.
Alternatively a new filter system would be fine. As long as the sort order remains the same and this can be used with the URL as well as buttons.
You can get a url argument with javascript and use that in the filter.
function getURLParameter(name) {return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null
}
var filter= getParameterByName('filter');
showProjectsbyCatEur(filter);
then make the link something like "www.mysite.com/pageY/?filter=euro".
You have specified a preference to use an appended hashtag, so I'll answer with regard to that.
Assuming somebody makes the following request:
http://www.abstract.pinkpoliceman.com/products/#all8
You can, on DOM ready, retrieve the category/hashtag value and pass it to the function you're already invoking from the click event handler:
$(document).ready(function () {
// INSERT THE DOM READY CODE YOU ALREADY HAVE HERE
var hash = window.location.hash;
if(hash.length > 0)
{
showProjectsbyCatEur(hash.substring(hash.indexOf('#') + 1));
}
});
EXPLANATION:
hash.substring(hash.indexOf('#') + 1)
This will take the hash value of '#1234' and substring it after the point at which the '#' is found. It basically removes the # character.
NOTE:
What the user submits as a hashtag is out of your control. If they don't submit all8, your else will still catch it and try to filter by it. So I suggest you rethink the conditional logic a bit to cater for 'bad' values.
SINCE UPDATE (Request to Use Query String Parameters)
Get the query string parameters:
$(document).ready(function () {
// INSERT THE DOM READY CODE YOU ALREADY HAVE HERE
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
var filter = getUrlVars()['filter'];
if(filter.length > 0)
showProjectsbyCatEur(filter);
});
http://jquery-howto.blogspot.co.uk/2009/09/get-url-parameters-values-with-jquery.html
Url could now look like:
http://www.abstract.pinkpoliceman.com/products/?filter=all8
If you want the hashes to work for links on the same page, you can use an event listener to listen for hash changes:
function filterByHash(){
if(window.location.hash)//.match(/#(all8|\dx)/)
showProjectsbyCatEur(window.location.hash.substr(1));
}
$(document).ready(filterByHash);
$(window).on('hashchange',filterByHash);
You can use the regex to filter out invalid hashes.
In addition, if you want to support old browsers, you can add something like this instead of the hashchange event listener:
$('#filter').on('click','a[href^=#]',function(){
setTimeout(filterByHash,0);
});
The setTimeout pushes the function to the end of the event loop so that it's called after the hash changes.
user3915578 wrote a very nice RegExp, but I think it would be helpful to get a better understanding of query strings as a whole.
The "#" symbol is used by browsers to anchor to certain parts of a page (like how bookmarks work on Wikipedia).
location is a built in object in browsers. The location.search property returns the part of the current URL after the "?" symbol. The query string is the proper way to pass string parameters between pages.
So the query string is the way to go. Each one of your links is going to load the page with a different value assigned to filter. The location object itself can be used to cause a redirect whenever its value changes.
$('#project-terms8 a').click(function (e) {
e.preventDefault();
cat = $(this).attr('ID');
// this line causes a redirect to the same page, but with added query string
// to redirect to a separate page, just build the new url as a string
location = location.origin + location.pathname + '?filter=' + cat;
});
In your document ready function, you'll need to call your filter function on every new load, but only if filter has a value. That's where the rest of user3915578 's code should go.
$(document).ready(function () {
// prev code
var filter = getParameterByName('filter');
if (filter) { showProjectsbyCatEur(filter); }
});
You'll have to reset the active li inside your filter function instead of your click function. Hopefully this clears up your implementation confusion.

Transfer data from one page to another jQuery Mobile

I using PhoneGap to create a Geolocation App following this excellent tutorial (link). Unfortunatelly, I'm having an issue that I can't figure out. The relevant parts that are giving me a headache are these:
//Section 1
$('#history').on('pageshow', function () {
tracks_recorded = window.localStorage.length;
$("#tracks_recorded").html("<strong>" + tracks_recorded + "</strong> workout(s) recorded");
$("#history_tracklist").empty();
for (i = 0; i < tracks_recorded; i++) {
$("#history_tracklist").append("<li><a href='#track_info' data-ajax='false'>" + window.localStorage.key(i) + "</a></li>");
}
$("#history_tracklist").listview('refresh');
});
//Section 2
$("#history_tracklist li a").on('click', function () {
$("#track_info").attr("track_id", $(this).text());
});
//Section 3
$('#track_info').on('pageshow', function () {
var key = $(this).attr("track_id");
$("#track_info div[data-role=header] h1").text(key);
var data = window.localStorage.getItem(key);
data = JSON.parse(data);
});
Section 1 works just fine, the data is stored, and the list is created without any issues. But then in Section 2 is when everything goes to hell. By clicking on the element, a new attribute (track_id) is supposed to be created, but it doesn't. Therefore, in Section 3, the "var key" won't get a value, and as a consequence, "var data" will be null also. As you can imagine, nothing works from there. What am I doing wrong here? I only included what I considered the relevant code, but if more is needed I'll do so. Thansk!
In section 2, I think you just need to delegate click handling to the "#history_tracklist" container, as follows :
$("#history_tracklist").on('click', "li a", function () {
$("#track_info").attr("track_id", $(this).text());
});
Without delegation you have a rule saying :
when any existing li a element within #history_tracklist is clicked execute my function
With delegation, you have a rule saying :
when any existing or future li a element within #history_tracklist is clicked execute my function

Unable to get Quicksand.js working

I'm trying to filter collections of data using quicksand.js. However, I'm having problems getting my data to appear. I have been able to get the data to disappear. Yet, it won't re-appear. I've created a jsfiddle, which is available here. Basically, my JavaScript looks like this:
var $content = $('#stage');
var $data = $content.clone();
function filterData(tag) {
var data = [];
if (tag === null) {
data = $data.find('li');
} else {
data = $data.find('li[data-tags=' + tag + ']');
}
console.log(data);
$content.quicksand(data, {
duration: 800,
easing: 'easeInOutQuad'
});
return false;
}
Everything looks correct to me. I can't figure out what I'm doing wrong.
First, your fiddle is broken. One, you link quicksand 1.3 and pair it with a recent jquery version it doesn't support. Two, you call out the easeInOutQuad without linking the jquery.easing.1.3.js. Three, you have scope issues, the filterData function is not defined globally.
Your real problem, though, is this line in the documentation:
attribute – attribute containing unique value able to identify same item within source and destination collection, default: 'data-id'
None of your "stage" data lis have this attribute so it won't filter them properly. Add it and all seems to work:
<ul id="stage">
<li data-tags="A" data-id="1">Item A-1</li>
<li data-tags="A" data-id="2">Item A-2</li>
<li data-tags="B" data-id="3">Item B-1</li>
<li data-tags="B" data-id="4">Item B-2</li>
</ul>
Updated fiddle.

IE javascript error - possibly related to setAttribute?

I am using Safalra's javascript to create a collapsible list. The script works across several browsers with no problem. However, when I apply the javascript to my own list, it fails to act as expected when I use IE (I'm using 7 at the moment). It simply writes the list, without the expand and contract images.
I copied the Safalra's javascript precisely, so I assume the error must be in my own list. This is how I generated my list:
<body onLoad="makeCollapsible(document.getElementById('libguides'));">
<ul id="libguides">
<script type="text/javascript" src="http://api.libguides.com/api_subjects.php?iid=54&more=false&format=js&guides=true&break=li"></script>
</ul>
(Yes, I do close the body tag eventually.) When I run this in IE, it tells me that line 48 is causing the problem, which appears to be:
node.onclick=createToggleFunction(node,list);
Here's the entire function:
function makeCollapsible(listElement){
// removed list item bullets and the sapce they occupy
listElement.style.listStyle='none';
listElement.style.marginLeft='0';
listElement.style.paddingLeft='0';
// loop over all child elements of the list
var child=listElement.firstChild;
while (child!=null){
// only process li elements (and not text elements)
if (child.nodeType==1){
// build a list of child ol and ul elements and hide them
var list=new Array();
var grandchild=child.firstChild;
while (grandchild!=null){
if (grandchild.tagName=='OL' || grandchild.tagName=='UL'){
grandchild.style.display='none';
list.push(grandchild);
}
grandchild=grandchild.nextSibling;
}
// add toggle buttons
var node=document.createElement('img');
node.setAttribute('src',CLOSED_IMAGE);
node.setAttribute('class','collapsibleClosed');
node.onclick=createToggleFunction(node,list);
child.insertBefore(node,child.firstChild);
}
I confess I'm too much of a javascript novice to understand why that particular line of code is causing the error. I looked at some of the other questions here, and was wondering if it might be a problem with setAttribute?
Thanks in advance.
Edited to add:
Here's the code for the createToggleFunction function. The whole of the script is just these two functions (plus declaring variables for the images).
function createToggleFunction(toggleElement,sublistElements){
return function(){
// toggle status of toggle gadget
if (toggleElement.getAttribute('class')=='collapsibleClosed'){
toggleElement.setAttribute('class','collapsibleOpen');
toggleElement.setAttribute('src',OPEN_IMAGE);
}else{
toggleElement.setAttribute('class','collapsibleClosed');
toggleElement.setAttribute('src',CLOSED_IMAGE);
}
// toggle display of sublists
for (var i=0;i<sublistElements.length;i++){
sublistElements[i].style.display=
(sublistElements[i].style.display=='block')?'none':'block';
}
}
}
Edited to add (again):
Per David's suggestion, I changed all instances of setAttribute & getAttribute...but clearly I did something wrong. IE is breaking at the 1st line (which is simply the doctype declaration) and at line 49, which is the same line of code where it was breaking before:
node.onclick=createToggleFunction(node,list);
Here's the first function as written now:
function makeCollapsible(listElement){
// removed list item bullets and the sapce they occupy
listElement.style.listStyle='none';
listElement.style.marginLeft='0';
listElement.style.paddingLeft='0';
// loop over all child elements of the list
var child=listElement.firstChild;
while (child!=null){
// only process li elements (and not text elements)
if (child.nodeType==1){
// build a list of child ol and ul elements and hide them
var list=new Array();
var grandchild=child.firstChild;
while (grandchild!=null){
if (grandchild.tagName=='OL' || grandchild.tagName=='UL'){
grandchild.style.display='none';
list.push(grandchild);
}
grandchild=grandchild.nextSibling;
}
// add toggle buttons
var node=document.createElement('img');
node.src = CLOSED_IMAGE;
node.className = 'collapsibleClosed';
node.onclick=createToggleFunction(node,list);
child.insertBefore(node,child.firstChild);
}
child=child.nextSibling;
}
}
And here's the second function:
function createToggleFunction(toggleElement,sublistElements){
return function(){
// toggle status of toggle gadget
// Use foo.className = 'bar'; instead of foo.setAttribute('class', 'bar');
if (toggleElement.className == 'collapsibleClosed') {
toggleElement.className = 'collapsibleOpen';
toggleElement.src = OPEN_IMAGE;
} else {
toggleElement.className = 'collapsibleClosed';
toggleElement.src = CLOSED_IMAGE;
}
// toggle display of sublists
for (var i=0;i<sublistElements.length;i++){
sublistElements[i].style.display=
(sublistElements[i].style.display=='block')?'none':'block';
}
}
}
Internet Explorer (until version 8, and then only in best standards mode) has a very broken implementation of setAttribute and getAttribute.
It effectively looks something like this:
function setAttribute(attribute, value) {
this[attribute] = value;
function getAttribute(attribute, value) {
return this[attribute];
}
This works fine iif the attribute name matches the property name, and the property takes a string value.
This isn't the case for the class attribute, where the matching property is className.
Use foo.className = 'bar'; instead of foo.setAttribute('class', 'bar');
node.onclick=createToggleFunction(node,list);
That is probably not what you want. Does createToggleFunction return a function? If it doesn't, then I bet you meant this:
node.onClick = function() { createToggleFunction(node, list); };
If my guess is right then the way you have it will set the onClick event handler to be the result of createToggleFunction, not a function like it needs to be.

Categories

Resources