How can I find the input box that is made hidden using hide() in jQquery?
$("#tab1").on('click', 'td button.save', function() {
var $thisParent = $(this).parent().parent().find("td:eq(1)").find("input").val();
$(this).parent().parent().find("td:eq(1)").find("input").hide().end().html('<span>' + $thisParent + '</span>');
});
// Here, this portion is not working:
$("#tab1").on('click', 'td span.edit', function() {
$(this).parent().parent().find("td:eq(1)").find("input").show();
alert($(this).parent().parent().find("td:eq(1)").find("input").prop("tagName"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tab1" width="80%">
<tr>
<td></td>
<td>
<input class="fillcolumn" type="text" />
</td>
<td> <span class="edit">✎</span> <span class="remove">✘</span>
</td>
<td>
Weightage:
<select>
<option value="High">High</option>
<option value="Medium">Medium</option>
<option value="Low">Low</option>
</select>
</td>
<td>
<button class="save">Save</button>
</td>
</tr>
</table>
The above code is not working, I mean, it is not turn the input box on with its value. Any help?
Few things need to be changed,
The appended span does not have edit class, so the click won't fire.
Use append() instead of html() as html() deletes the <input> tag.
Instead of .parent().parent() use .closest()
$(this).closest('tr')
.find("td:eq(1)")
.find("input").hide().end()
.append('<span class="edit">' + $thisParent + '</span>');
Demo
$("#tab1").on('click', 'td button.save', function() {
var $thisParent = $(this).closest('tr').find("td:eq(1)").find("input").val();
$(this).closest('tr').find("td:eq(1)").find("input").hide().end().append('<span class="edit">' + $thisParent + '</span>');
});
// Here, this portion is not working
$("#tab1").on('click', 'td span.edit', function() {
$(this).closest('tr').find("td:eq(1)").find("input").show();
alert($(this).parent().parent().find("td:eq(1)").find("input").prop("tagName"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tab1" width="80%">
<tr>
<td></td>
<td>
<input class="fillcolumn" type="text" />
</td>
<td> <span class="edit">✎</span> <span class="remove">✘</span>
</td>
<td>Weightage:
<select>
<option value="High">High</option>
<option value="Medium">Medium</option>
<option value="Low">Low</option>
</select>
</td>
<td>
<button class="save">Save</button>
</td>
</tr>
</table>
Further improved use of selectors. Refer Fiddle
instead of html() use append()
$("#tab1").on('click', 'td button.save', function(){
var $thisParent = $(this).parent().parent().find("td:eq(1)").find("input").val();
$(this).parent().parent().find("td:eq(1)").find("input").hide().end().append('<span>' + $thisParent + '</span>');
});
When you call save the input is removed from the page.
I guess what you want to do is hide the input when save is clicked and add in a new span with the value from the input?
this should help you move on:
http://jsbin.com/pufiroxolo/1/edit?html,js,output
but like #Shaunack D says lots of optimisations can be done with this! I've just used what was provided so not to confuse things!
When you call JQuery hide() on a DOM element, JQuery adds the style attribute for the dom as display:none.
You can do a find() using jquery for all text boxes and then check if each textbox has the style display: none.
Something like this
var listOfHidden = []
$($.find("input")).each(function()
{
if ($(this).css("display") == 'none'){listOfHidden.push(this)}
});
//variable listOfHidden will have the list of all hidden text
Related
Hi Friends slideDown and slideUp function are not working with my code. It appears the hidden row without slideDown effect PLease help guys you can chekc my code below or see fiddle here
HTML
<table>
<tr>
<td colspan="2"><p>Logistics</p>
<select name=" " >
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
<option>Others</option>
</select>
</td>
</tr>
<tr>
<td width="80%" colspan="2"><textarea name=" 5" rows="2" id=" 5" onblur="if (this.value=='') this.value = this.defaultValue" onfocus="if (this.value==this.defaultValue) this.value = ''">Others Details</textarea>
</td>
</tr>
</table>
SCRIPT
$('tr').has('textarea').hide();
$('select').on('change',function(){
if($(this).val()=='Others')
{
//$(this).next('tr td').has('textarea').slideDown(200);
$(this).parent('td').parent('tr').next('tr').slideDown(200);
//alert('other')
}
else
{
//$(this).next('tr td').has('textarea').slideDown(200);
$(this).parent('td').parent('tr').next('tr').slideUp(200);
//alert('other')
}
})
Check this demo jsFiddle
JQuery
$('tr').not(':first').children('td').wrapInner('<div>');
$('select').on('change',function(){
if($(this).val()=='Others')
{
$('td > div').slideDown(2000, function() {
$(this).parent().slideDown(2000);
});
}
else
{
$('td > div').slideUp(1000, function() {
$(this).parent().slideUp();
});
}
});
You can not slide table rows, as you can't manipulate the height of them. jQuery's animation relies upon the element having height and width.
Inline elements do not have these dimensions set or settable, so animations must make them block-level elements.It's probably better to just use regular, non-animated, hide and show for such elements.
You can also use fadeIn and fadeOut. Demo
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
Hi I am new to javascript and html and was wondering if someone could help me understand why this error keeps occuring. The basic idea is that i have a dropdownlist that is populated with several options. When the customer selects an option an onchange event fires that will write the value of the selected option into a textarea. However when i debug it I get the message above I have included the relevant snippets of code below:
function selectReason() {
var selectindex = document.getElementById("selectmessage").selectedIndex;
var selecttext = document.getElementById("selectmessage").value;
document.getElementById("Txt").value = selecttxt;
}
<TR style="DISPLAY: none; VISIBILITY: hidden" id=sel>
<TD width="60%" align=left>Please select a reason</TD>
<TD width="40%" align=left>
<SELECT id="selectmessage" onchange="selectReason()" style="WIDTH: 425px"></SELECT>
</TD>
</TR>
You might be missing your <table> tags as that was causing a problem for me. Your provided snippet also has var selecttext and document.getElementById("Txt").value = selecttxt; <- missing an e.
The provided snippet below works for me. Possibly just failing to close a tag somewhere in your function/html.
Also (this could be you added inline to provide a better picture) you should avoid inline styles and (to me) functions. Include a .css and .js file.
function selectReason() {
var selectindex = document.getElementById("selectmessage").selectedIndex;
var selecttext = document.getElementById("selectmessage").value;
var elem = document.getElementById("hey");
elem.innerHTML = selecttext;
}
// Events to attach
function init () {
var elem = document.getElementById('selectmessage');
elem.addEventListener('change', selectReason)
}
// Run 'init' when the DOM is ready (jQuery's $(document).ready() )
document.addEventListener("DOMContentLoaded", init, false);
<table>
<TR>
<TD>Please select a reason</TD>
<TD>
<SELECT id="selectmessage">
<option>Hello</option>
<option>Yes</option>
</SELECT>
</TD>
</TR>
<tr>
<td id='hey'></td>
</tr>
</table>
Maybe this could help you
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<select name="" id="selectmessage">
<option value="red">red</option>
<option value="gree">green</option>
<option value="blue">blue</option>
</select>
</td>
</tr>
</tbody>
</table>
<textarea name="" id="txt" cols="30" rows="10">
</textarea>
<script type="text/javascript">
$(document).on('ready', function(){
$('#selectmessage').on('change', function(){
var val = $(this).val();
var txt = $('#txt');
txt.val(val);
});
});
</script>
</body>
</html>
hope :)
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
I have next code:
<tr>
<td>
<select class="select_big" name="additional_field" id="<?=$field['id'];?>" required>
<option value="0">Выберите значение</option>
...
</td>
</tr>
<tr>
<td>
<select class="select_big" name="additional_field" id="<?=$field['id'];?>" required>
<option value="0">Выберите значение</option>
...
</td>
</tr>
<tr>
<td>
<select class="select_big" name="additional_field" id="<?=$field['id'];?>" required>
<option value="0">Выберите значение</option>
...
</td>
</tr>
<tr>
<td>
<select class="select_big" name="additional_field" id="<?=$field['id'];?>" required>
<option value="0">Выберите значение</option>
...
</td>
</tr>
When I select the second "select" element, I need to disable all the next one.
If I select 1 need to disable 3 and 4, if I select 2 I need to disable only 4.
Count of element could be different.
How I can get all elements next the select?
I try next:
<script type="text/javascript">
$("[name=additional_field]").change(function(e) {
field_data = '#' this.id.replace(/[* .]/g, "\\$&");
$(field_data).parent().parent().nextAll().each(function(i) {
console.log($(this)('[name=additional_field]'));
});
});
</script>
But I receive next error:
Uncaught TypeError: object is not a function
Help me please.
I think you can do it simpler without confusing traversal of the parent nodes:
var $sel = $('.select_big').change(function() {
$sel.filter(':gt(' + $sel.index(this) + ')').prop('disabled', +$(this).val());
});
Demo: http://jsfiddle.net/VFcF9/
It will also reenable selectboxes if you select default option back.
The error you were getting is because of this line:
$(this)('[name=additional_field]')
The first part, $(this), returns a jQuery object, and that object is not a function so you can't follow it with more parentheses.
As for your requirement to disable all of the following select elements, perhaps:
$("[name=additional_field]").change(function(e) {
$(this).closest("tr").nextAll("tr").find("[name=additional_field]").prop("disabled", true);
});
This should do it
$("[name=additional_field]").change(function(e) {
var f = $(this).closest('tr') //find the closest parent tr
.nextAll('tr') //find all tr that follows
.find('select.select_big') //from them, get all select
//f should be all the selects the follow what changed
});