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());

Insert value into last textarea where cursor was

Basically this question is pretty similar to:
Insert value into TEXTAREA where cursor was
JSFiddle: http://jsfiddle.net/rQXrJ/1/
The thing is, I can't get it to work for multiple textareas.
I've tried multiple combinations of things but still no success:
1)
$("#foo-1").click(function () {
$textBox = $(this);
$textBox.focusout(saveSelection);
});
$("#foo-2").click(function () {
$textBox = $(this);
$textBox.focusout(saveSelection);
});
2)
function changeTextBox(newID) {
var fullID = "#" + newID;
$textBox = $(newID);
$textBox.focusout(saveSelection);
}
$(".txt").click(function () {
var id = $(this).attr("id");
changeTextBox(id);
});
Here's my jsFiddle: https://jsfiddle.net/yneco5ft/

You need to give the same class to your textareas and set $textBox to that class.
Example : http://jsfiddle.net/rQXrJ/283/

How to give drag selected cell count to colspan value

I have Dynamic a dynamic table here. I am trying to give drag selected cell count as colspan value to the selected table cells(merge).my fiddle http://jsfiddle.net/kannankds/q35vm6qv/6/
$(document).mouseup(function () {
isMouseDown = false;
mylength = $("td.highlighted").length;
//alert(mylength);
});
$("#mergeme").live('click', function () {
$("td.highlighted").attr("colspan"+ mylength);
alert("colspan" + mylength);
});

You could change this:
$("#mergeme").live('click', function () {
$("td.highlighted").attr("colspan"+ mylength);
alert("colspan" + mylength);
});
for this:
$("#mergeme").click(function () {
var mylength = $(".highlighted").length;
// Add the colspan of already merged columns
$(".highlighted").each(function(index,el){
if($(el).attr("colspan")>1)
mylength += $(this).attr("colspan") - 1;
});
// Get text from highlighted cells
var alltext = $(".highlighted").text();
// Hide non-first highlighted cells
$("td.highlighted:not(:first)")
.hide()
.toggleClass("highlighted");
// Set text to first highlighted cell, unhighlight, and set colspan
$("td.highlighted:first").attr("colspan", mylength)
.text(alltext)
.toggleClass("highlighted");
});
Demo fiddle: http://jsfiddle.net/lparcerisa/9ep1gsr8/1/
Note: you should limit your selection to cells of the same row, or the merge will be a mess.

It should be,
$(document).mouseup(function () {
isMouseDown = false;
mylength = $("td.highlighted").length;
//alert(mylength);
});
$("body").on('click','#mergeme', function () {
$("td.highlighted").attr("colspan", mylength);
alert("colspan" + mylength);
});

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);
}
})
});

jQuery dynamic inserted table rows and input fileds validation on select option

I am trying to build somewhat of a fee voucher with jquery and I am having a heck of a time figuring out how to go about making it all work.
I want when I select option js input field id fee-2 will disable and when I select option php input field id fee-1 will disable and so on more rows inserted for different from select option on different rows. at last need some of all rows inserted by field id fee-1 and fee-2 separately both
My Fiddle Demo is
http://fiddle.jshell.net/softfiddle/cSbbK/2/
thanks

$("#mytable").on("change", "select", function () {
var getSelectValue = $(this).val();
if (getSelectValue == 1) {
$(this).parents('td').next().find('#fee-2').prop('disabled', true);
$(this).parents('td').next().next().find('#fee-1').prop('disabled', false);
} else {
$(this).parents('td').next().find('#fee-2').prop('disabled', false);
$(this).parents('td').next().next().find('#fee-1').prop('disabled', true);
}
});
JSFIDDLE
Updated: Have added two classes to the textbox .i.e fee_course_1,fee_course_2 so we can loop over it and get sum values
$("#calsum").click(function () {
var sum_fee_1 = 0;
var sum_fee_2 = 0;
$('.fee_course_1').each(function () {
sum_fee_1 += Number($(this).val());
});
$('.fee_course_2').each(function () {
sum_fee_2 += Number($(this).val());
});
alert("Fee_1 = " + sum_fee_1 + " and Fee_2 = " + sum_fee_2);
});
JS FIDDLE DEMO 2