Develop Reference

jQuery: selected dropdown option returning undefined

I have a functionality where in a table, I can click an add button and a new tr gets prepended to the table. However, I want field AddOn to get disabled if a certain food category is selected. It is easy to tackle it on change but how to do it when I click on add and depending on the value originally selected in dropdown?
var index = 0;
var FoodCategory = "FoodCategory" + index;
var tr = '<tr class="row">' +
'<td></td>' +
'<td></td>' +
'<td><select id="' + FoodCategory + '" type="text" class="form-control" /><span id="FoodCat""></select></span></td>' +
'<td><span><select id="' + AddOns + '" class="form-control"></select></span><span id="AddOns"></span></td>' +
'</tr>';
("#tblFood").prepend(tr);
I'm trying to access the value of FoodCategory to disable the select of AddOns by
$('#'+FoodCategory).val() but it is not working.

jQuery: appended table row doesn't contain CSS styling

I have a dynamically created table via jQuery, but when a row element is added via ajax request, the newly added row does not follow the CSS styling. Is there a way to fix this?
Below is an example of what I have:
function createTable(data) {
var row = $('<tr id=' + data.id + '/>');
$("#table").append(row);
row.append($('<td>' + data.name + '</td>'));
row.append($('<td>' + data.age + '</td>'));
}

Have you tried the following:
var table=document.getElementByI("table");
var row=table.insertRow(table.rows.length);
var cell=row.insertCell(row.cells.length);
$(cell).text(data.name);
cell=row.insertCell(row.cells.length);
$(cell).text(data.age);

How to create img tag string in javascript

I am trying to create image tag string in javascript. This image tag in part of table row string. At the end I will append this table row string to mvc webgrid using jquery.
I have a javascript function which returns this new row
function getNewRow(email, friendlyName) {
var imgSrc = "/Content/Images/User.png";
// Create the new row html
var newRow = '<tr class=\"' + rowClass + '\">' +
'<td><text><img src\"' + imgSrc + '\"></text></td>' +
'<td>' + email + '</td>' +
'<td>' + friendlyName + '</td>' +
'</tr>'
return newRow;
}
I will append returned string to webgrid object.
// Append the new Row
$('#group').append(newRow);
But the image tag is not showing proper image. The forward slash is removed after appending. Used encodeURIComponent function but no use.
How to make it to show the image properly.

You have <img src\"' + imgSrc + '\"></text></td> when it should be <img src=\"' + imgSrc + '\"></text></td>. Notice the missing =.

It seems that you have a typo in the second line of newRow declaration, you are missing the = sign after src attribute

DOM manipulation when the value of trigger change

