I have a simple table where I'm trying to allow for the field value to be made contenteditable after pressing the edit button that I am printing next to each value:
<table>
<tr>
<th>Variable A</th>
<th>Variable B</th>
<th>Variable C</th>
<tr>
<td><span id="field">Value A</span> <button type="button" class="result">EDIT</button></td>
<td><span id="field">Value B</span> <button type="button" class="result">EDIT</button></td>
<td><span id="field">Value C</span> <button type="button" class="result">EDIT</button></td> </tr>
</table>
I use the following jQuery upon clicking the Edit button
$( document ).ready(function() {
$("body").on('click', '.result', function() {
var update = $(this).closest('td');
document.getElementById('field').contentEditable = true;
update.append('<button class=\"result\">Save</button></td>');
$(this).remove();
});
});
Unfortunately when I click "Edit" button, only the first field (Value A) becomes editable.. I think this is because
document.getElementById('field').contentEditable = true;
Is only updating the first instance of the id='field'
But I'm trying to make it only update the field next to where I pressed the button. So if I click the 3rd Edit button, it should make the Value C field be editable. Instead it only does Value A.
I realize that I need to make it specific to that span.. But not finding a solution. I tried:
$(this).closest('.field').contentEditable = true;
But if I do this then no spans become editable. I know this might be an easy question but I've tried all sorts of options to no avail.
You can use .prev() to select the span previous to button, and the id's should always be unique, so I changed the id field to field_1, field_2, field_3, and I've replaced the update.contentEditable = true; with update[0].contentEditable = true;:
$("body").on('click', '.result', function() {
var update = $(this).prev('span');
var td = $(this).closest('td');
update[0].contentEditable = true;
td.append('<button class=\"result\">Save</button></td>');
$(this).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>Variable A</th>
<th>Variable B</th>
<th>Variable C</th>
<tr>
<td><span id="field_1">Value A</span>
<button type="button" class="result">EDIT</button>
</td>
<td><span id="field_2">Value B</span>
<button type="button" class="result">EDIT</button>
</td>
<td><span id="field_3">Value C</span>
<button type="button" class="result">EDIT</button>
</td>
</tr>
</table>
Related
I have HTML page which have multiple check boxes and individually they can be checked. I have button select, so what I am suppose to do is. When I click on select all the check boxes should get selected, and deselected.
Html
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$('#selectAll').click(function(event) { //on click
if(this.checked) { // check select status
$('.btn-chk').each(function() { //loop through each checkbox
this.checked = true; //select all checkboxes with class "checkbox1"
});
}else{
$('.btn-chk').each(function() { //loop through each checkbox
this.checked = false; //deselect all checkboxes with class "checkbox1"
});
}
});
});
</script>
<table id="example" cellspacing="0" width="20%">
<thead>
<tr>
<th><button type="button" id="selectAll" class="myClass">Select</button></th>
<th>number</th>
<th>company</th>
<th> Type</th>
<th> Address</th>
<th>Code</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="button-checkbox">
<button type="button" class="btn-chk" data-color="success"></button>
<input type="checkbox" class="hidden" />
</span>
</td>
<td>1</td>
<td>APPLE</td>
<td>IT</td>
<td>San Jones</td>
<td>US</td>
</tr>
<tr>
<td><span class="button-checkbox">
<button type="button" class="btn-chk" data-color="success"></button>
<input type="checkbox" class="hidden" />
</span>
</td>
<td>2</td>
<td>DELL</td>
<td>IT</td>
<td>San Jones</td>
<td>US</td>
</tr>
<tr>
<td><span class="button-checkbox">
<button type="button" class="btn-chk" data-color="success"></button>
<input type="checkbox" class="hidden" />
</span>
</td>
<td>3</td>
<td>Amazon</td>
<td>IT</td>
<td>San Jones</td>
<td>US</td>
</tr>
<tr>
<td><span class="button-checkbox">
<button type="button" class="btn-chk" data-color="success"></button>
<input type="checkbox" class="hidden" />
</span>
</td>
<td>4</td>
<td>Microsoft</td>
<td>IT</td>
<td>San Jones</td>
<td>US</td>
</tr>
</tbody>
</body>
</html>
Output
In the image I have select button. what I want is when I click on select button all the check boxes should get selected
If you want to toggle the checkbox state, you can do like this
var chkd = true;
$('#selectAll').click(function(event) {
$(":checkbox").prop("checked", chkd);
chkd = !chkd;
});
Fiddle
#selectAll is a button, it doesn't have a checked property, but one could emulate that with a data attribute instead.
Secondly, .btn-chk isn't a checkbox either, so it can't be checked, you have to target the checkboxes
$(document).ready(function() {
$('#selectAll').click(function(event) {
var checked = !$(this).data('checked');
$('.btn-chk').next().prop('checked', checked);
$(this).data('checked', checked);
});
});
FIDDLE
An simple way is like below:
$(function() {
$('#selectAll').click(function() {
$(':checkbox').prop('checked', !$(':checkbox').prop('checked'));
});
});
The Demo.
Check this jsFiddle
$(document).ready(function() {
$('#selectAll').click(function() {
$(':checkbox').prop('checked', !$(':checkbox').prop('checked'));
});
});
You can simply use it
For more info on jQuery visit w3schools-jquery
Change your jQuery code to
$('#selectAll').click(function(event) { //on click
if($('.hidden').prop('checked') == false) { // check select status
$('.hidden').each(function() { //loop through each checkbox
this.checked = true; //select all checkboxes with class "checkbox1"
});
}else{
$('.hidden').each(function() { //loop through each checkbox
this.checked = false; //deselect all checkboxes with class "checkbox1"
});
}
});
This will toggle between checked and unchecked of the checkboxes when you click the button.
inside the "click" function "this" is button and not a checkbox. and button property checked is underfined.
"$('.btn-chk').each" - is loop on each element with class ".btn-chk", in your HTML is buttons and not an checkboxes.
in your context the "#selectAll" must be a checkbox and put class '.btn-chk' on your checkboxes
Try this-
var checked = true;
$('#selectAll').click(function(event) {
$('table tr').each(function( index ) {
$(this).find('input[type="checkbox"]').prop(checked, true);
});
checked = !checked;
});
You can do it like this also with ':checkbox' selector.
$(document).ready(function () {
$('#selectAll').on('click', function () {
$(':checkbox').each(function () {
$(this).click();
});
});
});
This will definitely works.
$("#selectAll").click(function(){
var checked = !$(this).data('checked');
$('.btn-chk').prop('checked', checked);
$(this).data('checked', checked);
});
I want to hide a Sharepoint field based on radio button value. When i put my code, this doesn't work (the event on click doesn't trigger). If i don't put the code with the event, when i open my element the script works perfectly.
This is my code:
<p>
<script src="/sites/contsvil/jQuery/jquery-1.5.js">
</script><script type="text/javascript">
$(document).ready(function() {
$("input[name$='Richiesta 1']").click(function(){
var radio_value = $(this).val();
alert(radio_value);
});
var selectedValue = $("input[#name=Richiesta 1]:checked");
//alert(selectedValue.val())
if(selectedValue.val() == "No") {
$("input[Title='" + 'Data 1' + "']").closest('td.ms-formbody').closest("tr").hide();
}else {
$("input[Title='" + 'Data 1' + "']").closest('td.ms-formbody').closest("tr").show();
}
});
</script></p>
Could you help me?
Thank you very much.
Regards,
Francesco
Selecting radio buttons isn't as easy as other types on inputs on SharePoint. The following chunk of code gets all the radio buttons on a SharePoint New / Edit page and prints the label to the console.
$(":radio").each(function() {
var radioId = $(this).attr("id");
var lblText = $("label[for=\""+radioId+"\"]").text();
console.log(lblText);
});
Here is an example of attaching a click event to each radio button:
$(":radio").each(function() {
$(this).click(function() {
console.log($(this).attr("id"));
});
});
This should get you close enough to move forward. For others who wish to jump in, here is the rendered HTML for a radio input on SharePoint (ugly!):
<table cellpadding="0" cellspacing="1">
<tbody>
<tr>
<td><span class="ms-RadioText" title="Enter Choice #1"><input id="ctl00_m_g_6ccb25d5_91e9_45b3_bc48_b53a94f40a9a_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00" type="radio" name="ctl00$m$g_6ccb25d5_91e9_45b3_bc48_b53a94f40a9a$ctl00$ctl05$ctl01$ctl00$ctl00$ctl04$ctl00$RadioButtons" value="ctl00" checked="checked"><label for="ctl00_m_g_6ccb25d5_91e9_45b3_bc48_b53a94f40a9a_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00">Enter Choice #1</label></span>
</td>
</tr>
<tr>
<td><span class="ms-RadioText" title="Enter Choice #2"><input id="ctl00_m_g_6ccb25d5_91e9_45b3_bc48_b53a94f40a9a_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl01" type="radio" name="ctl00$m$g_6ccb25d5_91e9_45b3_bc48_b53a94f40a9a$ctl00$ctl05$ctl01$ctl00$ctl00$ctl04$ctl00$RadioButtons" value="ctl01"><label for="ctl00_m_g_6ccb25d5_91e9_45b3_bc48_b53a94f40a9a_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl01">Enter Choice #2</label></span>
</td>
</tr>
<tr>
<td><span class="ms-RadioText" title="Enter Choice #3"><input id="ctl00_m_g_6ccb25d5_91e9_45b3_bc48_b53a94f40a9a_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl02" type="radio" name="ctl00$m$g_6ccb25d5_91e9_45b3_bc48_b53a94f40a9a$ctl00$ctl05$ctl01$ctl00$ctl00$ctl04$ctl00$RadioButtons" value="ctl02"><label for="ctl00_m_g_6ccb25d5_91e9_45b3_bc48_b53a94f40a9a_ctl00_ctl05_ctl01_ctl00_ctl00_ctl04_ctl00_ctl02">Enter Choice #3</label></span>
</td>
</tr>
</tbody>
</table>
Here you go:
$("td[id='tdApproved'] input:radio[name*='ff4']").change(function(){
// do something});
"tdApproved" is the ID of the Radio button
For more information, read this article - Accessing Radio Buttons using JQuery in SharePoint
I am trying to get value of a text box by using closest().
My form contains dynamically created table with one text box and button in each row . I want to show the value of text box in button click event.
Table format is given below
<table id="dataarea" class="table">
<tbody>
<tr>
<td>jaison<td>
<td class="amountclm">
<input id="txtamt" class="amtcls" type="text" value="100">
</td>
<td>
<button id="schedule" class="schbtn btn btn-primary" type="button" onclick="UpdateSchedule()">Confirm</button>
</td>
</tr>
<tr>
<td>ARUN<td>
<td class="amountclm">
<input id="txtamt" class="amtcls" type="text" value="500">
</td>
<td>
<button id="schedule" class="schbtn btn btn-primary" type="button" onclick="UpdateSchedule()">Confirm</button>
</td>
</tr>
</tbody>
</table>
I have written one javascript code (given below) . when the code will execute, it return a null value.
Function
function UpdateSchedule() {
var amt2 = $(this).closest('td.amountclm').find('.amtcls').val();
alert( amt2);
}
Please let me know why am not getting the null value.
jQuery .closest() goes up from the current element until it finds what you give it to find. jQuery .find() goes down until it finds what you give it to find.
This does the trick:
http://jsfiddle.net/6T3ET/
id must be unique, you need to use class instead:
<button class="schedule schbtn btn btn-primary" type="button">
<input class="amtcls txtamt" type="text" value="500">
an use .click() instead of inline onClick handler since you're using jQuery. So you can do:
$('.schedule').click(function() {
var amt2 = $(this).closest('td').prev('td.amountclm').find('.amtcls').val();
alert( amt2);
});
Please note that the .amountclm input is the child of a td whose is the immediate previous sibling of parent td of your clicked .schedule button.
Try this
replace 'this' with the 'schedule_' class attribute
function UpdateSchedule() {
var amt2 = $(".schedule_").closest('td.amountclm').find('.amtcls').val();
alert( amt2);
}
HTML :
<table id="dataarea" class="table">
<tbody>
<tr>
<td>jaison<td>
<td class="amountclm">
<input id="txtamt" class="amtcls" type="text" value="100">
</td>
<td>
<button id="schedule" class="schbtn btn btn-primary schedule_" type="button" onclick="UpdateSchedule()">Confirm</button>
</td>
</tr>
<tr>
<td>ARUN<td>
<td class="amountclm">
<input id="txtamt" class="amtcls" type="text" value="500">
</td>
<td>
<button id="schedule" class="schbtn btn btn-primary schedule_" type="button" onclick="UpdateSchedule()">Confirm</button>
</td>
</tr>
</tbody>
</table>
or try with Jquery as
$(document).on('click', '.schedule_',function(){
var amt2 = $(this).closest('td.amountclm').find('.amtcls').val();
alert( amt2);
} );
Use .parent() and .prev() in jquery for this contradiction
$(".schbtn").click(function() {
var amt2 = $(this).parent().prev("td.amountclm").find('.amtcls').val();
alert( amt2);
});
Fiddle
First of all .closest() is not plain JavaScript. It's a function from jQuery.
http://api.jquery.com/closest/
and it traverses up in the element hierachy. And td.amountclm is not in the element hierachy of the button#schedule.
Therefore .closest wont find it.
here i am trying to fetch values of a particular column for a selected row via jquery.In Following code i have two rows which do not have any id.I tried following way and getting both rows value for that column appending each other.how to get value for that row only using jquery only.I want to call test function on click of that element, dont want to use http://jsfiddle.net/SSS83/
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
function test(){
var id = $(".use-address").closest("tr").find('td:eq(2)').text();
alert(id);
}
</script>
</head>
<body>
<table id="choose-address-table" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Name/Nr.</th>
<th>Street</th>
<th>Town</th>
<th>Postcode</th>
<th>Country</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr>
<td class="nr"><span>50</span>
</td>
<td>Some Street 1</td>
<td>Glas</td>
<td>G0 0XX</td>
<td>United Kingdom</td>
<td>
<button type="button" class="use-address" onclick="test();">Use</button>
</td>
</tr>
<tr>
<td class="nr"><span>30</span>
</td>
<td>Some Street 2</td>
<td>Glasgow</td>
<td>G0 0XX</td>
<td>United Kingdom</td>
<td>
<button type="button" class="use-address" onclick="test();">Use</button>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Not sure why you don't want to use jQuery Click event!!
Any way, if you want to stick with your test function, you need to tell the function from where it got called.
so change the
<button type="button" class="use-address" onclick="test();">Use</button>
to
<button type="button" class="use-address" onclick="test(this);">Use</button>
And update your test function as
function test(el) {
var id = $(el).closest("tr").find('td:eq(2)').text();
alert(id);
}
Enjoy!!
If you change your mind you can use the following code
jQuery('document').ready(function() {
jQuery('.use-address').on('click',function() {
var id = $(this).closest("tr").find('td:eq(2)').text();
alert(id);
})
});
Based on a click of a TD:
$('td').on('click',function() {
//get the column of the TD
var myCol = $(this).index();
//loop through the rows of this table, get the TD in the same column
$(this).parent('table').find('tr').each(function() {
var colValue = $(this).find('td').eq(myIndex).html()
}
})
"colValue" in the loop will grab the contents of the TD at that position.
I have the following html table:
<tbody>
<tr>
<td class="rich-tabpanel-content">
<table>
<tbody>
<tr>
<td>
<span class="bold">Overview</span>
</td>
</tr>
<tr>
<td>
<input class="titleInput" type="text"></input>
</td>
</tr>
<tr>
<td>
<span class="bold">Shorttext</span>
</td>
</tr>
<tr>
<td>
<textarea class="shorttextInput"></textarea>
</td>
</tr>
<tr>
<td>
<span class="bold">Longtext</span>
</td>
</tr>
<tr>
<td>
<textarea class="longtextInput"></textarea>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
Now i want to select these tags in DOM:
<span class="bold">Overview</span>
<span class="bold">Shorttext</span>
<span class="bold">Longtext</span>
I have written these line of JQuery and Java Script Code to change the value of these HTML Tags, but the command
"jQuery(value).parent().prev();"
doesn´t select the right html tag in the DOM:
jQuery('.titleInput').each(function(index, value) {
selectAndExpand(value);
}
function selectAndExpand(value) {
var captionCell = jQuery(value).parent().prev();
captionCell.empty();
var newCaption = '<span class="bold">' + "HERE IS MY NEW INPUTVALUE" + '</span>';
captionCell.append(newCaption);
};
How can i solve this problem?
It is important to navigate for example from the node
<textarea class="longtextInput"></textarea>
to
<span class="bold">Longtext</span>
or from
<input class="titleInput" type="text"></input>
to
<span class="bold">Overview</span>
Use:
$('.bold').each(function(){
$(this).html("HERE IS MY NEW INPUTVALUE")
});
Working Fiddle
With Javascript:
var elements = document.getElementsByClassName('bold');
console.log(elements[0]);
console.log(elements[1]);
console.log(elements[2]);
With jQuery:
var elements = $('.bold');
console.log(elements[0]);
console.log(elements[1]);
console.log(elements[2]);
or...
console.log($('td:contains("Overview")'));
console.log($('td:contains("Shorttext")'));
console.log($('td:contains("Longtext")'));
Cheers.
You can select them by class name (when the class name is the same, in your case "bold"):
$(".bold");
To select all textareas after them and set values to these "bold" - element use
var spans = $(".bold");
$.each(spans, function(index, item) {
var spanTd = $(item).closest("tr");
var value = $(spanTd).next().find("textarea").val();
if (value === undefined) { //if there aren't textarea - get textbox.
value = $(spanTd).next().find("input[type='text']").val();
}
$(item).html(value);
});
EDIT: Demo - http://jsfiddle.net/h9fpy/
use class selector in your case use $('.bold') to select the span class bold and you can easily navigate to prev and next like $('.bold').parent('tr').next().find('.bold'); and also give the bold class to your input elements so that we can easily navigate.