I have a Jsfiddle application here.
When you access the fiddle and you see the output then please do this:
Click on the "Open Grid" link and select one of the number buttons. You will see Letter buttons appear below after selecting a number button.
Click on the "Open Grid" button again and select a different number button, you will realize that the letter buttons has changed. This is fine.
Click on the "Add Question" button, this would add a row displaying your selection from the top control.
Now this is where the problem is. Within the row you have just added, click on the "Open Grid" link and select a different number button, you should now realize within the table row that the letter buttons do not change at all when they suppose to. That is the problem I am having.
Now it used to work when in the javascript code, the code was this:
var $tbody = $('#qandatbl > tbody');
var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
var $options = $("<td class='option'></td>");
var $answer = $("<td class='answer'>");
But as I want the controls within the table row to be displayed above one and another, I added some <tr> tags in $options and $answer so that the code now looks like this:
var $tbody = $('#qandatbl > tbody');
var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
var $options = $("<tr><td class='option'></td></tr>");
var $answer = $("<tr><td class='answer'></tr>");
So my question is that why is it now not changing letter buttons within a table row because I have added in <tr> tags and how can this be fixed?
Also when a table row is added, why is it displaying two columns and not just one column?
You can't have <tr> elements within a <tr>. Also your HTML gets messed up with the additional markup. When clicking the "Add Question" button, I get something like that:
<tbody>
<tr class="optionAndAnswer">
<tr>
<td class="option"></td>
<input type="text" .... />
<span class="showGrid">[Open Grid]</span>
</tr>
<tr>
<td class="answer"></td>
<tr>
<td>
<input class="answerBtns" value="A" />
<input class="answerBtns" value="B" />
<input class="answerBtns" value="C" />
</td>
</tr>
</tr>
</tr>
</tbody>
This is pretty messed up and needs to be cleaned.
I've altered your fiddle to have a nicer HTML structure and still have it look the way you want: http://jsfiddle.net/w2wJs/10/
Update the on function to the following (changing selectors) and added preventDefault:
$('table').on('click','.showGrid', function(e) {
e.preventDefault();
$(".gridBtns").removeClass("gridBtnsOn");
var value = $(this)
.siblings('input[name=gridValues[]]').val();
$("#btn" + value.replace(/\s/g, '')).addClass("gridBtnsOn");
$('.optionTypeTbl').fadeToggle('slow');
$(this).parent().append($('.optionTypeTbl'));
$('.optionTypeTbl').css({
left: $(this).position().left,
top: $(this).position().top + 20
});
e.stopPropagation();
});
http://jsfiddle.net/w2wJs/9/
Related
With the code below, I am trying to access a particular column "quantity" from a row in a table. What is happening is one of the rows is selected by default when page loads while the rest of the rows can be selected when user chooses. I created a click event handler to handle manual selection.
When accessing the column with a class name, it returns nothing. I need to assign this value to an input box in the same form. I would attach the image of the row
Table Markup:
<tr valign="top" class="row6">
<td>
{if $tpl_order_details[lineitems].quantity > 1}
{if $radio_flag == "false"}
<input type="radio" name="line_item" class="radio_class" id="line_item" value="{$tpl_order_details[lineitems].mSku}" checked onclick="handleClick(this);"/>
{assign var=radio_flag value='true'}
{else}
<input type="radio" name="line_item" class="radio_class" id="line_item" value="{$tpl_order_details[lineitems].mSku}" onclick="handleClick(this);" />
{/if}
{/if}
</td>
<td>
{$tpl_order_details[lineitems].sku}
</td>
<td>
</td>
<td>{$tpl_order_details[lineitems].item_description}</td>
<td class="quantity_class" >{$tpl_order_details[lineitems].quantity}</td>
<td>{$tpl_order_details[lineitems].item_status}</td>
Markup with the Input field outside the loop:
<table>
<tr>
<td><label for="new_quantity">Enter New Quantity</label></td>
<td><input type="number" id="split_quantity" name="split_quantity"
min="1" max="6"></td>
<td><button type="submit" value="Save"
name="submit_action">Submit</button></td>
<td><button type="submit" value="Cancel"
name="submit_action">Cancel</button></td>
</tr>
</table>
JavaScript:
// This is to handle the radio button selected by default on page load.
$( document ).ready(function() {
var firstRadioValue = 0;
firstRadioValue = $("input[name='line_item']:checked").val();
$('input[name="split_quantity"]').attr('max', firstRadioValue);
var quantity = $(".radio_class").parent().find(".quantity_class").val();
alert(quantity);
});
// This is to handle the radio button that user actually chooses.
var currentRadioValue = 0;
function handleClick(line_item) {
alert('New value: ' + line_item.value);
currentRadioValue = line_item.value;
$('input[name="split_quantity"]').attr('max', currentRadioValue);
}
You're not going far enough up the tree to find the class. You have:
var quantity = $(".radio_class").parent().find(".quantity_class").val();
which gets you to the parent <td> The element you're looking for is a sibling of this:
<td class="quantity_class" >...
What you want to do is go one element higher (the table row), then find the class you're looking for from there, so use closest(). Note that .quantity_class doesn't have a value so you have to get the text in the table cell:
var quantity = $(".radio_class").closest('tr').find(".quantity_class").text();
In addition, I do not see any markup with the max attribute or any markup with the name of split_quantity.
EDIT - based on a conversation with the user it was found that there needed to be a number of changes. First, the table holding split_quantity needed to be identified so it could be targeted in the grander markup:
<table id="split_quantity_id">
<tr>
<td><label for="new_quantity">Enter New Quantity</label></td>
<td><input type="number" id="split_quantity" name="split_quantity" min="1" max="6"></td>
<td><button type="submit" value="Save" name="submit_action">Submit</button></td>
<td><button type="submit" value="Cancel" name="submit_action">Cancel</button></td>
</tr>
</table>
Then we got rid of the onclick="handleClick(this) inline JavaScript in favor of letting jQuery handle the click event. Finally we refactored the functions:
$(function() {
var firstRadioValue = 0;
firstRadioValue = $("input[name='line_item']:checked").closest('tr').find('.quantity_class').text();
$('input[name="split_quantity"]').attr('max', firstRadioValue);
var quantity = $(".radio_class").closest('tr').find(".quantity_class").text();
console.log(quantity);
$('table').delegate('.line_item', 'click', function(){
currentRadioValue = $(this).closest('tr').find('.quantity_class').text();
console.log(currentRadioValue);
$('#split_quantity_id').find('[name="split_quantity"]').attr('max', currentRadioValue);
});
});
NOTE: It was also discovered that the OP is using Smarty 2 which is an older version of Smarty using an older version of jQuery, so .delegate() is used instead of on().
I have the following problem when wanting to get the cell of a table where a change event is not achieving its procurement.
Any idea how to get it , it would be well received .
<tr>
<td>1</td>
<td><div class="switch switch-small">
<input name="op1" type="checkbox" checked />
</td></div>
</td></tr>
$("tbody tr td input:checkbox").change(function() {
id = $(this).parent().parent().children().index(this.parentNode);
alert(id);
});
jsBin demo
You cannot close a </div> after a </td>. Also you're closing 3 times a TD element. Please review your HTML markup immediately.
If you want to get the TD where you clicked the checkbox:
$("td :checkbox").change(function() {
var TD = $(this).closest("td");
alert(TD.index()); // or use TD.closest("tr").index(); // to get the TR index
});
Your question is not clear, but I suppose you want to get the index corresponding to a radio input. As #Roko mentioned in his answer, your markup is wrong, it should be in the following form:
<tr>
<td>1</td>
<td>
<div class="switch switch-small">
<input name="op1" type="checkbox" checked />
</div>
</td>
</tr>
Finally to get index, 1, when input with name op1 changes, here's how you do that:
$("td input[type='checkbox']").on("change", function() {
var trParent = $(this).parent().parent().parent();
var id = $("tr").index(trParent);
alert(id);
});
I hope that helps, or you may consider reviewing your question.
Try a simpler
$(function() {
$("table [type='checkbox']").on("change", function() {
console.log($(this).parent().prev().html());
});
});
jQuery selector meaning : "anything in the table having type=checkbox"
var cell = $(this).closest('td');
var cellIndex = cell[0].cellIndex
var row = cell.closest('tr');
var rowIndex = row[0].rowIndex;
I've got a jQuery/AJAX solution set up to update and delete items that are displayed in a table. The AJAX part works fine but once an item is deleted I need to be able to remove it from view and I can't figure out how to identify the selected item(s) based on their value after the submit button is clicked.
Here's my jQuery:
$('#button').click(function(event){
var order = $("#sortable tbody").sortable("serialize");
order += "&" + $("form[name=favorites]").serialize().replace(/%5B%5D/g, '[]');
order += "&crudtype=update_favorites";
$('#savemessage').html('<p>Saving changes...</p>');
$.post("/crud",order,function(theResponse){
$('#savemessage').html(theResponse);
});
});
});
My HTML is generated from PHP so the quantities and IDs are variable but the format is as follows:
<tr class="odd" id="field_37">
<td class="handle">Item #1 Name</td>
<td><input type="checkbox" name="fid[]" id="fid" value="37" class="box check-child"></td>
</tr>
<tr class="even" id="field_29">
<td class="handle">Item #2 Name</td>
<td><input type="checkbox" name="fid[]" id="fid" value="29" class="box check-child"></td>
</tr>
So effectively what (I think) I need is to add to my .click function something like "foreach checked fid, remove the corresponding row ID" if that makes any sense.
A basic selector to get a checked checkbox is
'input[type="checkbox"]:checked'
or
'input:checkbox:checked'
Now you can either use has() or loop through and use closest to get the trs
$('input[type="checkbox"]:checked').closest("tr").remove();
or
$('tr:has(input[type="checkbox"]:checked)').remove();
You can do it like this: http://jsfiddle.net/dSANw/
When user clicks on checked box add class to the parent tr
$(".box").click(function() {
if($(this).is(':checked')) {
$(this).parents('tr').addClass('checkedtd');
} else {
$(this).parents('tr').removeClass('checkedtd');
}
});
When clicked on delete, get all tables tr's classed 'checkedtd' and delete
$("#delt").click(function() {
alert($('.checkedtd').length);
$('.checkedtd').remove();
});
I have a HTML like this:
<table id="laboral">
<tr>
<td><input type="text" name="start"/></td>
<td><input type="text" name="end"/></td>
<td><textarea name="desc"></textarea></td>
<td><button type="button" onclick="saveValues(this);createRow('laboral')"> + </button></td>
</tr>
</table>
What I want is to save the values in the three cells (2 inputs and 1 textarea).
The button creates another row just like the first, with the same inputs and names. The problem is that I don't know how to access THIS row, I mean, the row who owns the button.
I tried with this.parentNode.parentNode but didn't work.
Try this
<table id="laboral">
<tr>
<td><input type="text" name="start"/></td>
<td><input type="text" name="end"/></td>
<td><textarea name="desc"></textarea></td>
<td><button type="button" onclick="saveValues(this)"> + </button></td>
</tr>
</table>
var inputVals = [];
function saveValues(elm) {
// button td tr tbody table
var table = elm.parentNode.parentNode.parentNode.parentNode;
// iterating through the first row cells
for (var i = 0; i<table.rows[0].cells.length-1; i++) {
// the current cell
var cell = table.rows[0].cells[i];
// pushing the input elm's value into the array
inputVals.push(cell.childNodes[0].value);
// retrieving the pushed value
alert(inputVals[i]);
}
}
Fiddle example
You can modify the code.
You're passing a reference to the button into saveValues, so within saveValues the first argument will refer to the button. Let's call that argument btn. btn.parentNode will be the td containing the button, and `btn.parentNode.parentNode will be the tr containing that td. So:
function saveValues(btn) {
var tr = btn.parentNode.parentNode;
// Work with `childNodes` and the `childNodes` of those children to get the values
}
Sample Html(This only contains one of many more row).
<table id="ctl00_ContentPlaceHolder1_categoryTable" class="categoryTable sortAsc editInputs" border="0">
<tbody>
<tr>
<td>8</td>
<td>
<input name="ctl00$ContentPlaceHolder1$ctl17" type="text" value="307349_335692806541952_16061425_n.jpg" readonly="readonly" />
</td>
<td><input name="ctl00$ContentPlaceHolder1$ctl18" type="text" value="key1 " readonly="readonly" /></td>
<td>3/28/2013</td>
<td>.jpg</td>
<td>28120</td>
<td>307349_335692806541952_16061425_n.jpg</td>
<td>
Edit DeleteUpdate Cancel
</td>
<tr>
</tbody>
My Javascript
$(document).ready(function () {
console.log("document ready")
$(".categoryTable tr td a").click (function (event) {
console.log($(this).text() + "click detected");
if ($(this).text() === "Edit ") {//compare with "Edit " not "Edit"
console.log("Edit");
console.log($(this).parent().parent().children('td input').text());
$(this).siblings(".deletetLinkClass").attr("style", "display:none");
$(this).siblings(".updateLinkClass").attr("style", "display:;");
$(this).siblings(".cancelLinkClass").attr("style", "display:;");
$(this).attr("style", "display:none")
}
else
console.log("no EDit");
});
});
What i am trying to do is select the input tags in the same row tr but different td on click of an anchor tag in the same row. I have tried a lot of combinations of the following jQuery statement with no success. Please Help.
$(this).parent().parent().children('td input').text() Here this represents the clicked anchor tag. To be more clear i don't want to select all the input tags in the table, just the ones in the same row.
using parents() and find().
and to get the value of input, use val() and not text() ..
$(this).parent().parent().children('td input').text();
//--^^^^^^---here
try this
var inputs=$(this).parents('tr').find('input');
$.each(inputs,function(){ //<---- loop since you have multiple input
console.log($(this).val()); //.val() since val() is used to get the input value..
})
or using closest()and find().
var inputs=$(this).closest('tr').find('input');
using context
var inputs = $('td input', $(this).closest('tr')).val();
working fiddle here
You can do it this way:
$('td input', $(this).closest('tr')).val();
Try below code to find input from given row
$(this).closest('tr').find('td input').text()