Develop Reference

Input fields are not showing when copy a table row using javascript

I am working with table where copy a table row using javascript issue is that when i click on add more button then copy a table row but input fields are not showing here is my code of table
<table class="striped display" cellspacing="0" width="100%" id="myTable">
<tbody>
<tr>
<td class="input-field col s2">
<label>Module</label>
<select data-rel="chosen" name="moduleid[]" class="form-control">
<?php
$RowRes=mysqli_query($con,"Select id, name from tbl_module where status=1 order by id asc");
while($URow=mysqli_fetch_array($RowRes)){
echo "<option value=".$URow[0].">".$URow[1]."</option>";}?>
</select>
</td>
<td class="input-field col s2">
<label>Week Days</label>
<select id="week_days" data-rel="chosen" name="week_days[]" class="form-control" multiple="multiple">
<option value="1">Monday</option>
<option value="2">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
</select>
</td>
<td><button type="button" name="add" id="more_btn" class="btn right">Add More</button></td>
</tr>
</tbody>
and here is the javascript code where append a table row on button click
<script type="text/javascript">
$(document).ready(function() {
var i=1;
$('#more_btn').click(function() {
i++;
$('#myTable tbody').append('<tr id="row'+i+'"><td class="input-field col s2"><label>Module</label><select data-rel="chosen" name="moduleid[]" class="form-control"><?php$RowRes=mysqli_query($con,"Select id, name from tbl_module where status=1 order by id asc");while($URow=mysqli_fetch_array($RowRes)){echo "<option value=".$URow[0].">".$URow[1]."</option>";}?></select></td><td class="input-field col s2"><label>Week Days</label><select data-rel="chosen" name="week_days[]" class="form-control" multiple="multiple"><option value="1">Monday</option><option value="2">Tuesday</option><option value="3">Wednesday</option><option value="4">Thursday</option><option value="5">Friday</option></select></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
$('.btn_remove').click(function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
});
});
Here is the image of issue
see that first row of table input fields are working perfectly but second row of table that copy when click on Add More button input fields are not working

You can just use JQuery to achieve what you want with the clone method and remove the embeded PHP code.
A simple fiddle can be found here https://jsfiddle.net/xpvt214o/809590/ that merely updates the id of the main <tr> itself. But the code looks as follows:
$(document).ready(function() {
var i=1;
$('#more_btn').click(function() {
i++;
$clone = $('#first').clone(true);
$clone.attr('id', "row" + i);
$clone.find('.btn_remove').attr('data-remove-id', 'row'+i);
$('#myTable tbody').append($clone);
});
$('#myTable').on('click','.btn_remove',function(){
var button_id = $(this).data("remove-id");
$('#'+button_id+'').remove();
});
});
The only id i'm manipulating here is the id of the table row itself. But using jQuery selectors you can change the ids etc. of any of the cloned elements.
I do have a sneaky suspicion your current code won't work as expected, as even in your example all the form inputs have the same names (you only seem to be updating the id of the table row). You may want to make the form names themselves more dynamic by appending the i elsewhere. But that is obviously a different question.
You might also want to consider just having one "Add more" button at the bottom of all the forms, rather than duplicating that as they all have the same id as well. And you don't want to end up with any unintended consequences bearing in mind the click handler is associated with that element.

In your select the php code will not execute:
<select data-rel="chosen" name="moduleid[]" class="form-control"><?php$RowRes=mysqli_query($con,"Select id, name from tbl_module where status=1 order by id asc");while($URow=mysqli_fetch_array($RowRes)){echo "<option value=".$URow[0].">".$URow[1]."</option>";}?></select>
you need to make an api and get data from server.
On first load it works php executed on server and html response generated and that sent to browser. but by adding elements with javascript will not be able to execute php code.

How to use array of checkbox and array of text areas/dropdowns in angular js table with ng-repeat?

I have a use case where i need to store which employee is staying in which hotel of particular city for some data processing. I have populated cities in one drop down, once user selects particular city, hotels from that city will be populated in another drop down.
If any hotel is not listed on drop downs, user need to select the checkbox so one text area will appear beside drop downs where user can enter hotel name for that employee and drop downs for that particular employee will be disabled. I was able to handle this stuff initially when there was only 3 cities. But now cities and hotels are increasing and i want to make a dynamic table for this.
So i have written below code,
<tr data-ng-repeat="employee in department.employees">
<td>
<input type='checkbox' name="selectedChecks[]" data-ng-model="check"
data-ng-change="ShowHide()"/>
</td>
<td>{{employee.empId}}.{{employee.empname}}</td>
<td>
<select class="form-control" name="selectedCities[]" data-ng-model="hotelsource"
data-ng-options="city.cityname for city in cities" data-ng-disabled="check">
<option value=''>Select</option>
</select>
</td>
<td>
<select class="form-control" name="selectedHotels[]" data-ng-disabled="check" data-ng-model="option"
data-ng-options="hotel.hotelname for hotel in hotelsource.hotels">
<option value=''>Select</option>
</select>
</td>
<td>
<div data-ng-show="ruleArea">
<textarea id="txtArea" name="txtAreas[]" rows="3" cols="70"></textarea>
</div>
</td>
Initially i was hiding text areas as below and there were no array names as shown above,
$scope.ShowHide1 = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.ruleArea1 = $scope.check1;
};
$scope.ShowHide2 = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.ruleArea2 = $scope.check2;
};
$scope.ShowHide3 = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.ruleArea3 = $scope.check3;
};
But now with above table piece of code and only single ShowHide() function, i am able to disable the drop downs but text area hide-show isn't working.
I am very new to Angular JS, So can anyone help me on how to showhide this text areas and how to get this selected values?

