We Keep Coding

How to hide the values in jquery choosen dropdownlistbox?

Hi I am developing one jquery application where I have one choosen dropdownlistbox and gridview. The first column of gridview contains checkboxes and at the top it also contains check all button. For example if I check 3 rows inside the gridview then corresponding values in dropdownlistbox i need to disable. I am trying as below.
This is the code to get all the cheked values from gridview.
var checkedValues = [];
$("#<%=gdvRegretletter.ClientID %> tr").each(function () {
if($(this).closest('tr').find('input[type="checkbox"]').prop('checked', true))
{
checkedValues += $(this).val();
}
});
Once i get values in array and when i go to dropdown i have below code.
$('.limitedNumbSelect').change(function (e) {
$("#limitedNumbSelect > option").each(function () {
//if (this.value == checkedValues) If this.value is equal to any value from checkedValues then i want to hide that value inside dropdownlistbox.
// Here i want to hide all values of checkedValues array(values will be same in dropdownlistbox)
});
});
I tried as below.
$('.limitedNumbSelect').change(function (e) {
var checkedValues = [];
$("#<%=gdvRegretletter.ClientID %> tr").each(function () {
if ($(this).closest('tr').find('input[type="checkbox"]').prop('checked', true)) {
checkedValues.push($(this).closest('tr').find('td:eq(2)').text().trim());
}
});
$(".limitedNumbSelect > option").each(function () {
var val = $(this).val();
alert(val);
var display = checkedValues.indexOf(val) === -1;
$(this).toggle(display);
$('.limitedNumbSelect option[value=' + display + ']').hide();
$(".limitedNumbSelect").find('option:contains(' + display + ')').remove().end().chosen();
});
});
In above code there is one bug. For example if i select one value from gridview then if i click on dropdown i am able to select that value(on first click). On second click required value will hide.
Above code does not work. Array checkedValues doesnt catch values.
I am unable to figure out what to write inside. Any help would be appreciated. Thank you.

Try something like this:
$('.limitedNumbSelect').change(function (e) {
$("#limitedNumbSelect > option").each(function () {
var val = $(this).val();
var display = checkedValues.indexOf(val) === -1;
$(this).toggle(display);
});
});

Replace the line:
checkedValues += $(this).val();
In this line:
checkedValues.push($(this).val());

Append ID of button to input value on click

How can I append the id of a button to an input value on button click?
Example input (buttons pressed):
#en #de #fr #it #es
Example output:
<input name="langs" value="en,de,fr,it,es,">
This is what I have, but it's not working:
$(".lang-btn").click(function() {
$(this).toggleClass("active");
$("input[name=languages]").val() += $(this).attr("id") . ",";
});
I would then like to be able to re-adjust the inputvalue, removing the id, when the button is pressed again.

Close, .val() takes the value as a param:
$(".lang-btn").click(function() {
$(this).toggleClass("active");
var id = this.id,
currentValue = $("input[name=languages]").val();
//Check for existing
if (currentValue.indexOf(id) > -1) {
//remove it
currentValue = currentValue.replace(id + ",", "");
$("input[name=languages]").val(currentValue);
} else {
$("input[name=languages]").val(currentValue + id + ",");
}
});
Working demo: http://jsfiddle.net/9L76d0sr/

If you have radio buttons, you could see if there are checked or not: document.getElementById("X").checked = true;
Then you can append them as you want in your input field

Accessing elements of a table row on the basis of checked radio button

On my webpage, I have a table in which there's a radio button for each row. The name of radio buttons is the same for all rows to access them as a group. I have a button which alerts the row number whose radio button is checked. I'd like to access individual elements of the table of that row as well. Any thoughts as top how I might be able to achieve this would be very welcome.
Here's a Fiddle for the issue:
http://jsfiddle.net/Gz668/13/
On the click of the button "edireq", it currently alerts the row number whose radio button is checked. I'd like to access the values of other fields of the table (requestor, approver, status etc. too.)
Here's the jquery code
$("#edireq")
.button()
.click(function () {
var ele = document.getElementsByName('reqradio');
var len = ele.length;
var flag = -1;
for (var j = 0; j < len; j++) {
if (ele[j].checked) {
flag = j;
}
}
if (flag > -1) {
alert("Row : " + (flag + 1));
} else {
alert("Select a row first");
}
});
Thanks.

You have an odd mix of native javascript and jQuery. You can use the :checked selector to get the chosen radio button, then get the closest tr and read the text of each td within that row. Try this:
$(document).ready(function () {
$('#reqtablenew tr').click(function () {
$('#reqtablenew tr').removeClass("active");
$(this).addClass("active").find('input[name="reqradio"]').prop('checked', true);
});
$("#edireq").button().click(function () {
var $ele = $('input[name="reqradio"]:checked');
if ($ele.length) {
var $tds = $ele.closest('tr').find('td');
var id = $tds.eq(1).text();
var requestor = $tds.eq(2).text();
// and so on..
alert(id);
alert(requestor);
}
else {
alert("Select a row first");
}
});
});
Example fiddle

