Develop Reference

How to add ChargeBee link to HTML element with JavaScript?

I'm using Charge Bee Payment Gateaway on my website (who don't know what it is, it's a payment gateaway created from their website, I just insert the link into my website and the "Plan" can be bought from my website). Now I'm using Supsystic Pricing Tables Plugin and at the bottom I have a button which should lead to payment, but the plugin doesnt allow me to add HTML element inside the button so I can actually add it, and I think my only option is to somehow append the classes to already existing classes with javascript or jQuery.
This is the button from plugin:
<a class="ptsEditArea ptsInputShell dt-sc-button charge-bee" style="color: #fff !important;">GET STARTED</a>
And this are the data-cb-types that I need to append to this button code so it can open ChargeBee transcation:
data-cb-type="checkout" data-cb-plan-id="Pet_sitter_three_monthly"
Now is there any way I can add this classes to the <a> link I shared above.
Note that on the plugin page I can add classes to the button but I can't add data-cb-type and data-cb-plan.
If anyone can help I would be much appricated. Best wishes!

You can use Element.setAttribute() to achieve this in JS.
var e = document.getElementsByClassName('charge-bee');
e.setAttribute('data-cb-type', 'checkout');
e.setAttribute('data-cb-plan-id', 'Pet_sitter_three_monthly');
Doing so would add data-cb-type="checkout" data-cb-plan-id="Pet_sitter_three_monthly" to .charge-bee.
CodePen Example

JQuery to expand all collapsible sections of a page (from external website)

The page contains multiple sections. Each section is represented by a TD block (see code below), the actual page would show a ">" icon (hovering over it shows the a href: javascript:void(0)), and when manually clicked, it would expand the section by a POST call to the endpoint from the SPAN block.
<td id="abc-parent" data-column="parent" data-row="abc" class="mt-cell mt-center">
<a href="javascript:void(0)">
<span class="a-declarative" data-action="myitable-fetch-rows" data-myitable-fetch-rows="{"endpoint":"/hz/inventory/variation?parentRecord=abc","rowId":"abc"}">
<div class="mt-variation-icon mt-variation-expand"/>
</span>
</a></td>
I am looking to create a bookmarklet containing a line of JQuery. And when called, it would expand all collapsible sections of a page.
What I mean is something like this (note this does not achieve what I described above):
javascript:jQuery('.a-declarative').each(function(i,e){e.click()})

I think you are looking for the "Trigger" function:
.trigger( eventType [, extraParameters ] ) Description: Execute all handlers and behaviors attached to the matched elements for the given event type.
https://api.jquery.com/trigger/
So your code above should be something like:
$('.a-declarative').trigger('click');
Use at your own risk as this is not a very stable way to trigger events.

Create a global class .active for all the expandable areas (make sure they all have it, even if you have to add it after another class="another active")
Assure .active is the expanded state. Then call it like below.
$('.item').toggleClass('active');
Simple jsfiddle demo of this.
If for some reason you can't alter the mark-up to make a global active class, you may have to call it with all the 'expanded selectors' (but should be no reason for this)
$('.item').toggleClass('active expanded open');
For help on the bookmarklet aspect; this is a cool link that should help you out; but all you should be doing is defining the above in a function and then trigger with a .click() event.
Update! I just sent another pointer via comment section below; but you know you can add a class .active via jQuery to all the toggles that share same class or ID. But you will still have to investigate how the toggles were built on this external website for you to incorporate the expanded state with your new .active state. There is no way for use to know this as you didn't post that code; but it's typically found in the .css pretty easily.
$('td').find('.mt-center').addClass('active');

How to observe multiple states in a handlebar template from an ember controller or component

