We Keep Coding

How to check if a table row contains a certain button in jQuery?

I have an HTML table that is filled dynamically and only shows a certain button in the first column if specific conditions are met, otherwise this button does not appear.
The button looks as follows (it always has the name = voidBtn):
<input type="button" name="voidBtn" value="Void" />
How can I check whether the current row contains this button or not ?
I was thinking of something like the following but didn't know how to write this the right way:
if($(this).closest('tr').find('input[name=void]') ...
OR
if($(this).closest('tr').find("td:eq(1):contains('voidBtn')") ...
I just need to know if the current row has such a button as then I want to click on it and do some other stuff.

Your way of checking should be fine, you just need to ask if it found it with length:
if($(this).closest('tr').find('input[name=void]').length > 0){
// there is a button
}

Considering $(this) as current row then you can find button like this...
$(this).find('input[name=voidBtn]')

$( '#'+tableId + "> tbody > tr> td").find('td','searched-string')
Here is the Example where we can find an element inside a row containing searched-string.Here yoy may use other option as my string was coming for input text field.

Let say you want to find all the rows of the table that contains a particular String "STRING" then you may write like this
**$('#tableid > tbody').find('tr','STRING')**
You may also count the number of row by
**$('#tableid > tbody').find('tr','STRING').length**
In Above answer i already declared tableid as Var in my Jquery Code.

Search value in div

I've got a little function which allows to search values through rows, but there is a problem with it - search function is not working properly.
Please take a look at the fiddle here http://jsfiddle.net/4f3WF/
Try to set text in input to "798" for example.
In the end this function must be able to search through entire row, not just only first or last ms-column div. I just don't get what's wrong.

Just try with:
e.find('.multiple-selector-table .ms-search-label .ms-search').on("keyup", function() {
var value = $(this).val();
e.find('.multiple-selector-table-row').hide();
e.find('.ms-column:contains("' + value + '")').parents('.multiple-selector-table-row').show();
});
Updated fiddle
In the first step, we hide all rows. Next we search for cells that contain value passed in input and show their parent rows.

Get value of text box using based on radio button selection jQuery

I created a HTML table that has a radio button, delete button, and a text box in each row. When I select the apply button, I want to get the value of the text box in the same row as the checked radio button. Attached is my fiddle. Any help would be greatly appreciated :)
<input type="text" name="context" class="chooseContext"/>
This is the text that I am wanting to figure out how to alert based on which radio button is selected.
JSFiddle Code

Not sure if it's the most elegant solution but you can do this
//Send selected default to add on
$(".contexts-list tr input[type='radio']:checked").each(function() {
var val = $(this).parents("tr").find("input.chooseContext").val();
alert("Default: " + val);
});
Demo of it working

you can alert it like this:
$('#applyButton').on('click', function(){
var alertTxt = $(':radio:checked').closest('tr').find('.chooseContext').val();
alert(alertTxt);
});
Updated Fiddle

I solve this kind of things by using parents property in jQuery.
so usually when you click on something do a
$(this).parents('tr').find('input[type=text]').val();
So the hint here is to pick up the parent element row and then try finding the desired element in that row to take action.

You can set a number on id of input radio and input text, then you can check what of the radios of the same group is checked, then take the id of this radio and get the val of input text that has the same id. Wait i´m doing the jsfiddle... Regards!
EDIT: Here are users faster than me, Regards!

HTML: Get value from input with no ID

Been looking around and I cant seem to find an answer to this so maybe im wording it wrong but here it goes.
So I have a table displaying data from a database. In jQuery I have made it so a row can be added with empty inputs and then submitted to the database, this works fine.
I am now attempting to be able to edit it. So each row will have a button to edit that row, the button will put the row values into inputs so you can change the value and update the database. How can I do this? I was looking into using this here but Im not sure how I can get the value of the input boxes without them having some sort of ID.
jQuery I was trying to use:
$('#tbl').on('click','.xx',function() {
$(this).siblings().each(
function(){
if ($(this).find('input').length){
$(this).text($(this).find('input').val());
}
else {
var t = $(this).text();
$(this).text('').append($('<input />',{'value' : t}).val(t));
}
});
});
Am I over thinking this? Should I just be grabbing the values and then putting them in pre-made input boxes?
Update:
HTML:
sb.AppendLine("<table style='width: 80%;'>")
sb.AppendLine("<tr class='inputRowbelow'>")
sb.AppendLine("<td style='width: 20%;' class='ui-widget-header ui-corner-all'>Area</td>")
sb.AppendLine("<td class='ui-widget-header ui-corner-all'>Details</td>")
sb.AppendLine("<td class='ui-widget-header ui-corner-all'>Options</td>")
sb.AppendLine("</tr>")
For Each w In workItems
sb.AppendLine("<tr>")
sb.AppendLine("<td>" & w.area & "</td>")
sb.AppendLine("<td>" & w.details & "</td>")
sb.AppendLine("<td><a href='#' class='fg-button ui-state-default ui-corner-all edit'><img src='/images/spacer.gif' class='ui-icon ui-icon-pencil' /></a></td>")
sb.AppendLine("</tr>")
Next
sb.AppendLine("</table>")

There are a couple of ways to do this, including changing your VB code to add extra data to the html, but I will answer this from a pure javascript/JQuery solution.
First of all you need to handle the click event for each edit button, after that you find the matching row, and then you can get the first to td elements of that row...
$(".edit").click(function(e){
e.preventDefault();//prevent the link from navigating the page
var button = $(this);//get the button element
var row = button.closest("tr");//get the row that the button belongs to
var cellArea = row.find("td:eq(0)");//get the first cell (area)
var cellDetails = row.find("td:eq(1)");//get the second cell (details)
//now you can change these to your inputs and process who you want
//something like this...
ConvertToInput(cellArea, "area");
ConvertToInput(cellDetails, "details");
});
function ConvertToInput(element, newId){
var input = $("<input/>");//create a new input element
input.attr("id", newId);//set an id so we can find it
var val = element.html();//get the current value of the cell
input.val(val);//set the input value to match the existing cell
element.html(input);//change the cell content to the new input element
}
Here is a working example
From that you can then do the saving that you say you have already implemented, using the ID values of each field to get the values to save.

Instead of using a For Each ... in ... Next loop, use a a For loop with a counter. give each button and each row an ID with the current counter value at the end. You can then use Jquery to make each row editable separately, because each row has a row number now.

How to add buttons to the content of a textbox in javascript

I need some kind of textbox control that can host buttons along the text strings. Basically I want to create a textbox with names that enables the user to remove some names after addition. How can this be accomplished in javascript ?
Thanks in advance.

Just add SPANs before the textbox in your element. Format the SPANs as colored boxes with the text and maybe an X for deleting the entry and you're good to go.
Using JQuery this is really easy. Or do you want a Webforms-Control which is able to do that?
Edit:/
The Inline-Element could look like that:
<span id="my-filterbox">
<input type="text" name="next-filter" />
</span>
And then your JS to add a key-event handler. Im using JQuery in this case:
$('#my-filterbox').keyup(function(event) {
if(event.keyCode == '13') { // 13 = key code for enter
var value = $(this).val();
$(this).val('');
$('#my-filterbox').prepend('<span class="filter-elem">' + value + '</span>');
}
});
This way you add the filter to the span my-filterbox everytime the user hits enter. Per CSS you're able to format the span at the left side of the input box.
This code is untested but I think you get the idea.