We Keep Coding

Understanding the usage of get() in my sorting script

I recently found a code snippet that I would really like to understand:
var buttons = $('#fruit,#vegetable,#meat').click(function() {
$(this).toggleClass('active');
var classes = buttons.filter('.active').map(function() {
return this.id;
}).get().join(',.');
$('div.fruit,div.vegetable,div.meat').hide().
filter('.' + (classes || 'none')).show();
});
The HTML code :
<div style="float:right; padding:25px;">
<button id="fruit" class="active"><span>fruit</span></button>
<button id="vegetable" class="active">vegetable</button>
<button id="meat" class="active">meat</button>
</div>
<div>
<p>Trying to use buttons as an "or" case rather than "and." When choosing fuit or vegetable, I want to see tomato as part of each list, <em>not just</em> when both are selected.</p>
<div class="fruit">
<p>apple</p>
</div>
<div class="vegetable">
<p>pumpkin</p>
</div>
<div class="vegetable">
<p>okra</p>
</div>
<div class="fruit">
<p>orange</p>
</div>
<div class="meat">
<p>beef</p>
</div>
<div class="fruit vegetable">
<p>tomato</p>
</div>
</div>
The fiddle is here.
I do understand how all the methods work in jQuery like toggleclass, filter and map, I also understand how join works in JS, but in this particular example, I am not able to figure out how get() is working or rather what is it's usage in the script is.
I went through the jQuery documentation for get() and I came across this method for the first time; to me, it seems it's very much similar to eq() in jQuery, but I am still not able to figure out why exactly get is being used in my example.
Can somebody explain this to me ?

.get is used here, because .map returns a jquery style object which contains some functions and information about the contained data. But in this scenario only the values stored within the object (the class names of the active buttons) are wanted. .get is used to get an array containing the raw values and with .join(",.") the values from the array get concatenated to a string. This string then get's used to show all div's that should be active according to the selected buttons.

Are they any syntax highlighting plugins that will allow you to embed an ignorable html element into a snippet?

I am trying to make dynamic code examples for our api that can be constructed from from input html elements.
A paired down example looks like this, I give the user an input to name the device they would like to create.
<input class="observable-input" data-key="deviceName" type="text" value="deviceKey" />
I would then like that input to update code examples (replacing the device name in the example with the one the user inputs).
<code lang="python">
device = { "name": "<span data-observeKey="deviceName">Name</span>" }
client.createDevicewrite(device)
</code>
I have all of the code setup for observing a change in the input and updating the code examples, this works great. All of the syntax highlighters I have looked at, usually chop the snippet up and rerender the example wrapped with its own html (for styling). Is there an option/configurable way to get a syntax highlighter to not strip the these tags, or is there a different approach I should be looking at for preserving the syntax highlighting and still supporting dynamic updates without having to do a full text search of each snippet's rendered tags.
The example output of the pygment (current syntax highlighter I'm using).
<li>
<div class="line">
<span class="n">device</span>
<span class="o">=</span>
<span class="n">{</span>
<span class="s">"name"</span>
<span class="p">:</span>
<span class="s">"Name"</span>
<span class="n">}</span>
</div>
</li>

I decided to just go with a brute force approach, it ended up being decently performant, ill leave my code here if anyone is interested in what I did
https://gist.github.com/selecsosi/5d41dae843b9dea4888f
Since i use backbone, lodash, and jquery as my base app frameworks the gist uses those. I have a manager which will push updates from inputs to spans on the page which I use to dynamically update the code examples

Storing object ID in HTML document: id vs data-id vs?

I would like to have an opinion on storing RESTful object IDs in document for accessing it later from JavaScript.
Theoretically speaking using id for addressing elements in HTML doesn't cut it anymore. Same element can be repeated twice on the page say in "Recent" and "Most Popular" queries which breaks the main point of using id.
HAML even has this nice syntax sugar:
%div[object]
becomes:
<div class="object" id="object_1">
But like I said, seems that it is not a good approach. So I am wondering what is the best way to store objects id in DOM?
Is this the current proper approach?
<div data-id="object_1">

An ID is intended to uniquely identify an element, so if you have a case where you want to identify two or more elements by some common identifier, you can use ID but it may not be the best option in your case.
You can use IDs like:
<div id="d0">Original Div</div>
<div id="d0-0">Copy of original div</div>
<div id="d1">Another original Div</div>
<div id="d1-0">Another copy of original div</div>
<div id="d1-1">Another copy of original div</div>
and get all the d1 elements using:
document.querySelectorAll('[id^=d1]');
or just d1 divs:
document.querySelectorAll('div[id^=d1]')
You could also use a class:
<div id="d0" class="d0">Original Div</div>
<div id="..." class="d0">Copy of original div</div>
<div id="d1" class="d1">Another original Div</div>
<div id="..." class="d1">Another copy of original div</div>
<div id="..." class="d1">Another copy of original div</div>
and:
document.querySelectorAll('.d1')
Or use data- attributes the same way. Whatever suits.
You can also have a kind of MVC architecture where an object stores element relationships through references based on ID or whatever. Just think outside the box a bit.

The purpose why data-selectors where introduces is because the users neednt want to use class or anyother attributes to store value.Kindly use data-selectors itself. In order to make it easy to access them use attributes selector i.e. [attribute='value']. PFB the fiddle for the same and also the example
jsfiddle
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-git2.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body onload="call()">
<div id="1" data-check='1'></div>
<div id="2" data-check='1'>sdf</div>
<div data-check='1'>sdf</div>
<div data-check='1'>sdf</div>
<div data-check='1'>sdf</div>
</body>
</html>
function call()
{
$("#1").html($('[data-check="1"]').length);
$("#2").html( document.querySelectorAll('[data-check="1"]').length);
}
Output: 5 5 sdf sdf sdf

#RobG is right by using 'class' you can get array of elements in JavaScript as-
var divs=document.getElelementsByClassName("className");
\\And you can loop through it(`divs[i]`).
AND according to #RobG and #Barmar data-* attribute is also a good option.
But here is some point(just point, not negative or positive, its totally depends on your application need) I want to discuss:
1] data-* element is HTML5's new attribute. Documentation
2] To retrieve elements in javascript, You need to use jQuery or more bit of JavaScript, coz all direct function available have specific browser support:
Like document.querySelector("CSS selector"); IE8+
document.getElementsByClassName("className"). IE9+
document.querySelectorAll("CSS selector"); etc.
So, basically for this point you need to choose according to your app need and browser compatibility.
3] Performance issue is also there on selecting by data-* attribute... Source
But, generally and if we go for latest application and selecting HTML5, data-* attribute + jQuery is a good option.

