Develop Reference

Adding the For and id to the element using querySelector

I have this fiddle
https://jsfiddle.net/z40j1gtp/1/
where i am trying to add the for to the parent node and then id to the checkbox so i can use them for accessibility, here ismy code
<div class="cell">
<span class="radio">
<label role="radio" tabindex="0" class="el-radio" data-id="101148" aria-label="A_101148">
<span class="el-radio__input">
<span class="el-radio__inner"></span>
<input type="radio" aria-hidden="true" tabindex="-1" class="el-radio__original" value="2">
</span>
<span class="el-radio__label">2</span>
</label>
</span>
</div>
my JS Code
document.querySelectorAll('.el-input__original').forEach((element, index) => {
var id = element.parentNode.parentNode.getAttribute('data-id')
// element.setAttribute('id','A_'+id)
})
but its not adding it, i even tried adding the console in fiddle but its not showing up

please first try to check if your selector is valid.
document.querySelectorAll('.el-input__original')
will return an empty NodeList as the element does not exist.
i think you are trying to access "el-radio__original" class instead of el-input
please try
document.querySelectorAll('.el-radio__original')

Jquery-ui selectable problems

I have a problem regarding jquery selectable , I have div that contains user information , this is my div
<div class="user-container" id="append_users">
<div class="fc-event draggable-user" ondblclick="sys.callUserProfile('+user.id+')" id="user_'+user.id+'"style="z-index: 9999;" onmousedown="sys.mouseDown()" onmouseup="sys.mouseLeave()">
<div class="container-fluid">
<input type="hidden" value="'+user.id+'" id="user_'+ user.id + '_value" class="userId">
<div class="row">
<div class="col-xs-3 avatar-col">
<img src="'+getUserImage(user.avatar)+'"width="100%">
</div>
<div class="col-xs-9 data-col">
<p class="fullName dataText" >'+user.fullName+'</p>
<p class="usr_Gender dataText" >Male</p>
<div style="position: relative"><li class="availableUnavailable"></li><li class="usr_profesion dataText" >AVAILABLE</li></div>
<p class="user_id" style="float:right;margin:3px">'+user.employee_id+'</p>
</div>
</div>
</div>
</div>
</div>
and I need the whole fc-event div to function as one , so the div with id="append_users" should contain the selectable class and the div with class fc-event should be considered as selection , I tried like this
( "#append_users" ).selectable();
but all childs take the ui-selectee class and it doesn't function at all, so what I want to do is the div with class fc-event should be considered as one, I hope i am clear, anyone please help

The documentation doesn't make it hugely clear, but from looking at the code and descriptions of the demos on the jQueryUI website (http://jqueryui.com/selectable/) it can be seen that the element you execute the "selectable" command against is intended to the container for the things you want to be selectable. It will automatically make all the child elements of that element into things which can be selectable. This is logical because generally you'd want to have several selectable items in a list and be able choose one or more items to select.
So if you want your "append_users" element to be selectable, you have to make the parent of that element the target of your "selectable" command. You haven't shown what the parent is, so for the purpose of example I'm going to assume it's just another <div>:
HTML:
<div id="selectable">
<div class="user-container" id="append_users">
<div class="fc-event draggable-user" id="user_1" style="z-index: 9999;">
<div class="container-fluid">
<input type="hidden" value="1" id="user_1_value" class="userId">
<div class="row">
<div class="col-xs-3 avatar-col">
<img src="https://i.imgur.com/db4KgSp.png" width="100px">
</div>
<div class="col-xs-9 data-col">
<p class="fullName dataText" >user.fullName</p>
<p class="usr_Gender dataText" >Male</p>
<div style="position: relative"><li class="availableUnavailable"></li><li class="usr_profesion dataText" >AVAILABLE</li></div>
<p class="user_id" style="float:right;margin:3px">user.employee_id</p>
</div>
</div>
</div>
</div>
</div>
</div>
JavaScript:
$("#selectable").selectable();
See http://jsfiddle.net/s6Lmy70b/2/ for a working demonstration.
(N.B. This is using very slightly adjusted markup compared to yours, just for demonstration and to make it easier to get it working, but the principle is the same regardless of the exact content being displayed)

