We Keep Coding

jquery custom function call not working

I'm new to jquery, ajax and jstree. I'm using jstree to have my <ul> elements look like a tree structure.
I have the <ul> under a div tag of id = "container". When I execute the html file, the div (id = "container") is passed to jstree function as follows:
$(function() {
$('#container').jstree();
});
My html snippet is as follows:
<div id="container">
<ul id = "treeNodes">
<li>Parent
<ul>
<li>Child1
<ul>
<li>child2-1</li>
<li>child2-2</li>
<li>child2-3</li>
<li>child2-4</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
The tree structure is being displayed fine.
I'm trying to write a jquery function that gets the li element's name as an argument.
For example: when I click Parent, the function should recieve "Parent" as an argument or when I click child2-3, the function should get "child2-3" as the argument.
I attempted to create that function, but it doesn't seem to work. Here's my attempt -
$("#treeNodes li").click(function() {
console.log("hello");
console.log(this.innerHTML);
});
The control seems to go to the function calling the jstree(), but the other function doesn't seem to work.
Any help or tips would be appreciated. Thanks in advance.

Making your structure into a JSTree causes new HTML to be created and those new elements have custom classes and new APIs. So, you have to read the documentation to understand how to use the new structure.
If you look at this documentation page, you'll see an example of what you are after, which hinges on a custom changed event. I've reproduced that example, customizing it for your HTML and console output.
$(function() {
$('#container')
// listen for the custom "changed" event on any jstree
.on('changed.jstree', function (e, data) {
// When you click on a JSTree the event appears to fire on the entire tree
// You'll have to iterate the tree nodes for the selected one.
var i, j, r = [];
for(i = 0, j = data.selected.length; i < j; i++) {
r.push(data.instance.get_node(data.selected[i]).text);
}
console.clear();
console.log('Selected: ' + r.join(', '));
})
// create the instance
.jstree();
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/jstree.min.js"></script>
<div id="container">
<ul id = "treeNodes">
<li>Parent
<ul>
<li>Child1
<ul>
<li>child2-1</li>
<li>child2-2</li>
<li>child2-3</li>
<li>child2-4</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

I have read the documentation from the jstree page: https://www.jstree.com/
There is a class from the jstree called jstree-children, from that class you can obtain the value from the list, like this:
$(document).on('click', '.jstree-children ul li', function (e) {
console.log($(this).html());
});
Try this: https://jsfiddle.net/Mantixd/0jwpz2r1/

Is there a way to get the active categories from jQuery Filterizr?

I want to hide a single item unless a category is selected. I'm using the filteringStart callback to do this. How do I get the active categories array from the filterizr object?

It doesn't look like there's a public method to get active filters in the Filterizr library. It isn't too difficult to write the JavaScript required to figure it out though.
Using one of their examples, the html would look as follows:
<ul class="nav nav-gallery filters-filteringModeSingle" id="filteringModeSingle">
<li class="filtr-button filtr" data-fltr="all">All</li>
<li class="filtr-button filtr" data-fltr="green">Green</li>
<li class="filtr-button filtr filtr-active" data-fltr="orange">Orange</li>
<li class="filtr-button filtr" data-fltr="purple">Purple</li>
<li class="filtr-button filtr" data-fltr="mix">Mix</li>
</ul>
You could get an array of selected values as follows:
var selected = $.map($(".filtr-active").toArray(), function(el, i) {
return $(el).data("fltr");
});
To do something based on a specific value being selected, you could do the following:
if (selected.indexOf("green") !== -1) {
console.log("You selected green!");
}
I hope that makes sense!
Edit:
You could get the unselected filters by tweaking the selector.
var notSelected = $.map($(".filtr:not(.filtr-active)").toArray(), function (el, i) {
return $(el).data("fltr");
});

try this code
$(function () {
console.log($(this)[0].getAttribute("data-filter"));
});

target a <li> so that you can click

I am currently developing a program. It includes a 3 option navigation bar. It uses <li> and does not have id's, when i try to add id's to them it messes up the order, and doesent even work with a click! Im starting to loose faith with it.. can anyone help me on this one,
my GOAL is to have it alert different things on different clicks, so than I could link different html pages,
fiddle used HERE.
<ul class="ui-module menu-selector" id="menu-selector">
<li>Home</li>
<li class="js-is-active">Notif's</li>
<li>Profile</li>
</ul>

Since you don't have ids, I suppose that childNodes property will help a lot.
For example, you can use:
var lis = document.getElementById('menu-selector').childNodes;
// or you can select lis directly...
// var lis = document.querySelectorAll('#menu-selector li');
Array.prototype.slice.call(lis)
.forEach(function(li) {
// do something... like
li.onclick = function () {
console.log(this);
}
});
Note: childNodes (or querySelectorAll return) is NodeList type, and I use Array.prototype.slice.call() in order to use forEach() method on it.
See childNodes for more details.

if you don't want to have ids on your li elements for some reason you can use the following logic to select active li:
$("#menu-selector li.active").on("click", function(){
alert($(this).text())
});

I added id's for you, not sure what you meant by it messing up the order.
HTML
<div class="ui-items">
<header class="ui-module app-header">VoiceBox <i class="entypo-user-add"></i>
<i class="entypo-pencil"></i>
</header>
<div id="outer">
<ul class="ui-module menu-selector" id="menu-selector">
<li id="home_li">Home</li>
<li id="notif_li" class="js-is-active">Notif's</li>
<li id="profile_li">Profile</li>
</ul>
</div>
</div>
Javascript
var listItem = $('#menu-selector > li');
$(listItem).click(function() {
$(listItem).removeClass('js-is-active');
$(this).toggleClass('js-is-active');
});
$('#home_li').click(function(){
alert('home clicked')
})
$('#notif_li').click(function(){
alert('notifs clicked')
})
$('#profile_li').click(function(){
alert('profile clicked')
})
Fiddle http://jsfiddle.net/1swep9oq/2/

Get selectd list value in foundation dropdown

I'm using foundation drop-down
You can have a look at it here:
http://foundation.zurb.com/docs/components/dropdown.html#
I've created a dropdown with the following code
<a href="#" data-dropdown="drop1" >Date Range </a>
<ul id="drop1" class="f-dropdown large date-menu" drop-down-content>
<li id="custom">Custom</li>
<li id="today">Today</li>
<li id="yesterday">Yesterday</li>
<li id="sundaytoToday">This Week(Sun-Today)</li>
<li id="montoToday">This Week(Mon-Today)</li>
</ul>
I want to get the value/id of the selected element
I've tried like below, but it's not working
$('#drop1').click(function(){
var ss=$('#drop1').val();
console.log(ss);
});
I'm a newbie to programming any help appreciated.
Thanks in advance
UPDATE: How to close the dropdown on click?

You need .text() or .html() not .val().
.val() works with form elements like input, select, radio, checkbox etc.
$('#drop1 li').click(function(){
var ss = $(this).text(); //this refers to current element clicked here.
//to get id
var id = this.id;
console.log(ss, id);
});
“this” Keyword

here is correction
$('#drop1 li').click(function(){
var id=$(this).attr('id');//to get id of clicked element
console.log(id);
var h=$(this).text();//to get text of clicked element
console.log(h);
});
update
$('#drop1 li').click(function(){
var id=$(this).attr('id');//to get id of clicked element
console.log(id);
var h=$(this).text();//to get text of clicked element
console.log(h);
$(this).parent().fadeOut(300);
$('.open').removeClass('open');
});

as per doc, class open is added to selected element. you can get selected using:
$('#drop1').click(function(){
var ss=$('this).find('.open').html();
console.log(ss);
});

jQuery UI get the sorted position of LI element in UL

I'm using jQuery UI's sortable for my UL list. Each time the user sorts the list, I want each li element to update it's "position" attribute to it's position in the list.
<ul>
<li position="1">a</li>
<li position="2">b</li>
<li position="3">c</li>
</ul>
So when a user swaps c with a, the position will also update. I tried to use .each but it seems that javascript doesn't follow the order of how the LI elements are displayed but the order of the element's creation.

As mentioned in another answer, using update is all you need:
$(function() {
var $sortable = $('ul').sortable({
update: function(event, ui) {
var counter = 1;
$('li', $sortable).each(function() {
$(this).attr('position', counter);
counter++;
});
}
});
});
Example link

Have you tried :eq selector or index method? Provided you know which li element you're trying to find the position of you could find the position like so:
<ul>
<li id="c">c</li>
<li id="b">b</li>
<li id="a">a</li>
</ul>
var position = $('li#b').index();

You'll want to take advantage of the Sortable "update" event:
$( "ul" ).sortable({
update: function(event, ui) {
var order = $(this).sortable('serialize');
console.info(order);
}
});
You can then use the "serialize" method to pull the updated order of items. One requirement for this to work is that the IDs of each list item contain an underscore, so you'd want to update your HTML to:
<ul>
<li id="position_1">a</li>
<li id="position_2">b</li>
<li id="position_3">c</li>
</ul>