I was wondering about this too. Here's my POV using an example component.
CSS - styling across all buttons
Elements should not be referenced in JS using CSS classes because if you have multiple buttons that need to function differently, adding unique CSS classes for each component will get messy.
<div class="my-component">
JS - Grab the component when it can only appear once on a page
While browsers may handle multiple id okay, it would harm maintenance since this would be unexpected behavior from an id.
<div id="my-component">
const myComponent = document.querySelector('#my-component')
JS - Grab the component when it can appear multiple times on a page
ref or data-id could both work. ref has been popularized by React and Vue, so it may be more familiar to developers.
<div ref="my-component">
const myComponents = document.querySelectorAll('[ref="my-component"]')
or
<div data-id="my-component">
const myComponents = document.querySelectorAll('[data-id="my-component"]')

Get onClick element to return to the main element?

I'm awful with javascript and I'm having a problem with this one.
I'm using this code
<script>
function changeNavigation(id){
document.getElementById('members')
.innerHTML=document.getElementById(id).innerHTML
}
</script>
and HTML
`<span onClick="changeNavigation('members')" >MEMBERS</span>
<span onClick="changeNavigation('help')" >HELP</span>`
<div id="members>...</div>
<div id="help" style="display: none;>...</div>
But I can't get <span onClick="changeNavigation('members')" >MEMBERS</span> to actually go to an element "members" without duplicating everything inside of it in another id.
Is there a way to do this?

This can be done using only standard javascript, but personally I'd recommend going ahead and getting used to using jQuery. Here's an example jsfiddle using jQuery: http://jsfiddle.net/JnvCR/2/
Don't forget to include jQuery in your website:
<script src="http://code.jquery.com/jquery.js"></script>