jQuery Advanced Selector for Multiple Elements

I am trying to add hidden class on two elements.
$("#grid").closest(".ui-jqgrid").addClass("hidden");
$("#grid").closest(".ui-jqgrid").prev("h3").addClass("hidden");
For the following markup,
<div class="col-sm-12">
<h3>Heading 1</h3>
<div class="ui-jqgrid hidden" id="" dir="rtl" style="width: 1035px;">
<div class="jqgrid-overlay ui-overlay" id=""></div>
<div class="loading row" id="" style="display: none;"></div>
<div class="ui-jqgrid-view" role="grid" id="">
<div class="ui-jqgrid-titlebar ui-jqgrid-caption-rtl" style="display: none;">
<a role="link" class="ui-jqgrid-titlebar-close HeaderButton " title="" style="left: 0px;">
<span class="ui-jqgrid-headlink glyphicon glyphicon-circle-arrow-up"></span></a>
<span class="ui-jqgrid-title"></span>
</div>
<div class="ui-jqgrid-bdiv">
<div style="position: relative;">
<div></div>
<table id="grid" class="ui-jqgrid-btable">
</table>
</div>
</div>
</div>
</div>
</div>
Can I do this in one line without finding the closest(".ui-jqgrid") twice? I don't want to add more classes to markup and also I don't want to use a JS variable here. Can anybody with strong selectors suggest a solution?

Just chain the methods. jQuery returns the manipulated object every time you call a method, so you can just call the next method on the returned object.
This is known as chaining
$("#grid").closest(".ui-jqgrid").addClass("hidden").prev("h3").addClass("hidden");
Explanation
$("#grid") // returns #grid
.closest(".ui-jqgrid") // returns .ui-jqgrid
.addClass("hidden") // returns .ui-jqgrid
.prev("h3") // returns the previous h3 element of .ui-jqgrid
.addClass("hidden"); // returns the h3
UPDATE (Chained and no need for new class)
// Select the closest '.ui-jqgrid', find its parent and hide it's direct children ('h3' and '.ui-jqgrid' div)
$('#grid').closest('.ui-jqgrid').parent().children().addClass('hidden');

You can do this:
$("#grid").closest('.col-sm-12').find(".ui-jqgrid, h3").addClass("hidden");
As you have the id of the grid #grid the traverse up at the wrapper element of all then use .find() method which can take multiple comma separated selectors then add the class on the found elements.
As per your comment you can change to this:
$("#grid").closest('[class^="col-sm"]')

Get the id of a parent tag with a specific class from a form

I want to get the id of <a> tag, with a specific class, which is a parent (somewhere above in the DOM tree) of a form when I submit the form
<div class="article">
<div class="titre">Mon premier article de blog</div>
<div class="resume" style="display: none; ">Ceci est le premier article de blog <a id="1" href="#">link</a></div>
<div class="content">Ceci est effectivement mon premier article de blog
<div class="nb_com">2 commentaires</div>
<div class="form">
<form method="post" action="">
<div class="form_text">
<textarea name="com" id="com" rows="4" cols="122">... </textarea>
</div>
pseudo : <input type="text" name="pseudo" id="pseudo">
mail : <input type="text" name="mail" id="mail">
<input type="button" value="Commenter" onclick="enregistre_com(this.form.com.value,this.form.pseudo.value,this.form.mail.value,this.parentNode.innerHTML">
</form>
</div>
</div>
<div class="comment">
</div>
</div>
When I click on the button, I want to retrieve the value of the id of <a> tag which is in the <div class="resume"> tag. The javascript or jquery expression will take place instead of this.parentNode.innerHTML (it was just test purpose)

Use .closest() to go up to the first shared container (.article) and then use .find() to find the <a> inside the .resume element..
$(this).closest('.article').find('.resume a')[0].id;

$('.form :button').click(function(){
var id = $('.resume a').attr('id'); //
// the variable id contains the content of the id attribute
});
You may want to change the selectors according to your other markup.