I'm new to ember and am struggeling with the typical "how would one do that"-Problem. What I've got is fairly simple and I know how to do it, but my way is so complicated that I do not think it's correct.
The case:
<ul>
<li>{{link-to top-level}}</li>
<li>{{link-to another-top-level</li>
<ul class="submenu">
<li>{{link-to submenu</li>
</ul>
</ul>
What should happen is:
When a route is clicked, the corresponding list element should become active.
When a submenu is clicked the corresponding upper ul-element should get the class open
It's a fairly simple case with jQuery, but I understand that this is not scalable and abstracted and stuff.
Therefore I started with this approach:
Create a controller / template construct for the entire navigation to handle it's state (there are some other things I need to check as well, so it came in handy).
since ember adds the active class to the anchor tag I created a component to observe that:
Like:
export default Ember.Component.extend({
tagName: 'li',
classNameBindings: ['active'],
active: function() {
return this.get('childViews').anyBy('active');
}.property('childViews.#each.active')
});
Replacing the li elements with {{linked-list}} does indeed work.
But what next? Do I need to add another component to watch the component to watch the build in behaviour of active links? Do I have to write dedicated MVC-Classes for all the DOM Elements?
There has to be a simpler way, I think. I already created a whole lotta files for such a simple behaviour that I'm thinking I'm totally on the wrong track.
My gut feeling is: That is view logic and the view should just observe a few states in the template and that's it.
What's the leanest approach to the problem?

I don't know if I understand your question right, but why you want to add the class open to the corresponding upper element? It automatically get active assigned. And with correct CSS it should work as expected.
I have created a small example demonstrating what I mean. Please have a look and let me know, if that's the solution for you or what's your problem with this solution.
http://emberjs.jsbin.com/wifusosadega/7/edit
EDIT
Here is a Bootstrap flavored version: http://emberjs.jsbin.com/wifusosadega/9/edit .

side sliding menu tab

i want to implement a right side sliding menu similar to the one in amazon.com..
i am trying to use javascript to edit the script on every mouseover/onclick event..
i want to hide/show the table on every event.
function show(a){
var id="myMenu"+a
if (i<-12){
i=i+speed;
document.getElementById(id).style.left=i;
}
}
function hide(a){
var id="myMenu"+a
if (i>-135){
i=i-speed;
document.getElementById(id).style.left=i;
}
}
this should be good to show/hide the tables.. but how to id dynamically add two tables one over another..because the main menu table will always be visible, but the sub menu when hidden will be beneath the main menu..
any method to do the same?
am i in the right path?

Definitely on the right path, this is a good test of concept.
I would suggest you look at jQuery (or other JavaScript libraries like Scriptaculous) specifically at the slideToggle() and toggle() methods.
Don't want to give it all away, but take a look at the Amazon source code, you may get some helpful little tips. :P

How to use onmouseover?

I have a list being displayed on a JSP. On mouse hover on any of the value i need to show a description corresponding that value. Need to show description not as an alert and also cannot make the values as hyperlink.
eg.
suppose the value is ABC so on mouse hover should show AppleBoyCat.
need to use onmouseover. let me know how to do it..

What do you want to do? If you just want to show a tooltip, you can set the title attribute of any element and it will be displayed as a tooltip.
Also, the abbr tag can be used as tooltips too:
<abbr title="test">stuff</abbr>

You can go about it in two ways:
1 - a hidden dom object (a div for instance) which reveals itself when you roll over whatever
or
2 - you can rewrite the html of the particular element you're mousing over.
You can load this data in when you load everything else (either as Javascript objects, or as markup, though that's much bulkier) or you can asynchronously load the description data from a service when you mouse over (though you'll have more lag).
jQuery is a quick and dirty way to achieve this (more quick than dirty), but straight JS or pretty much any other JS library will do as well.

Perhaps not the cleanest solution but something like this:
<a class='hover' rel='tooltip'>Link</a>
//Some hidden div, putting css inline just for example
<div id='tooltip' style='display:none;'>Content</div>
$(function() {
$('.hover').mouseover(function() {
var tooltip = $(this).attr('rel');
$('#' + tooltip).fadeIn();
});
});
And offcourse add a callback hiding it again. It just takes the value from rel of the link and use as an id for the div to show.
This is a quick and dirty solution, can be made alot smoother if you just work with it a little;)
There also alot of plugins out there allowing the same functionality in a cleaner fashion.
*Edit: Just noticed you added a comment on another post that you can't use jQuery.. shouldn't tag a post with something you're not intending to use.

As TJHeuvel already said, you can simply use the title attribute.
Best approach is to build the list with both the value and title attribute from within JSP, if not possible for some reason, you can build client side array of each value and its corresponding description then using JavaScript dynamically assign the title on mouseover.
Show us some more code to get more/better help.

For simple tooltips, the title attribute is most effective, as pointed out by TJHeuvel
If you need more advanced tooltips with HTML and CSS formatting, I'd suggest you use an external library.
One that works nicely without jQuery ist wz_tooltip download here, documentation here
When included correctly, you can add tooltips by calling the functions Tip() and UnTip() as follows:
Homepage