Develop Reference

Link from another page element to a specific data-filter

I have a HTML portfolio page that has filtering attribute
<ul class="portfolio-filters list-inline">
<li class="filter active" data-filter="all">All</li>
<li class="filter" data-filter="webdesign">Web Design</li>
<li class="filter" data-filter="responsive">Responsive</li>
<li class="filter" data-filter="wordpress">Wordpress</li>
</ul>
And I have another HTML page that has some services. example of one of my codes in the other page:
<div>
<i></i>
<div>
<h4>Web Design</h4>
</div>
</div>
What I want is when user click on this service icon for example, it will redirect the user to the webdesign filter of the portfolio page.
I tried many ways like adding link portfolio.html?filter=webdesign to the a href of the service icon but it didn't work.

I think you should follow a few tutorials on HTML5, CSS 3 and Javascript.
I made a basic version in this codepen. Please note I'm using the URLSearchParams API which is not supported in IE and other older browser. Also, I'm using Ecmascript 6.
What does the algorithm do?
Check the URL, is there a filter parameter (as in http://.../somewhere?filter=wordpress)
If not, do nothing and show everything, otherwise,
get all the content that has a filter class
display the content that match
hide the rest.
The crux of the algorithm lies in the getting of the query parameters, then it's a matter of looping over a collection and changing the style's display attribute (see the documentation for the display attribute)
// 1. get URL query param (does not work on IE, AFAIK)
const url = new URL(window.location.href)
const currentFilter = url.searchParams.get('filter')
// we only filter stuff if a filter is provided
if (currentFilter != null) {
// 2. collect all filters
const collection = document.getElementsByClassName('filter')
// 3. traverse the collection, hide what's not of interest, show the rest
for (let item of collection) {
if (item.classList.contains(currentFilter)) {
item.style.display = 'block'
break
}
item.style.display = 'none'
}
}

Maybe this works for you. Give your li tags specific id's:
<ul class="portfolio-filters list-inline">
<li class="filter active" data-filter="all" id="all-filter">All</li>
<li class="filter" data-filter="webdesign" id="webdesign-filter">Web Design</li>
<li class="filter" data-filter="responsive" id="responsive-filter">Responsive</li>
<li class="filter" data-filter="wordpress" id="wordpress-filter">Wordpress</li>
</ul>
Then you can just link to the specific id:
<div>
<i></i>
<div>
<h4>Web Design</h4>
</div>
</div>
Else you would have to use javascript I guess.

Adding a class and ID to headers using Javascript

The way that Zendesk's Help Centre works is by printing all the sections onto the page without giving them any unique identifier, so it's a pain if you want to implement any sort of scrollspy (updating a sidenav with where you are on the page), and most importantly anchors so that the sidenav actually works.
I'm not that technical and was wondering if anyone knew of a way to add an ID & class to a series of headers using JS?
I'm thinking for each h2 in section-tree-with-article, adding a unique ID, and a class that matches the h2's text?
Any thoughts?

You need to select all the h2 elements, iterate through them and set a class as well as an id with each iteration.
I've simple set the innerHTML as the class. You can modify it according to your use case.
var headers = document.querySelectorAll("div.section-tree-with-article h2");
headers.forEach(function(header, idx) {
header.className = header.textContent.replace(/\s/g, "-"); //You can modify this accordingly
header.id = "uniqueID" + idx; //And similarily the uniqueID
})
<div class="section-tree-with-article">
<ul>
<li class="section">
<h2>Admin 0</h2>
</li>
</ul>
<ul>
<li class="section">
<h2>Admin 1</h2>
</li>
</ul>
<ul>
<li class="section">
<h2>Admin 2</h2>
</li>
</ul>
<ul>
<li class="section">
<h2>Admin 3 4 5</h2>
</li>
</ul>
<ul>
<li class="section">
<h2>Admin 4</h2>
</li>
</ul>
</div>
Here's the same solution in jquery:
$("div.section-tree-with-article h2").each(function(index, value){
var classToAdd = $(this).text();
$(this).attr('class', classToAdd);
$(this).attr('id', "uniqueID" + index);
})

Although this answer does not address your request for a JavaScript solution, I recommend instead using the Help Center's built-in templating system to iterate on the elements and add classes, directly in the html files. Please note that this is only available in the "Professional" and "Enterprise" Zendesk plans.
This example is probably not the best, since you will end up with spaces or other unusable characters in the value of the h2 elements' class attribute (it will replace {{name}} with the section's name), but I hope it will give you an idea of how this works, and how you might use it to achieve a solution.
<div class="section-tree-with-article">
<ul>
{{#each sections}}
<li class="section">
<h2 class="{{name}}" id="{{id}}">{{name}}</h2>
</li>
{{/each}}
</ul>
</div>
will end up something like this:
<div class="section-tree-with-article">
<ul>
<li class="section">
<h2 class="Admin and Settings" id="12345">Admin and Settings</h2>
</li>
<li class="section">
<h2 class="Getting Started" id="45678">Getting Started</h2>
</li>
...[more sections]...
</ul>
</div>
More info on Help Center templating here:
https://support.zendesk.com/hc/en-us/articles/216367358-Help-Center-templating-cookbook-Professional-and-Enterprise-

Removing items based on values where an item can have multiple values

I have a system that lists an number of items from a database, these items can have three different states that can be attached to it, Manual, Auto and VIP. A single item in this list could be either of this states and sometimes two or all three at the same time.
The system also has three filters, Manual, Auto and VIP.
I am trying to build a system so that when a state has changed on a filter (box is checked/unchecked) the system will hide or show items from this list.
So i am struggling with this concept with my current implementation.
here is some code:
<ul class="content-list" id="update-list">
<li class="list-item"
data-auto="1"
data-manual="1"
data-vip="1">
<div class="list-avatar">
<p class="multi-circle">A/M</p>
</div>
<div class="list-details">
<h3 class="list-item-heading">Update #1 </h3><small class="list-timestamp">11/11/13</small>
<div class="list-item-text">
</div>
</div>
</li>
<li class="list-item"
data-auto="1"
data-manual="1"
data-vip="0">
<div class="list-avatar">
<p class="multi-circle">A/M</p>
</div>
<div class="list-details">
<h3 class="list-item-heading">Update #2 </h3><small class="list-timestamp">11/11/13</small>
<div class="list-item-text">
</div>
</div>
</li>
<li class="list-item"
data-auto="0"
data-manual="1"
data-vip="0">
<div class="list-avatar">
<p class="manual-circle">M</p>
</div>
<div class="list-details">
<h3 class="list-item-heading">Update #3 </h3><small class="list-timestamp">11/11/13</small>
<div class="list-item-text">
</div>
</div>
</li>
I have three "data-" attributes attached to each list item, i wanted to use these to detect if the item show be displayed or not but i can't think of a simple way of doing this.
My other thought on the matter would be to add a class to each item saying if it is Manual, Auto or VIP for example
<li class="list-item manual auto vip">
I understand how to remove and display elements this way however it seems a little messy to me.
So what is the best way of achieving this using Jquery? I think i might be over engineering the whole thing.
Thanks for your time.

I think you might be looking for the attribute selector.
For example, when someone wants to see the "data-auto" items, you could do the following:
$("li[data-auto='1']").show();

jQueryUI Tabs: I just need it to show or hide divs! Why is it so hard?

I love jQueryUI, but the Tabs widget seems to be complicating things too much (jQueryUI version 1.10.3).
I know it can load content on the fly and this is all wonderful, but I have here a very simple structure with a form and some DataTables, more or less like this:
<div id="MyContent">
<ul>
<li>Main Data</li>
<li>Additional data 1</li>
<li>Additional data 2</li>
</ul>
<div id="Form">
<form>...</form>
</div>
<div id="SubTable1">
DataTables 1 goes here
</div>
<div id="SubTable2">
DataTables 2 goes here
</div>
</div>
However, things break horribly when I apply jQueryUI Tabs to this. One reason I already know is the use of <base> tag in my code, which makes Tabs "think" I want to load my content on the fly, instead of simply hiding/showing content already there. But even using a hack to fix this, DataTables doesn't render correctly.
And frankly, I don't want to spend days trying to figure it all out to find a fix.
Instead, I would like to know if there is a way to "switch off" all the fanciness of JqueryUI Tabs, and make it just hide and show my tabs, using whatever is inside each div. Is it possible?
That would solve my problem. If I manually create some buttons and associate a click event that simply do a display: none / display: block to my divs, they work like a charm, including DataTables.
In fact, I'm considering dumping jQueryUI Tabs completely and creating the necessary code to do just that, but I would prefer to use jQueryUI Tabs, if possible.
Thanks a lot in advance!

I will admit this is a bit ham-fisted - but it works, as an example.
HTML:
<div id="MyContent">
<ul>
<li>Main Data</li>
<li>Additional data 1</li>
<li>Additional data 2</li>
</ul>
<div id="Form" class="tab active">
<form>My Form</form>
</div>
<div id="SubTable1" class="tab">
DataTables 1 goes here
</div>
<div id="SubTable2" class="tab">
DataTables 2 goes here
</div>
</div>
CSS:
.tab{display:none}
.active{display:block}
jQuery:
$('#MyContent a').on('click',function(e){
var id = $(this).attr('href')
$('div.active').toggleClass('active');
$(id).toggleClass('active', ($(this).attr('class') != 'active'));
console.log()
})
Working jsFiddle

JQuery Mobile UL List Still Not Working fro Dynamic List

Has anyone come up with any solution to the JQuery Mobile UL List View?
I'm currently using JQuery Mobile 1.1.2 Alpha, and the bug I am referring to is an old one:
jQuery Mobile proper way to initialize a listview
My list view looks like this:
<ul data-role="listview" id="store-info">
<li>My First Store</li>
<li>48 Big Oak Lane </li>
<li>Stamford</li>
<li>CT</li>
<li>06903</li>
</ul>
I have tried to use:
$( "#store-info" ).listview();
and also this:
$('#stores_main_view').trigger('create');
on the following
<div data-role="content" id="stores_main_view" class="content ui-content" role="main">
<ul data-role="listview" class="ui-listview">
<li>
<form class="product-form">
<ul data-role="listview" id="store-info">
<li>My First Store</li>
<li>48 Big Oak Lane </li>
<li>Stamford</li>
<li>CT</li>
<li>06903</li>
</ul>
</form>
</li>
</ul>
</div>
Both yield the same error when trying to create a list dynamically:
Uncaught TypeError: Cannot read property 'jQuery1710409190776059404' of undefined
Is there any good solution to this problem yet?

The jQuery mobile code (in the method _createSubPages, exactly the one you quoted in the comment) is expecting created controls to be in a .ui-page.
Simply adding the class on the page where the control resides before calling trigger('create') fixed the problem for me.
$('#page-id').addClass('ui-page')
It also works if you do a
$.mobile.loadPage('#page-id')
Hope this helps.

Try this:
$("#nav-panel").load("nav-panel.html", function () {
$(this).trigger("create");
});