how to trigger change event on current table rows index in jquery - javascript

The Tbody of below table was cloned more than 2 or 3 so I will get more than 2 tbody that contain Class selector .mbody and two of rows in a tbody. However I to used Jquery Change event to get the provinces data when a country selection was selected.
<div class="table-responsive">
<table class="table" id="addressList">
<thead>
<tr>
<th>{{ trans('multiple.country') }}</th>
<th>{{ trans('multiple.province') }}</th>
</tr>
</thead>
<tbody class="mbody">
<tr>
<td>
<select class="country" name="country[]">
<option value="">-</option>
#foreach($country as $vals)
<option value="{{$vals['iso_code_3']}}"
data-id="{{$vals['id']}}">
{{$detail['name']}} {{$vals['id']}}
</option>
#endforeach
</select>
</td>
<td>
<select class="provinces" id="provinces" name="provinces[]" style="width: 100%"></select>
</td>
<td></td>
</tr>
<tr>
<td>
<label> Fields Khmer</label>
<textarea class="form-control" name="fields_kh"></textarea>
</td>
<td>
<label>Fields English </label>
<textarea class="form-control" name="fields_en"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
Javascript:
I want to get the provinces data after country was selected on the current rows of this tables
$(document).on('change', 'tbody.mbody tr td', function (e) {
"use strict";
if(typeof country === 'undefined')return;
var provinces = $('.provinces');
var pro = '<option value="">-</option>';
if ($(this).children('select').hasClass('country')) {
var countryId = parseInt($(".country").select2("data").element[0].dataset['id'])
provinces.select2('val', '');
$.each(country, function (inx, vals) {
if (parseInt(vals.id) === countryId) {
$.each(vals.provinces, function (inx, prov) {
pro += '<option value="' + prov.prov_gis + '" data-id="' + prov.id + '"> ' + prov.eng_name + ' </option>';
});
}
});
provinces.empty().append(pro);
}
});
Select2 don't wrap the provinces contain after append from JS
provinces.empty().append(pro);

Change your selectors to select the elements relative to your cloned tbody
var provinces = $(this).closest('tbody').find('.provinces');
var countryId = parseInt($(this).closest('tbody').find(".country").select2("data").element[0].dataset['id'])
When you clone the elements destroy the select2 before you clone them and then reinitialize it after the clone
to add elements use the select2 syntax
$("#select2").select2('data', {});

You need to find provinces of current td on whose select the onchange is triggerd.
var provinces = $(this).closest('tbody.mbody').find('.provinces');
Also the country should be fetched for current tbody.
var countryId = parseInt($(this).closest('tbody.mbody').find(".country").select2("data").element[0].dataset['id']);

Related

jQuery/javascript add and remove classes on change

