We Keep Coding

How to refresh an Input field after changing its value with JQuery?

I have an Input element in HTML (and a Javascript template) with empty Value. Throught AJAX and JQuery, I update the said value to a list of words split by comma. Each word should become green retangulars with an 'X' to remove it from the field. The same list of words works perfectly when I write it down in the code.
The problem is that when I put this very same string in the Value attrib. using JQuery, it just doesn't work properly. I just get plain text, and those fancy green retangulars only appear when I click inside the input field and hit TAB key. Then They become one item only and when I finally click to remove it, then they got split(!).
I have already tried using fadeOut() and fadeIn() and refresh method. Did not work.
Any ideas about this?
HTML:
<input id="tags_1" type="text" class="tags form-control" value="" />
AJAX/JQUERY:
var tags_x = tags_x.replace(/\,/g, ', ');
var tags_x = tags_x.split(',');
$('#tags_1').val(tags_x);
$('#tags_1').attr('value', tags_x);
$('#tags_1').fadeOut();
$('#tags_1').fadeIn();

Your id of the input is tags_1 but you are selecting it like #tags_1_tag. Why is that? I think maybe that could be the reason.
And by the way when you use var tags_x = tags_x.split(','); tags_x is an array now. If you want to put it in a value convert it to a string and then try to put it in the value attr. You can see an example below:
var new_x = tags_x.join('')
$('#tags_1_tag').val(new_x);

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.

jQuery - Change name of an input field by using value of another input field filled at the same time

I'm working on a dynamic form where you can add or delete fields, Here you can find the fiddle
The first button you find is Add Metric. From this the code generates:
Input Field Metric
Button Add Tag
Inside this field a user can add a tag with the button Add Tag, generated when you click add Metric. When you click Add Tag button, two fields are generated:
Input Field Id
Input Field Value
The Html code that I need to generate in order to serialize the entire form (this is not however the question point) will result like this:
<input type="text" name="metrics[0][name]" value="Text 0"> // Metric
<input type="text" id="TagId0" name=" "> //Tag Id
<input type="text" id="TagValue" name="metrics[0][tags][][0]">
Problem:
I need that (when I fill the field with id="TagId0") the value I select will go immediately to the field name with id="TagValue". This field must result like this:
Consider I write on TagId0 the word "hello", field will become:
<input type="text" id="TagValue" name="metrics[0][tags][hello][0]">
How, if it's possible, it can be done?
Thanks

You can use the change method to detect a change in the fields value. Then use the attr method to change the name. Hope I understood correctly. Here is the modified JSFIDDLE.
$(document).on('change', '#InputsWrapper .inputID', function(){
thisVal = $(this).val();
thisName = $(this).siblings('.inputVal').attr('name');
newName = thisName.replace('[tags][', '[tags][' + thisVal);
$(this).siblings('.inputVal').attr('name', newName);
});
Don't forget to press enter after change the field value :)
Edit: I also added two classes to the fields you are appending. .inputID and .inputVal. I hope this helps!

you can write id of field something like TagId-0 and some common class like tagfield,so that u can split the value to get the index an then access it using the class
$(".tagfield").keypress(function() {
var id=parseInt($(this).attr("id").split("-"));
$(this).siblings().attr("name","metrics["+id+"][tags]["+$(this).val()+"][0]");
});

Unable to Retrieve Text from DOM

Using JS in CSOM for SharePoint 2013, I'm having difficulty retrieving the text from an element. This is from a custom display form for a custom list. The column type in question is a multi-line text box, but is rendered differently in the display form due to the form override script being used.
Inspect element in Chrome reveals:
<span class="formOverride" id="itemData" data-displayName="RequisitionItems">
<div dir>1||X-HEDC.000.000||GC-M||Critical Item #42||1||10||$10.00||</div>
</span>
Every attempt at retrieving the text in the div element has resulted in an empty string.
document.getElementById("itemData").innerText;
$("#itemData").text();
$("span#itemData.formOverride").text();
$("span#itemData.formOverride").children().text();
When I display the DOM properties for the span, the innerText is even listed properly, but still an empty string is returned.
What am I missing...?
Thanks in advance.
Edit: More info...
Override script:
$("span.formOverride").each(function()
{
//get the display name from the custom layout
displayName = $(this).attr("data-displayName");
elem = $(this);
//find the corresponding field from the default form and move it
//into the custom layout
$("table.ms-formtable td").each(function(){
if (this.innerHTML.indexOf('FieldName="'+displayName+'"') != -1){
$(this).contents().appendTo(elem);
}
});
});
So, the span posted originally has the contents from the default display form appended. I've never had any troubles accessing the formOverride information previously, so this is just being odd.
Further update:
Seems I cannot access any element's text on the page. It also appears that this is an issue particular to a SharePoint display form. I copied in full the script/html from my Edit page and pasted it into the Display page's corresponding file. In Edit the text returns fine, but in Display the text returned is an empty string.

Should be
$("#itemData").children().first().text();
Or
$("#itemData").find("div").text();
Or
$("#itemData div").text();

Your markup has a quote opening error
<span class="formOverride" id="itemData" data-displayName="RequisitionItems">
<div dir>1||X-HEDC.000.000||GC-M||Critical Item #42||1||10||$10.00||</div>
</span>
then
jQuery(function () {
console.log($("#itemData").text())
})
Demo: Fiddle

Search through an HTML Table and find text fields with required classes

I'm creating a validation script for a multi-step form, each group is inside a table and I want to check that the containing table has a required field inside it.
I've tried to implement this as below:
(where a = table id
.required = class, but the classes are like class = "something required")
function validForm(a) {
var myVar = $('a').find('.required').val();
alert(myVar);
}
the problem is that this code returns undefined. This is my first time using a .find function and I am having a hard time understanding how to use it.
HTML:
<table id = "default">
<tr><td>Default</td></tr>
<tr><td>Field name</td><td><input type="text" name="first_name" maxlength="35" class="txtfield-cu1 required" title="First Name"></td></tr> <- repeat a couple of times

if a is the table id, you will need to select by $('#a') instead of $('a').
In jQuery selection (and CSS) '#a' selects the tag with id = 'a', whereas a selects the <a> tag.
Edit: if a here stands for a variable that represents the id of the table, then you can use
$(a) to select it.
Edit 2: jsfiddle link

Try $("#a") to select by ID and not by tag name.