try this. and also for other field similar address define ng-model.
var app = angular.module("app",[]);
app.controller("MyCtrl" , function($scope){
$scope.data ={
"employees":[
{"empId":"emp123","empname":"abc","address":"address1","level":"level1"},
{"empId":"emp127","empname":"abc1","address":"address2","level":"level2"}
]
};
$scope.check = [true,true];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<table>
<tr data-ng-repeat="employee in data.employees">
<td>
<input type='checkbox' name="selectedChecks[]" data-ng-model="check[$index]" ng-change="ShowHide()"
data-ng-change="ShowHide()"/>
</td>
<td>
<div data-ng-show="check[$index]">
<textarea id="txtArea" name="txtAreas[$index]" ng-model="employee.address" rows="3" cols="70"> </textarea>
</div>
</td>
</tr>
</table>
<span>{{data|json}}</span>
</div>

You can easily get the index of your array in the ng-repeat with $index.
Try something like this:
In your html
<input type='checkbox'
data-ng-model="check[$index]"
data-ng-change="ShowHide($index)"/> // model and change function with $index
<div data-ng-show="ruleArea[$index]"> // get value for this index
In your angular code
$scope.ShowHide = function (index) {
$scope.ruleArea[index] = $scope.check[index]; // ruleArea and check with index
};
To bind the values to the specific employee in department.employees, use ng-model="employee.hotelsource", ng-model="employee.option" etc. So later if you have an employee from the department.employees list you can access employee.hotelsource.
Alternative: If you need the data separate then initialize an array and bind by the index.
$scope.employeeData = [];
ng-model="employeeData[$index].hotelsource"
So later you have an array with the values that you can access by the employee index.

Dynamically populate user input corresponding json data with jquery

I have a json data that is like this,
[
{
"metalTypeId": 1,
"metalTypeName": "copper"
},
{
"metalTypeId": 3,
"metalTypeName": "steel"
}
]
My html is structured like this:
<table id="lineItemTable">
<tr class="row_to_clone">
<td>
<select>
<option>Select One Option</option>
<option>copper</option>
<option>steel</option>
</select>
</td>
<td>
<p></p>
</td>
</tr>
<tr class="row_to_clone">
<td>
<select>
<option>Select One Option</option>
<option>copper</option>
<option>steel</option>
</select>
</td>
<td>
<p></p>
</td>
</tr>
</table>
What I want to do is when the user select one of the options in the dropdown, I want to populate the corresponding json data to the p tag in my td. And my table contains two identical rows.
So for example, if user select copper for the first table row, and select steel for the second table row, the corresponding p will populate text "1" and "3" to the html page. If user do not select both rows, only the row that is selected will populate corresponding data to the p tag.
I am green to jQuery so I wrote some js code but it does not work as expected:
the variable that stores the json data is named as jasonData:
$('select').on('change', function (e){
$.each(jasonData, function(i, v) {
if (jasonData.metalTypeName == $('select').val()) {
$('p').text(v.metalTypeId);
return;
}
}); //end each()
}); // end on()
By looking at my code I already know one issue, the p and select select both two table row fields, but I do not know how to correctly fix it. The code may have other issues, please advice.

Your code is very close to working. You just need to cache the active select when it triggers the change event so you can reference it later; compare the active object in your each (you were incorrectly referencing the whole array); and use a few selectors to find the right paragraph. However, you may want to consider using something closer to David's answer. It's a bit cleaner than this method.
var jasonData = [
{
"metalTypeId": 1,
"metalTypeName": "copper"
},
{
"metalTypeId": 3,
"metalTypeName": "steel"
}
];
$('select').on('change', function (e){
var selected = this;
$.each(jasonData, function(i, v) {
if (v.metalTypeName === selected.value) {
$(selected).closest('.row_to_clone').find('p').text(v.metalTypeId);
return;
}
}); //end each()
}); // end on()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="lineItemTable">
<tr class="row_to_clone">
<td>
<select>
<option>Select One Option</option>
<option>copper</option>
<option>steel</option>
</select>
</td>
<td>
<p></p>
</td>
</tr>
<tr class="row_to_clone">
<td>
<select>
<option>Select One Option</option>
<option>copper</option>
<option>steel</option>
</select>
</td>
<td>
<p></p>
</td>
</tr>
</table>

I really recommend you not to use selectors so general such as "select" and "p"; while you are expanding your code, you'll get into issues because of these so generalized; I recommend you using some classes to help you or ID's.
Also, if you can change the structure of that JSON you won't need to do that each, basically you're forcing a O(n) problem there when you can something easier.
Here's an example I wrote for you doing the functionality that you want
http://jsfiddle.net/6v4zzgjj/
Now, if you want to make the selection of the results easier you can try the following
//Rename this variable better IE jsonData;
var jasonData = {"copper": { "metalTypeId": 1,"metalTypeName": "copper"}, "steel": {"metalTypeId": 3,"metalTypeName": "steel"}};
//Now the selector could be something like
$('.metalSelector').on('change', function (e){
var value = $(this).val();
$('#result').text(jasonData[value].metalTypeId);
});
That easy!

Select Element doesn't work after clone

Hi! Guys I know nothing when it comes to JQuery... Please help me with this.
I created bootstrap form with a button add another field if the user want additional input fields. The new field are cloned from the original field.
The date-picker didn't work at first (on cloned field) so I add code to solve that.. (which I was luck to do and it took me 7hrs to get it correct)..
but then I found out even the cloned select box aren't working also.
-> Since the selector was using ID (#e1), I thought that was a reason so I changed it to class (.e1). That didn't help.
->So I tried the same method (like how I did on date-picker) but it also failed..
Here is the Code:
-> At Page header
<script src="assets/js/jquery-2.0.3.min.js"></script>
<script>
function cloneRow()
{
var row = document.getElementById("rowToClone"); // find row to copy
var num = Math.floor((Math.random() * 500) + 1);
var table = document.getElementById("tableToModify"); // find table to append to
var clone = row.cloneNode(true); // copy children too
clone.id = "row" + num; // change id or other attributes/contents
table.appendChild(clone); // add new row to end of table
clone.querySelectorAll('[id="id-date-picker-1"]')[0].id = "id-date-picker-" + num; //Put Unique ID
//For Selector
$(function(){
$('.e1').select2();
$('.clone').click(function() {
var clone = $('.select2').clone();
var cloned = clone.find('.e1');
cloned.removeClass('select2').removeAttr('id');
clone.appendTo('.elements');
$(cloned).select2();
});
});
}
</script>
The Row to be cloned
<tbody id="rowToClone">
<tr>
<td>
<div class="form-group" style="width: 100%;">
<select class="e1" style="width:100%;">
<option value="AL" />Alabama
<option value="AK" />Alaska
<option value="AZ" />Arizona
</select>
</div>
</td>
<td>
<div class="form-group" style="width: 100%;">
<select class="e1" style="width:100%;">
<option value="VA" />Virginia
<option value="WA" />Washington
</select>
</div>
</td>
</tr>
-> The trigger button
<button type="button" onclick="cloneRow()" class="btn btn-default purple"><i class="fa fa-plus"></i> Add </button>
->Page Footer
//On Page Footer
//--Jquery Select2--
$(".e1").select2(); //I added this line
$("#e1").select2();
$("#e2").select2({
placeholder: "Select a State",
allowClear: true
});
-> Please help me.. I will appreciate.

A couple of problems (your HTML for the options is invalid), but a lot of plugins, that change the DOM, simply do not like to be cloned. They store instance information in element data and are often not re-entrant (cannot reapply the plugin to elements that already have the DOM changes).
As taking existing rows to clone can get messy, I would suggest a slightly different approach to the cloning, that will avoid these problems.
Simply keep a separate template row in your page, that you can clone, inside a dummy script block:
<script id="rowToClone" type="text/template">
<tr>
<td>
<div class="form-group" style="width: 100%;">
<select class="e1" style="width:100%;">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option></select>
</div>
</td>
<td>
<div class="form-group" style="width: 100%;">
<select class="e1" style="width:100%;">
<option value="VA">Virginia</option>
<option value="WA">Washington</option></select>
</div>
</td>
<td>
<div class="form-group" style="width: 100%;">
<input type="text" class="datapicker"/>
</div>
</td>
</tr>
</script>
type="text/template" is unknown, so the script is ignored by all browsers.
Then the clone becomes as simple as:
$('#clonerow').click(function(){
$('#table tbody').append($('#rowToClone').html());
// now apply any plugins to the new row
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/j1smswmt/2/
Here is an expanded version with datepicker applied to each new row:
$('#clonerow').click(function(){
$('#table tbody').append($('#rowToClone').html()).find('tr:last .datapicker').datepicker();
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/j1smswmt/3/
Notes:
Your options are currently invalid. You need to enclose the text inside matching <option> & </option> tags.
As you are using jQuery avoid using inline onclick handlers. They separate the event registration from the event handler for no real benefit. Do it the jQuery way instead.

In case anyone still experience this issue but would still want to use the jQuery clone:
If you are using Bootstrap, you actually just need to remove the bootstrap-select and then reinitialise the normal cloned select.
Just add these two lines of code after you do your clone:
clone.find('.bootstrap-select').remove();
clone.find('select').selectpicker();
Based on answer from this Github issue: https://github.com/silviomoreto/bootstrap-select/issues/605

How to manage table row associated javascript (control ID) while do clone the row

Initially, table has only one tr (label/header) and then on click of add button click , i create new tr which looks as below. and all other consequence click of add will clone the last tr.
<tr>
<script type="text/javascript">
//fetch the value of select picker control and set into hidden field.
AJS.$('#' + '${field_uid}-resourcetypepicker-new1').change(function () {
AJS.$('#' + '${field_uid}-resourcetype-new1').val(AJS.$(this).attr('value'));
});
//fetch the value of select picker control and set into hidden field.
AJS.$('#' + '${field_uid}-locationpicker-new1').change(function () {
console.log(AJS.$(this).attr('value'));
AJS.$('#' + '${field_uid}-location-new1').val(AJS.$(this).attr('value'));
});
</script>
<td>
<input id="${field_uid}-resourcetype-new1"
name="${field_uid}"
type="hidden"
value="$r.getResourceType()" />
<select id="${field_uid}-resourcetypepicker-new1">
<option value="adad" #if ($r.getResourceType() == "adad") selected="selected"#end >adad</option>
<option value="dada" #if ($r.getResourceType() == "dada") selected="selected"#end >dada</option>
<option value="aadd" #if ($r.getResourceType() == "aadd") selected="selected"#end >aadd</option>
</select>
</td>
<td>
<input id="${field_uid}-location-new1"
name="${field_uid}"
type="hidden"
value="$r.getLocation()" />
<select id="${field_uid}-locationpicker-new1">
<option value="Internal(Local)" #if ($r.getLocation() == "Internal(Local)") selected="selected"#end >Internal(Local)</option>
<option value="Contractor(Local)" #if ($r.getLocation() == "Contractor(Local)") selected="selected"#end >Contractor(Local)</option>
<option value="Contractor(Offshore)" #if ($r.getLocation() == "Contractor(Offshore)") selected="selected"#end >Contractor(Offshore)</option>
</select>
</td>
<td>
<input id="${field_uid}-rate-new1"
name="${field_uid}"
type="text"
value="$r.getRate()" /> <!-- $textutils.htmlEncode($r.getRate()) -->
</td>
<td>
<input id="${field_uid}-effort-new1"
name="${field_uid}"
type="text"
value="$r.getEffort()" />
</td>
</tr>
PROBLEM:
In above stuff, existing javascript that points to specific control id '#' + '${field_uid}-resourcetypepicker-new1' means (render ID looks like customfield-id-111-new1). Now, problem is, each clone row will have different unique ID for select/picker list control. and this javascript will points to first row control only as AJS.$('customfield-id-111-new1'). But it should be AJS.$('customfield-id-111-new2') then for next row AJS.$('customfield-id-111-new3') .
so, what is the best way to write below jquery stuff which can points to each cloned control rather then pointing to first row controls only ? any way through tr reference control or any other way.
AJS.$('#' + '${field_uid}-resourcetypepicker-new1').change(function () {
AJS.$('#' + '${field_uid}-resourcetype- new1').val(AJS.$(this).attr('value'));
});
Also, in cloned row, it did not include this javascript , do i need to append after clone ?
Please let me know if any more details need.
NOTE: AJS.$ is equal to $. it is used in velocity template file in JIRA.
Thank You

In light of the updated question, see the following code
AJS.$('[id^="${field_uid}-resourcetypepicker-"]')
This selector can be used to get any item with ID that starts with ${field_uid}-resourcetypepicker so you don't have to worry about the last part of the id i.e. new1, new2 etc.
Secondly, your change event will bind to all those elements that are present on page load. But if you create elements dynamically (clone or whatever), the events won't work. You should use
AJS.$('[id^="${field_uid}-resourcetypepicker-"]').on('change', function () {
...
});
This will work for all the elements on the page that match the selector