Find previous div of a specific class with Jquery - javascript

I use jquery and I want to find the previous div which has the "error" class
My html code :
<table class="questions">
<tr>
<td class="heading">1
<div class="error"></div>
</td>
<td colspan="4">
<textarea class="textcontrol required" name='questionT136'>
</textarea>
</td>
</tr>
<tr>
<td></td>
<th><label for="reponse137-3">Très satisfaisant</label></th>
<th><label for="reponse137-4">Satisfaisant</label></th>
<th><label for="reponse137-5">Insatisfaisant</label></th>
</tr>
<tr class="q">
<td class="heading">
2
<div class="error"></div>
</td>
<td class="questionradio"><input class="required" id='reponse137-3'
name='questionN137' type='radio' value='3'></td>
<td class="questionradio"><input class="required" id='reponse137-4'
name='questionN137' type='radio' value='4'></td>
</tr>
</table>
For example, from reponse137-3, I'd like to change the value the previous class="error". I allready tryied to access to that object with :
$('#reponse137-3').prev(".error")
but it doesn't work. I think because it hasn't the same parent, so I tryied :
$('#reponse137-3').prev("tr").next(".error")
How can I do ?

Assuming your .error div is always in the same table row:
$('#reponse137-3').closest('tr').find('.error:first');
http://jsfiddle.net/vkfF8/

You need to go up three times to arrive to table, and later find error
$('#reponse137-3').parent().parent().parent().find('.error');
First parent go to th, second to tr and thirth to table, then find within table what element has class named .error And you will get it

Related

How to get the Exact Parent Item With Class Name In JavaScript?

<div class="wrapped">
<table id="tabled">
<tr>
<td>abc</td>
<td>def</td>
<td><input type="checkbox" class="chkbox" id="val" onclick="myFunction(this.id)"></input></td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td><input type="checkbox" class="chkbox" id="val1" onclick="myFunction(this.id)"></input></td>
</tr>
</table>
</div>
The IDs of checkbox are automatically generating with my some code. Plus there is a loop on the DIV with Class Name "wrapped". This whole Code prints for least 2 times. And seems like that
<div class="wrapped">
<table id="tabled">
<tr>
<td>abc</td>
<td>def</td>
<td><input type="checkbox" class="chkbox" id="val1" onclick="myFunction(this.id)"></input></td>
</tr>
</table>
</div>
<div class="wrapped">
<table id="tabled">
<tr>
<td>abc</td>
<td>def</td>
<td><input type="checkbox" class="chkbox" id="val2" onclick="myFunction(this.id)"></input></td>
</tr>
</table>
</div>
Now I am trying to add some JS which help me to get the div with class 'Wrapped'. Here is my js
function myFunction(el) {
var el = document.getElementById(el);
var r1 = el.closest(".wrapped");
alert (r1.innerHTML);
}
It always returns me the HTML of the First div with class 'Wrapped'. What I want is that if i click checkbox with ID val2 it should return me the second div with class 'Wrapped'. But in all my struggle around the net I am only getting first in all options. Thanks In advance
But it is correct and returns desired .wrapped div.
Also you can pass the .wrapped directly to your function:
onclick="myFunction(this.closest('.wrapped'))"
And js:
function myFunction(wr) {
alert (wr.innerHTML);
}

JQuery autofill table row with corresponding text selection?