What's the best way to do this kind of manipulation case :
When the trigger using the combo box is change, I want to change the type of the textField that has previously been added to the form.
My sample data collection :
function DataProvide(){
selectValues = {
"choose" : "-Choose-",
"id" : "ID",
"emp_name" : "Employee Name",
"photo_path" : "Photo Path",
"emp_id" : "Employee ID",
"start_date" : "Start Date",
"birth_date" : "Birth Date"
};
$.each(selectValues, function(key, value) {
$('#data1_1')
.append($("<option></option>")
.attr("value",key)
.text(value));
});
}
$(document).ready(function() {
DataProvide();
});
Data has been displayed in the combobox.
Then I add a field to a form using the $.append()
var count = 1;
$(".addCF").click(function(){
count += 1;
var $row = $('<tr>'
+ '<td>' + '</td>'
+ '<td>' + '<input id="data2_' + count + '" type="text" name="data2[]" class="data2" value="" placeholder=""/>' + '</td>'
+ '<td>' + '<input id="data3_' + count + '" type="text" name="data3[]" class="data3" value="" placeholder=""/>' + '</td>'
+ '<td>' + 'Remove' + '</td>'
+ '</tr>').appendTo("#customFields");
$row.find('td:first').append($('#data1_1').clone())
});
$("#customFields").on('click','.remCF',function(){
$(this).parent().parent().remove();
count -= 1;
});
Until this point I've been as successful as I want.
But I want to make a small change to 3rd column. How best way to manipulate this form when trigger (combo box) that I select for example "start_date" then the field will be changed to use the class "onlyDate" that I add jQuery UI to display the date options.
I added :
$(".onlyDate").datepicker({
dateFormat: "dd-mm-yy"
});
Then to check the value of the combo
$("#customFields").on('change', '.tabelBaru', function() {
if(nilai=='gender'){
$this.closest("tr").find(".data3").replaceWith(
'<select name="data3[]" class="data3">'
+ '<option value="man" selected >Man</option>'
+ '<option value="woman">Woman</option>'
+ '</select>'
)
}else if(nilai=='start_date'){
$this.closest("tr").find(".data3").replaceWith(
'<input type="text" name="data3[]" value="" class="onlyDate"/>'
)
}
};
But jQueryUI datepicker does not appear as usual. But if the normal form (without using $.append) all running normally.
How do I fix it?

$(".onlyDate").datepicker({
dateFormat: "dd-mm-yy"
});
When this code execute, it will only find out that current statement's object whit class name onlyDate.
After that any object with class name onlyDate append on the page won't execute the datepick code.
Maybe you should try out jquery function "delegate" or execute the datepicker code after each append.

Is there any way to handle a particular column while adding the rows dynamically?

I am generating a dynamic table on click of a button as below -
$('.addRowButton').click(function () {
++counter;
var index=counter-1;
var newRowHtml =
'<tr>' +
'<td>' + counter +
'</td>' +
'<td><input name="b2bProductList[' + index+ '].productId" class="variant b2bTableInput" /></td>' +
'<td align="center"><span id="pvDetails" class="pvDetails"></span></td>' +
'<td><div class="img48" style="vertical-align: top;"><img src=""></td>'+
'<td><input name="b2bProductList[' + index + '].quantity" class="qty b2bTableInput"/></td>' +
'<td align="center"><span id="mrp" class="mrp"/></td>' +
'<td align="center"><input id="totalPrice" readonly="readonly" class="totalPrice b2bTableInput" type="text"></td>' +
'</tr>';
$('#poTable').append(newRowHtml);
But I want to handle a particular column my self - kind of override it. I have to display an image and have to use some attributes in this column it which I can not put in the above code. How should I override it. If I am going to declare any tr or td in my table in the main <table></table> they are taking up extra row statically. Is there any particular way to handle a particular column while adding the rows dynamically?
EDIT - I have to set the source of the image, the source string of which I am fetching through an async call on the focusout of my Id textbox. Now can not set the source in the row generation time, so I will have to handle each column at a time giving src after I have fetched it. The column is mentioned in my code
'<td><div class="img48" style="vertical-align: top;"><img src=""></td>'+
Now I have to set the src. I hope this tells my problem clearly.

You could use
$('#myTable tr td::nth-child('+columnIndex+')')
if you know the index of the column or you could give that specific td a unique class
newRowHtml ='<tr>' + '<td class="someClass"></td> ... etc
and select that class:
$('.someClass').each(function(){
// Some other code
});
Alternatively you could add the rows like so:
var $row = $('<tr></tr>');
var $id = $('<td></td>').html(id);
var $someOtherfield = $('<td></td>').html(someOtherData);
$('#myTable').append($row.append($id).append($someOtherfield));
then use the variable $someOtherfield to access it and work on it.
$someOtherfield.find('img').attr('src' , yourSource);

The simplest to select the cells of a specific column, if you have no fancy colspan, is to use :nth-child() :
$('#mytable td:nth-child('+columnIndex+')')

var tds= $('#poTable').find("td:first");
will give you the first column.
and to iterate over the elements
tds.each(function(index){
//do your stuff here..
});
hope this helps..