Try this:
var list = ["Req id","Requestor","Approver","Status","Product","Version","Source","Destination"]; //list of title
if (flag > -1) {
$(".active").find("td:gt(0)").each(function(i){
console.log(list[i]+": "+$(this).text());
});
}
Fiddle here.

I came up with the following:
http://jsfiddle.net/Gz668/16/
$(document).ready(function () {
$("table").on("click", "tr", function(){
$(".active").removeClass("active");
$(this).toggleClass("active");
$(this).find("input[type='radio']").prop("checked", true);
});
$("#edireq").on("click", function(){
activeRow=$(".active");
cells=activeRow.children();
if(cells.length >0){
row={
select:cells[0],
requestId:cells[1],
requestor:cells[2],
approver:cells[3],
status:cells[4],
product:cells[5],
version:cells[5],
source:cells[6],
destination:cells[7]
};
alert(row.requestor.textContent);
}
})
});

javascript not seeing first click?

I have a table that the user can select certain rows by checkboxes. I have some javascript that let's them select each checkbox and Select All. I also have some javascript written to let the user check a box then shift-click another checkbox and all the boxes between should become checked.
All this is working the only problem is that the first checkbox isn't being recognized. Thus when the user holds shift and selects another checkbox, only that checkbox is checked. But if the user holds shift and selects a third checkbox, THEN all the boxes between the 2nd and 3rd become checked.
Javascript
$(document).ready(function () {
$(this).click(function () {
//shift-click checkboxes
var lastChecked = null;
var handleChecked = function (e) {
//alert(lastChecked);
if (lastChecked && e.shiftKey) {
var i = $('input[type="checkbox"]').index(lastChecked);
var j = $('input[type="checkbox"]').index(e.target);
var checkboxes = [];
if (j > i) {
checkboxes = $('input[type="checkbox"]:gt(' + (i - 1) + '):lt(' + (j - i) + ')');
} else {
checkboxes = $('input[type="checkbox"]:gt(' + j + '):lt(' + (i - j) + ')');
}
if (!$(e.target).is(':checked')) {
$(checkboxes).removeAttr('checked');
} else {
$(checkboxes).attr('checked', 'checked');
}
}
lastChecked = e.target;
} //handleChecked
$('input[type=checkbox]').click(handleChecked);
}); //$(this).click(function())
//select all checkboxes
$('#selectall').click(function (i, v) {
$('.selectedId').prop('checked', this.checked);
});
var checkCount = $('.selectedId').length;
$('.selectedId').click(function (i, v) {
$('#selectall').prop('checked', $('.selectedId:checked').length == checkCount)
});
}); //ready function
I made a fiddle that replicates the problem.
http://jsfiddle.net/tihg7947/JXnNK/
To replicate my issue, check a box (other than Select All) and then hold shift and select another box.
I'm new to web design and have no idea how to diagnose this issue (event handling?).
I would appreciate any help or guidance.

You are binding $('input[type=checkbox]') inside $(this).click(function () { function thus its not working first time
You bind event inside $(document).ready(function () {
As my understanding remove $(this).click(function () {
Fiddle Demo

You install the handleChecked listener from within $(this).click(function () {. This means that:
The event handler is not installed until the user clicks once.
Multiple copies of the event handler will be installed.
I think you want to just set the event handler once inside $(document).ready(function () {.
So, just delete the lines
$(this).click(function () {
and
}); //$(this).click(function())

DOM code for select tag

Here is the fiddle
http://jsfiddle.net/MfdR4/
I want, if you select a no. then according to that number the rows comes up!
var number_opt = document.getElementById("opt_select");
var opt;
for (var i = 1; i <= number_opt.value; i += 1) {
opt = '"#opt_row_' + i + '"';
$(opt).show(100);
}
Will this work! I know it's stupid!

yes you can...using change() event.
try this
$(function () {
$("#opt_row_1,#opt_row_2,#opt_row_3").hide(0); //<--using multiselector
$("#opt_select").change(function () {
var $val = this.value;
$('#opt_row_' + $val).show(100);
});
});
update
if you want to hide other rows before displaying the selected rows then
$(function () {
$("#opt_row_1,#opt_row_2,#opt_row_3").hide(0);
$("#opt_select").change(function () {
$("#opt_row_1,#opt_row_2,#opt_row_3").hide(0);
var $val = this.value;
$('#opt_row_' + $val).show(100);
});
});
hide other rows and display the selected rows : updated fiddle
simple fiddle displaying just the selected rows : fiddle here