I am trying to create an change event so when a user selects an option from a dropdown, the corresponding row in the table is highlighted (via adding a class).
I have tried two things.. jQuery and javascript.
Here is my jQuery:
$("#phoneType").change(function() {
if (document.getElementById("optionSelect").value == 2) {
var selectedStatus = parseInt(document.getElementById("optionSelect").value);
$('.clickable-row').removeClass("cra-children-item-selected");
$(this).addClass('cra-children-item-selected');
}
});
Note that I am using javascript for the first two lines because I kept getting "val() is not a function" errors.
I tried using javascript to simply add/remove classes, but it doesn't seem to like my syntax...
document.getElementsByClassName("clickable-row").className = "clickable-row";
document.getElementById(selectedStatus).className = "clickable-row item-selected");
What I don't understand is why the jQuery isn't working... I have another function that works perfectly:
$(".clickable-row").click(function(event) {
console.log($(this).attr('id'));
$('.clickable-row').removeClass("item-selected");
$(this).addClass('item-selected');
});
Why is the code above (on click) working, but not my on change function?
Here is HTML:
<table class="table table-striped table-bordered">
<tr>
<th scope="col">Type</th>
<th scope="col">Number</th>
</tr>
<tr id="1" class="clickable-row">
<td>
Work
</td>
<td>
705-556-6677
</td>
</tr>
<tr id="6" class="clickable-row">
<td>
Cellular phone
</td>
<td>
613-444-7777
</td>
</tr>
</table>
<select name="phoneType" id="phoneType">
<option value="-1">Select</option>
<option value="3">Home</option>
<option value="1">Work</option>
<option value="6">Cellular phone</option>
</select>
Check this, it's actually working.
$("#phoneType").change(function() {
var val = $(this).val();
$("tr").removeClass("selected");
$("#tr" + val).addClass("selected");
})
.selected {border: solid 1px #000; background-color:blue;};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-bordered">
<tr>
<th scope="col">Type</th>
<th scope="col">Number</th>
</tr>
<tr id="tr1" class="clickable-row">
<td>
Work
</td>
<td>
705-556-6677
</td>
</tr>
<tr id="tr6" class="clickable-row">
<td>
Cellular phone
</td>
<td>
613-444-7777
</td>
</tr>
</table>
<select name="phoneType" id="phoneType">
<option value="-1">Select</option>
<option value="3">Home</option>
<option value="1">Work</option>
<option value="6">Cellular phone</option>
</select>
Based on the HTML you presented, it seems the conditional is never true:
if (document.getElementById("optionSelect").value == 2) {
and should be rewritten referring to the select element for an option value that actually exists
$("#phoneType").change(function() {
var t = $(this),
tVal = t.val();
if (tVal === '3') {
console.log(tVal);
}
});
I would highly recommend you don't try to use id="1" as your row IDs. Use HTML5 data attributes instead:
<tr class="clickable-row" data-id="6">
Then simple jQuery which will select the row:
$("#phoneType").change(function() {
var id = parseInt($(this).val());
var $row = $('.clickable-row[data-id="' + id + '"]');
$('.clickable-row').removeClass("cra-children-item-selected");
if (id > 0) {
$row.addClass('cra-children-item-selected');
}
});

Jquery clone event handling not working

I am trying to retrieve the index of the row when the user has clicked on the check box. It works for the codes that I have written for the first two rows when the check box are ticked. However when I tried to insert more rows, the index that I retrieve after the check box is tick gave me a false result, i.e -1.
Can anyone help me with this? I have research for a long time and I still can't get it to work. I tried setting the clone argument to true but it still failed.
//Insert a new row after the last row in the table
$("#add").click(function() {
clickCount++;
var numRows = $('#getnumRows').val();
var index = $('#mytable tbody>tr:last td:nth-child(2)').text();
var i=Number(index);
var intNumRow=Number(numRows)+i;
for (; i < intNumRow; i++)
{
$('#mytable tbody>tr:last').clone(true,true).insertAfter('#mytable tbody>tr:last');
//$("#mytable tbody>tr>td:last td:nth-child(1)").children('input').addClass('chkbox');
$('#mytable tbody>tr:last td:nth-child(2)').text(i+1);
var input= $('#mytable tbody>tr:last').find('td').children('input');
input.val('');
input.attr("checked", false);
}
});//end click tag
var chkBox=$("#mytable tbody>tr>td ").children('.chkbox');
chkBox.on('click',null,function ()
{
var isChecked=$('.chkbox');
if (isChecked.is(':checked')) {
var index=chkBox.index(this);
alert(index); //added alert to intentional check the index retrieve from the checked checkbox of the row![enter image description here][1]
var insertNewRow=ajaxNewRowInfo(partNo,serviceName);
insertNewRow.success(function(data)
{
var row=$('#mytable tbody>tr').eq(index);
for(i=2;i<data.length;i++)
{
$(row.children(' td:nth-child('+(i+3)+')')).children('input').val(data[i]);
}
});//insertNewRow end tag
}//if end tag
else{
alert('You Un-Checked it');
}
});//chckbox end tag
<!--Add rows -->
<div class="form-group">
<label class="col-sm-1 control-label" style='margin-top:0.6%;'>Rows</label>
<input class="form-control" style='width:100px;' type='text' id='getnumRows' placeholder='No.of Rows'>
<button type="submit" id="add" class="btn btn-success" style="margin-left:200px; margin-top:-35px; ">Add rows</button>
</div>
<!------------->
<tbody>
<tr id='tableRow1'>
<td><input type="checkbox" class='chkbox'/></td>
<td> 1</td>
<td>
<select class="form-control" class="serviceDropdown">
<option></option>
<option value='1'>Oil Change Service</option>
<option value='2'> Tyre Service</option>
<option value='3'>Vehicle Service</option>
<option value='4'>Battery Service</option>
<option value='5'>Clutch Brake Service</option>
<option value='6'>Suspension Service</option>
<option value='7'>Brake Service</option>
<option value='8'>Tuning and Diagnostic Service</option>
</select>
</td>
</tbody>
[The first image shows the alert box which the index of the check box row is able to retrieved. The second image shows when new rows are added through cloning, the index of the alert box shows -1.]
http://postimg.org/image/913o3lyuv/
http://postimg.org/image/fg2p0a5kn/
Consider Element Indexing w/ jQuery Index()
Ex. http://codepen.io/anon/pen/XJRJEg
If .index() is called on a collection of elements and a DOM element or
jQuery object is passed in, .index() returns an integer indicating the
position of the passed element relative to the original collection.
HTML
<table id="hi">
<thead>
<tr>
<th>Heading</th>
<th>Heading 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
jQuery
$( "table#hi tbody tr" ).click(function() {
var index = $( "table#hi tbody tr" ).index( this );
alert(index);
});
DOCUMENTATION

jQuery get value of unknown element within table cell

A table cell may contain an INPUT element, or a SELECT element, or some other element. I must get both the value and the class attributes from the element, in order to route code appropriately.
There will only be one element within the table cell (but the element type may change).
Problem: test1 and test2 are not returning desired values (classname and value for element in table cell).
jsFiddle Demo
HTML:
<table id="tbl">
<tr>
<td class="pid">12345</td>
<td class="tbl_vendor"><input class="vi" value="Ikea" /></td>
<td>Stove</td>
<td><input class="qty_in" value="1" /></td>
<td class="del">del</td>
</tr>
<tr>
<td class="pid">38674</td>
<td class="tbl_vendor">
<select class="vendSEL">
<option value="1">C.P.O.</option>
<option value="2">Knightin</option>
<option value="3">CanDine</option>
</select>
</td>
<td id="selTD"></td>
<td><input class="qty_in" value="1" /></td>
<td class="del">del</td>
</tr>
</table>
jQuery/javascript:
var $this, qty, thisRowNdx, thisTR, vendorTD;
$(document).on('keyup', '.qty_in', function() {
$this = $(this);
qty = this.value;
thisTR = $this.closest('tr')[0];
vendorTD = $this.closest('tr').find('.tbl_vendor');
var currVendorTagname = vendorTD.children()[0].tagName;
var test1 = vendorTD.children()[0].getAttribute['class'];
var test2 = vendorTD.children()[0].nodeValue;
alert('currVendorTagname: ' + currVendorTagname);
alert('test1: ' + test1);
alert('test2: ' + test2);
});
It's all a matter of finding the right reference. Or, this is even easier to read: the Mozilla Developer Network page.
Thanks to answers given for this question: JavaScript getting an elements class without any libraries
Solution:
var test1 = vendorTD.children()[0].className;
var test2 = vendorTD.children()[0].value;
Updated jsFiddle
Note that this should have worked, but didn't:
var test1 = vendorTD.children()[0].getAttribute['className'];

not correctly traversing through DOM in table

The simplified code below is supposed to add a value in cell-row 2-colum 2 in a table depending on the value selected in row 1 colum 2 of this table. The (jquery) handler for this writing is triggered correctly (tested by console), but writing to the div element (using html() ) does not work, and I strongly suspect I dont traverse through the DOM correctly. I tried a few options (see comments) but none of them works. Where do I go wrong?
<table border="1"> <!--table ProductMain with only 1 row en 2 cells -->
<!--table ProductMain; cell r1c1-->
<tr>
<td>cell r1c1</td>
<!--table ProductMain; cell r1c2-->
<td>
<select class="eprodtype" name="ecorp_productid4">
<option selected="selected" value="" ></option>
<option value="val1" > val1</option>
<option value="val2" > val2</option>
</select>
</td>
</tr>
<!--table ProductMain; cell r2c1; -->
<tr>
<td>
<table border ='1'>
<tr class="r2"> <td> aval1 </td> <td> aval2 </td></tr>
</table>
</td>
<!--table ProductMain; cell r2c2;-->
<td class="r2c2">
<div class="ecorpproductwrapper"></div>
</td>
</tr>
</table>
$(document).ready(function(){
$("body").on("change", ".eprodtype", function() {
var selectedvalue = $( this ).val();
console.log("SELECT selectedvalue "+selectedvalue);
//NONE OF THE FOLLOWING OPTIONS WORK
//$(this).parent().children("td.r2c2").children("div.ecorpproductwrapper").html("<p> Chosen: " + selectedvalue + "</p>");
//$(this).parent().children("tr.r2").children("td.r2c2").children("div.ecorpproductwrapper").html("<p> Chosen: " + selectedvalue + "</p>");
$(this).parent().parent().find("div.ecorpproductwrapper").html("<p> Chosen: " + selectedvalue + "</p>");
//$(this).parent().children("div.ecorpproductwrapper").html("<p> Chosen: " + selectedvalue + "</p>");
});
}); //$(document).ready
You needed one more parent call to go up to the table. However, you can clean the code by using closest instead to get the table, then find within that:
$(this).closest('table').find("div.ecorpproductwrapper").html("<p>Chosen: " + selectedvalue + "</p>");
Example fiddle

Dynamically Add and Remove Table Rows

I am both adding and removing table rows with jQuery. I can add rows easily, but am having trouble removing ones that were created.
You can view the page in action here: http://freshbaby.com/v20/wic/request_quote.cfm, with the relevant code pasted below.
HTML
<table style="width:600px;" id="product-list" summary="Lists details about products users wish to purchase">
<thead valign="top" align="left">
<tr>
<th>Products</th>
<th>Language</th>
<th>Quantity</th>
<th></th>
</tr>
</thead>
<tbody valign="top" align="left">
<tr>
<td>
<cfselect query="getProductListing" name="product" size="1" display="name" value="name" queryPosition="below">
<option value=""></option>
</cfselect>
</td>
<td>
<select name="language" size="1">
<option value="English">English</option>
<option value="Spanish">Spanish</option>
</select>
</td>
<td>
<cfinput name="quantity" required="yes" message="Enter your desired quantity" size="10" maxlength="3" mask="999">
</td>
<td valign="bottom">Add Another Product</td>
</tr>
</tbody>
</table>
JavaScript:
<script>
$(function() {
var i = 1;
$(".addrow").click(function() {
$("table#product-list tbody > tr:first").clone().find("input").each(function() {
$(this).attr({
'id': function(_, id) { return id + i },
'value': ''
});
}).end().find("a.addrow").removeClass('addrow').addClass('removerow').text('< Remove This Product')
.end().appendTo("table#product-list tbody");
i++;
return false;
});
$("a.removerow").click(function() {
//This should traverse up to the parent TR
$(this).parent().parent().remove();
return false;
});
});
</script>
When I click the link to remove the row that said link is contained in, nothing happens. No script error, so it has to be logic.
Try this instead
$("#product-list").on('click','a.removerow',function(e) {
e.preventDefault();
//This should traverse up to the parent TR
$(this).closest('tr').remove();
return false;
});
This will ensure that newly created elements can be removed. When you use the $("a.removerow").click(.. it only affects the elements in existence (none) and not the ones that will be dynamically created.

Categories