My previous question is here but it seems that using only window and document cannot get it done. What I want is that when the text from the first row is selected, the first input will be filled. Same for the second row.
javascript - select text in table cell and autofill the input on the same row
https://jsfiddle.net/nrdq71pz/6/
<table>
<tr>
<td>Test code 1</td>
<td>
<input type='text' id='input1' class="selection" />
</td>
</tr>
<tr>
<td>Test code 2</td>
<td>
<input type='text' id='input2' class="selection" />
</td>
</tr>
</table>
This is jQuery solution. (Actually easier than i thought, i've thought that selection text inside elements can't be reached so easily, but...):
$('td').on('mouseup',function() {
if (window.getSelection){
s = window.getSelection().toString()
}
$(this).next().find('input').val(s);
});
Demo:
$('td').on('mouseup',function() {
if (window.getSelection){
s = window.getSelection().toString()
}
$(this).next().find('input').val(s);
});
td {
padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Test code 1</td>
<td>
<input type='text' id='input1' class="selection" />
</td>
</tr>
<tr>
<td>Test code 2</td>
<td>
<input type='text' id='input2' class="selection" />
</td>
</tr>
<tr>
<td>Test code 3</td>
<td>
<input type='text' id='input3' class="selection" />
</td>
</tr>
</table>
So, point is to put event on cell, and then reach closest input (in your current hTML structure, this works, if you change something, you can modify it, easily, i guess)
I'm having trouble figuring out what you are asking but does this get the job done? When you click "Test code 1" it will fill in the input value to "Hello".
https://jsfiddle.net/nrdq71pz/8/
Html:
<table>
<tr>
<td class="select">Test code 1</td>
<td>
<input type='text' id='input1' class="selection" />
</td>
</tr>
<tr>
<td>Test code 2</td>
<td>
<input type='text' id='input2' class="selection" />
</td>
</tr>
</table>
jQuery:
$('.select').click(function(){
$('#input1').val("hello")
})
I just noticed your comment on a post above. I think what I did was wrong so take a look at what I did here and tell me which one is closer to what you need. https://jsfiddle.net/nrdq71pz/9/

How to modify cloned field form value and id inside table row?

I have 2 fields in my form that I want to clone using jQuery, but the selecting html table structure got me confused on how to change the id and the value of my form field and also the label text. Here's the form field structure
<table>
<tbody>
<tr id="attribute-name">
<td class="label"><label for="listing_qty">quantity</label></td>
<td class="value">
<input id="listing_qty" name="field_name[]" value="quantity" class="required-entry disabled attribute-name input-text" readonly="1" type="text">
</td>
</tr>
<tr id="attribute-custom">
<td class="label"></td>
<td class="value">
<input id="listing_custom_field" name="custom_field[]" value="" placeholder="Custom Attribute Field" type="text" class=" input-text">
</td>
</tr>
</tbody>
</table>
You will need to clone the entire element and then update the id's, values, and text in the cloned element before inserting.
function appendClonedFormInput(el,
newId,
newInputId,
newLabelText,
newName,
newValue) {
// Clone and update id
var $cloned = $(el)
.clone()
.attr('id', newId);
// Update label
$cloned.find('label')
.attr('for', newInputId)
.text(newLabelText);
// Update input
$cloned.find('input')
.attr('id', newInputId)
.attr('name', newName)
.val(newValue);
return $cloned.insertAfter(
$('input').last().parents('tr'));
}
appendClonedFormInput('#attribute-name',
'new-attribute-id',
'new-inp-id',
'New Label',
'new_field',
'new value');
appendClonedFormInput('#attribute-custom',
'new-custom-id',
'new-custom-inp-id',
'New Custom',
'new_custom',
'new custom value');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr id="attribute-name">
<td class="label">
<label for="listing_qty">quantity</label>
</td>
<td class="value">
<input id="listing_qty" name="field_name[]" value="quantity" class="required-entry disabled attribute-name input-text" readonly="1" type="text">
</td>
</tr>
<tr id="attribute-custom">
<td class="label"></td>
<td class="value">
<input id="listing_custom_field" name="custom_field[]" value="" placeholder="Custom Attribute Field" type="text" class=" input-text">
</td>
</tr>
</tbody>
</table>
You can clone the HTML element using .clone() jquery function and on the cloned HTML element perform all the jquery operation as we can perform on normal jquery selector.
Please check below working snippet. In snippet I have changed the label name and ids.
$(function(){
var _counter = 1;
$("#cloned_html").on("click",function(){
var $button = $('#attribute-name').clone().prop("id","attribute-name-"+_counter);
$button.find('#listing_qty').prop("id","listing_qty_"+_counter).val("quantity-"+_counter);
$button.find("label").html("Quantity-"+_counter);
var selector = '#attribute-name'
if(_counter>1){
selector = '#attribute-name-'+(_counter-1)
}
$($button).insertAfter(selector);
_counter++;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr id="attribute-name">
<td class="label"><label for="listing_qty">quantity</label></td>
<td class="value">
<input id="listing_qty" name="field_name[]" value="quantity" class="required-entry disabled attribute-name input-text" readonly="1" type="text">
</td>
</tr>
<tr id="attribute-custom">
<td class="label"></td>
<td class="value">
<input id="listing_custom_field" name="custom_field[]" value="" placeholder="Custom Attribute Field" type="text" class=" input-text">
</td>
</tr>
</tbody>
</table>
<button id="cloned_html">Clone</button>
You should separate the final render from the template. Another important part of your feature would be assign an unique number to compose ids and names.
I would suggest you to implement a solution like https://github.com/BorisMoore/jquery-tmpl
Put the template inside a script node with an Id then copy it's content and replace {} occurrences as you need.

Get nearest input element from same div

Let's say I have next construction
<table id="mainTable">
<tr>
<td>
<div class="parentDiv">
<input class="childInput"/>
<table>
<tbody>
<tr>
<td>
<span>I am here!</span>
<td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
How can I get input element from span? Using jQuery or standart methods.
mainTable has many rows so I can't use id on input.
I can do it with:
$($(spanElement).parents(".parentDiv")[0]).children(".childInput")[0]
Do you know an easier way?
$(spanElement).closest('.parentDiv').find('input');
$(spanElement).closest('.parentDiv').find('.childInput');

Disable all controls of a table column using jQuery

I am looking to disable all the elements (controls) of specified table columns (td's) using jQuery.
My table looks like the following :
<table>
<tr>
<td id="1.1.tcol"></td>
<td id="1.2.tcol"></td>
<td id="1.3.tcol"></td>
<td id="1.4.tcol"></td>
</tr>
<tr>
<td id="2.1.tcol"></td>
<td id="2.2.tcol"></td>
<td id="2.3.tcol"></td>
<td id="2.4.tcol"></td>
</tr>
</table>
The table is generated dynamically, but this is how it is rendered as. Now each of my <td> has multiple controls like select, checkbox, buttons, but not fixed for every row and column. I am looking to disable all controls of a specified <td> by using it's Id.
I used the following jQuery, but it doesn't seemt to do the job :
$('#' + td_id).select('*').each(function(element){element.disabled=true});
I have also tried the following, still it doesn't seem to work :
$('#' + td_id).attr('disabled', 'false');
Am I doing something wrong? Please help.
Thanks!
try this
$('#' + td_id).find(':input').prop("disabled", true);
:input select all the input elements
if you need to disable all controls in a column (multilpe rows) I think the best way is to assign a class to each td in that column.
For examle if you want to disable controls in the second column, you may do something similar:
<table>
<tr>
<td id="1.1.tcol"></td>
<td id="1.2.tcol" class="col-2"></td>
<td id="1.3.tcol"></td>
<td id="1.4.tcol"></td>
</tr>
<tr>
<td id="2.1.tcol"></td>
<td id="2.2.tcol" class="col-2"></td>
<td id="2.3.tcol"></td>
<td id="2.4.tcol"></td>
</tr>
</table>
Than, using JQuery you can do this:
$(".col-2 :input').prop("disabled", true);
It should work...
I think this should work :
<table>
<tr><td>
<input type="text" />
<input type="radio" />
<input type="checkbox" />
<select>
<option>1233</option>
</select>
</td>
</tr>
<tr><td>
<input type="text" />
<input type="radio" />
<input type="checkbox" />
<select>
<option>second</option>
</select>
</td>
</tr>
Now to disable only first "td" you should use:
$('tr').children().eq(0).find(':input').prop("disabled", true);
If you are using JQuery1.6 or above use prop() else use attr().

Categories