I'm not sure which element you're looking for specifically in your example, but you should look into using jQuery's .parents([selector]) method (see API page here)

$('form input[type=button]').click(function(){
var id = $(this).closest('.className').attr('id');
});

this will be the id your tag when the input button is clicked, even with multiple "resume" classes:
id = $(this).closest('.article').find('a').attr('id');
here is a working example:
http://jsfiddle.net/JMEPj/2/

Finally, it look like
<input type='button' value='Commenter' onClick='enregistre_com(this.form.com.value,this.form.pseudo.value,this.form.mail.value,$(this).closest(\".article\").find(\".resume a\").attr(\"id\"))' />
I was in trouble with the " and the ' because all this js form is encapsulated in php source

How to show particular div id on the page using jquery?

I want to show a particular div with particular id on the page. I am able to show the div with class information but when I try to access it by giving div id then it is not working, this is how am trying to access it from javascript.
if((document.getElementById("apMain.stageId").value) == "11"){
doShow();
}else{
alert('else');
}
function doShow(){
$(".bill_info").show();
}
I want to access div with id= stg_Pdel, I have tried using
function doShow(){
$('#stg_Pdel').show();
}
but am not able to get the div open on the page, what should be the right approach of doing it ?
My div is:
<div class="bill_info">
<h3>Additional required fields</h3>
<div id="stg_install">
<div class="row">
<span class="label">
<form:label path="billingInfo.otc" cssClass="normalText" cssErrorClass="normalTextRed" >OTC:</form:label>
</span>
<span class="formw">
<form:input path="billingInfo.otc" cssClass="normalField" cssErrorClass="validationError" size="25" disabled='true'/>
</span>
<span class="error">Values for all charge fields must be numeric.</span>
</div>
</div>
<div id="stg_Pdel">
<div class="row">
<span class="label">
<form:label path="billingInfo.priceId" cssClass="normalText" cssErrorClass="normalTextRed" >Price Type:</form:label>
</span>
<span class="formw">
<form:select path="billingInfo.priceId" cssErrorClass="validationError" disabled='true'>
<form:options items="${priceTypes}" itemValue="key" itemLabel="value" />
</form:select>
</span>
</div>
</div>
<div id='stg_closed'>
<div class="row">
<span class="label">
<form:label path="billingInfo.billingClassId" cssClass="normalText" cssErrorClass="normalTextRed" >Billing:</form:label>
</span>
<span class="formw">
<form:select path="billingInfo.billingClassId" cssErrorClass="validationError" disabled='true'>
<form:option value="" label="--Select--" />
<form:options items="${billingTypes}" itemValue="key" itemLabel="value" />
</form:select>
</span>
</div>
</div>
<div style="clear:both"></div><br/>
</div>

You're missing a closing </div> tag right before that one, so it's inside the previous one ("stg_install"). An outer "display: none" will override (sort-of) the "display: block" (or whatever) on the inner <div>.
If it's not the <div> nesting issue that was present in the initial post of the question, then perhaps there's a hint of the problem where you mention showing the <div> with class "bill_info". If that whole thing is currently not showing, then calling .show() on another <div> (the "stg_Pdel" <div>) will have no effect. Again, the outer block will hide it no matter what it's "display" style is set to.
If the ".bill_info" <div> is hidden, you need to do something like this:
function doShow(stage) {
$('.bill_info').show()
.children('div').hide().end()
.find('#' + stage).show();
}
You'd pass "doShow" either "stg_Pdel", "stg_install", or "stg_closed", and it would make sure one of those inner <div> elements is showing. edit for more detail — The idea is to do the following things:
Make sure that the over all "bill_info" block is visible;
Find the immediate child <div> elements and hide them all;
Find the target "stg" <div> and make it visible
Note that using .find() is not really necessary because you're searching by "id" value, but it should work.
If you need the function to work on more than one stage, you could do it like this:
function doShow() {
$('.bill_info').show()
.children('div').hide();
for (var ac = 0; ac < arguments.length; ++ac) {
var stg = arguments[ac];
$('#' + stg).show();
}
}