You need to correct your syntax errors. Use onclick instead of onClick (pedantic). Make sure you close your attributes properly, you are missing a few closing " marks.
updated html
<span onclick="changeNavigation('members')" >MEMBERS</span>
<span onclick="changeNavigation('help')" >HELP</span>`
<div id="members">...</div>
<div id="help" style="display: none;">...</div>
There is also an error with your logic as you are simply replacing the contents of div#members with itself.
Updated JS without syntax errors, but still with dodgy logic
function changeNavigation(id){
document.getElementById('members').innerHTML=document.getElementById(id).innerHTML;
}
Demo fiddle
http://jsfiddle.net/ADGCV/
As far as your actual question goes, can you explain what you would like to happen a bit better??
Here's a possible solution http://jsfiddle.net/ADGCV/1/

Condensing re-used HTML (with variations based on variables) via Javascript [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I've got a page that is made up of a container that has several component divs in it. There are dozens of these containers in the markup (a suite type and version) and I show/hide the appropriate ones based on selections the user makes via select boxes.
The content of the component divs changes, but the HTML markup is essentially the same.
The component HTML framework is:
<div class="docs basicEdition720"> // 2nd class here is the suite type/version
<div class="component" title=" /* component title here */ ">
<p class="componentName"> /*component name here */ </p>
<p class="componentType"> /*component type here */ </p>
<p class="links"> /*component links here */ </p>
</div>
</div>
The point here is that I have the "whizbang" component and it might occur in several different containers and it would have exactly the same content, so long as the version of the container is the same. When the version of the container changes, generally the only change the the whizbang component would be the links.
For example, in the Basic Edition 720 suite type and version, the contents of the whizbang component would be exactly the same as the whizbang component in the Enterprise Edition 720 suite.
Relationships:
Title/Name
The component title and name never change based on version. They concretely correlate directly to each other. If 'A', then 'B'.
Type
The component type occasionally changes based on the VERSION of the component name we're using. The "bojangle" component might be type "admin" for 7.2.0, but might be type "user" for version 7.0.4. If 'A' and '1', then 'B'. If 'A' and '2', then 'C'.
Sometimes the type concretely correlates to the name, as in, The "gadget" component ALWAYS has the type "reference".
Links
The links always change based on the version of the component.
Objective:
I'd like to only update the links for different component versions ONE time in the document, not the dozen or so I am currently doing.
I'd like the javascript to churn out the containers automatically based on the known suite type and version. I can give it a framework to know which components belong where, such as:
<div class="docs basicEdition720"> // Here we have the basic edition of the
<div class="comp gadget"> // suite, version 7.2.0. That means I know
<div class="comp bojangle"> // we have the gadget, bojangle, widget,
<div class="comp widget"> // and gizmo components.
<div class="comp gizmo">
</div>
<div class="docs basicEdition704"> // Now we have the basic edition suite,
<div class="comp gadget"> // version 7.0.4. Knowing that, I know we
<div class="comp gizmo"> // only have the gadget, gizmo,and whatsit
<div class="comp whatsit"> // components.
</div>
<div class="docs enterpriseEdition720"> // Now we have the enterprise edition
<div class="comp gadget"> // suite, version 7.2.0. Hey, looks
<div class="comp bojangle"> // pretty much the same as the basic
<div class="comp widget"> // edition of the same version...
<div class="comp gizmo">
</div>
<div class="docs enterpriseEdition704"> // Ditto for enterprise suite v7.0.4.
<div class="comp gadget">
<div class="comp gizmo">
<div class="comp whatsit">
</div>
/* more suites and versions */
Or if it's better to handle the versioning all in JS, that's fine too.
I've written so much basic JS that DOES NOT accomplish my objectives and I'm so bad with JS that I hesitate to give you any kind head-start/jsFiddle. Basically, it should use the HTML framework and fill in the gaps based on variables and the suite version it knows it is in.
So far I've been using stuff like
var gadgetName = " long name here ";
var bojangleName = " long name here ";
var gadgetLink720 = " version 720 link here";
var bojangleLink720 = " version 720 link here";
var gadgetTitle = " Gadget is a thingie that does...";
var bojangleTitle = " Bojangle is this thing that does...";
$(this).html("<div class=\"component\" title=\"" + myTitle + "\">\
<p class=\"componentName\">" + myName +"</p>\
<p class=\"componentType\">Setup Guide</p>\
<p class=\"links\">HTML PDF</p>\
</div>");
});
but have been pretty unsuccessful. NOTE: That's not the best example of what I've accomplished, I've actually (at one point) had it reading what the parent div class was to know what version to automatically throw in, etc.
TL;DR
"WTF dude?! This is thing is huge! You are as stupid as you are ugly."
I know, I'm sorry. I don't know if I can make it more concise than that. The TL;DR is:
"Gee, I have a page that works, but I'm reusing the same content over and over and over. Every time we have a new release, I should just update the dozens of links manually like a good peon, instead of scripting a single-source solution. Ignore me."
:-(

Mustache is one of the best framework this
You can check the demo here

Handlebars will do this for you. The basic idea is that you can substitute JavaScript variables into the HTML DOM using templates like this:
<p>{{hello}}</p>
It also allows for basic looping and logic.
A fiddle to your question is here: http://jsfiddle.net/Yk43x/
For more complex templating, including bindings (so your templates update as your JavaScript model does), I'd recommend Knockout. EmberJS, which uses Handlebars, and Google Angular also enable templating (and bindings), as well as a lot more.