How to make autocomplete for form dynamic - javascript

i have trouble using autocomplete with dynamic created input. I can't get autocomplete to bind to the new inputs.
This code autocomplete I used on the first input
$(function() {
$( '#nama-0').autocomplete({
source: "get_barang.php",
minLength: 2,
select: function( event, ui ) {
$('#kode-0').val(ui.item.kode);
$('#harga-0').val(ui.item.harga);
}
});
});
and this new table row with input:
$('#tambah').click(function() {
var i = $('input').size() + 1,
input = '<tr id="box' + i + '">';
input += '<td><input id="nama-' + i + '" name="nama_input[]" autocomplete="off" class="nama form-control" /></td>';
input += '<td><input id="kode-' + i + '" name="kode_input[]" readonly="readonly" class="form-control" /></td>';
input += '<td><input id="harga-' + i + '" name="harga_input[]" type="number" autocomplete="off" class="hitung form-control" /></td>';
input += '<td><input id="jumlah-' + i + '" name="jumlah_input[]" type="number" autocomplete="off" class="hitung form-control" /></td>';
input += '<td><input id="total-' + i + '" name="total_input[]" class="total form-control" readonly="readonly" /></td>';
input += '<td><button id="hapus" class="btn btn-default"><b>Hapus</b></button></td>'
input += '</tr>';
$('#box').append(input);
i++;
return false;
});
i think the problem I guess the problem is in the use of dynamic input id attribute. how to write id of dynamic input, and apply them in autocomplete? any help appreciated.

Your issue is because the #nama-N element doesn't exist in the DOM when you try to initialise the autocomplete function on it.
To fix this, move your first block of code inside the click handler, after append() has been called. Try this:
$('#tambah').click(function(e) {
e.preventDefault();
var i = $('input').size() + 1;
var input = '<tr id="box' + i + '">';
input += '<td><input id="nama-' + i + '" name="nama_input[]" autocomplete="off" class="nama form-control" /></td>';
input += '<td><input id="kode-' + i + '" name="kode_input[]" readonly="readonly" class="form-control" /></td>';
input += '<td><input id="harga-' + i + '" name="harga_input[]" type="number" autocomplete="off" class="hitung form-control" /></td>';
input += '<td><input id="jumlah-' + i + '" name="jumlah_input[]" type="number" autocomplete="off" class="hitung form-control" /></td>';
input += '<td><input id="total-' + i + '" name="total_input[]" class="total form-control" readonly="readonly" /></td>';
input += '<td><button id="hapus" class="btn btn-default"><b>Hapus</b></button></td>'
input += '</tr>';
$('#box').append(input);
// attach autocomplete here as the element now exists in the DOM
$('#nama-' + i).autocomplete({
source: "get_barang.php",
minLength: 2,
select: function(event, ui) {
$('#kode-0').val(ui.item.kode);
$('#harga-0').val(ui.item.harga);
}
});
});

Related

Chrome crashes when printing 2000+ entries on ajax call / Page unresponsive in Chrome

facing an issue when printing more than 2000 entry lines on ajax call. The list of entries may be up to 10000 but when my ajax function calls, all data come but browse shows Page unresponsive when prints.
I have Javascript function to generate invoice lines but when generate and print It shows unresponsive alert.
Here is my javascript code
var contentBody = '';
for (var i = 0; i < data.length; i++) {
var applyToInvoice = (data[i].apply_to_invoice == null)?"":data[i].apply_to_invoice;
var referenceNo = (data[i].reference_no == null)?"":data[i].reference_no;
var referenceNo2 = (data[i].reference_no2 == null)?"":data[i].reference_no2;
var currentBalance = (data[i].invoice_type !='Invoice' && data[i].invoice_type !='Debit Note')? -data[i].current_balance : data[i].current_balance;
var appliedAmount = (data[i].invoice_type !='Invoice' && data[i].invoice_type !='Debit Note')? -data[i].applied_amount : data[i].applied_amount;
var netBalance = (data[i].invoice_type !='Invoice' && data[i].invoice_type !='Debit Note')? -data[i].net_balance : data[i].net_balance;
contentBody = '<tr>' +
'<td><input class="form-check-input form-switch apply-amount" type="checkbox" name="receiptEntryDetailsList[' + i + '].apply" onclick=applyAmount(this) checked></td>' +
'<td class="index-number" id="indexNumber"><input class="receipt-details-id" type="hidden" name="receiptEntryDetailsList[' + i + '].id" value="' + data[i].receipt_entry_details_id + '"></td>' +
'<td><input type="text" class="frm-cntrl invoice-type" name="receiptEntryDetailsList[' + i + '].invoiceType" value="' + data[i].invoice_type + '" readonly="readonly" tabindex="-1"></td>' +
'<td><input type="text" class="frm-cntrl" name="receiptEntryDetailsList[' + i + '].invoiceNo" value="' + data[i].invoice_no + '" readonly="readonly" tabindex="-1"></td>' +
'<td><input type="text" class="frm-cntrl invoice-date" name="receiptEntryDetailsList[' + i + '].invoiceDate" value="' + data[i].invoice_date + '" readonly="readonly" tabindex="-1"></td>' +
'<td><input type="text" class="frm-cntrl" name="receiptEntryDetailsList[' + i + '].referenceNo" value="' + referenceNo + '" readonly="readonly" tabindex="-1"></td>' +
'<td><input type="text" class="frm-cntrl" name="receiptEntryDetailsList[' + i + '].referenceNo2" value="' + referenceNo2 + '" readonly="readonly" tabindex="-1"></td>' +
'<td><input style="text-align:right;" type="text" class="frm-cntrl" name="receiptEntryDetailsList[' + i + '].currentBalance" value="' + currentBalance + '" readonly="readonly" tabindex="-1"></td>' +
'<td><input style="text-align:right;" type="text" class="frm-cntrl applied-amount balance-calculate" name="receiptEntryDetailsList[' + i + '].appliedAmount" value="' + appliedAmount + '" onkeyup="calculation(this)" onClick="this.select();"></td>' +
'<td><input style="text-align:right;" type="text" class="frm-cntrl" name="receiptEntryDetailsList[' + i + '].netBalance" value="' + netBalance + '" readonly="readonly" tabindex="-1"></td>' +
'<td><input type="text" class="frm-cntrl" name="receiptEntryDetailsList[' + i + '].applyToInvoice" value="' + applyToInvoice + '" readonly="readonly" tabindex="-1"></td>' +
'</tr>'
$('#table2 tbody').append(contentBody);
}

Calculate total of all dynamic items upon submit of form including copied items

I am trying to calculate the total of a list of dynamic form option items, example :
product name
product description
quantity
price
total
I have a script that automatically adds item rows :
$(".addmore").on('click',function(){
html = '<tr>';
html += '<td><input class="case" type="checkbox"/></td>';
html += '<td><input type="text" data-type="productCode" name="data[Invoice][itemNo][]" id="itemNo_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td><input type="text" data-type="productName" name="data[Invoice][itemName][]" id="itemName_'+i+'" class="form-control" autocomplete="off"></td>';
html += '<td><input type="text" name="data[Invoice][price][]" id="price_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '<td><input type="text" name="data[Invoice][quantity][]" id="quantity_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '<td><input type="text" name="data[Invoice][total][]" id="total_'+i+'" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '<td><input class="case" type="checkbox" name="data[Invoice][staged][]" id="itemStaged_'+i+'"></td>';
html += '</tr>';
$('table').append(html);
i++;
});
and the script that does the totalling :
$(document).on('change keyup blur','#tax',function(){
calculateTotal();
});
//total price calculation
function calculateTotal(){
subTotal = 0 ; total = 0;
$('.totalLinePrice').each(function(){
if($(this).val() != '' )subTotal += parseFloat( $(this).val() );
});
$('#subTotal').val( subTotal.toFixed(2) );
tax = $('#tax').val();
if(tax != '' && typeof(tax) != "undefined" ){
taxAmount = subTotal * ( parseFloat(tax) /100 );
$('#taxAmount').val(taxAmount.toFixed(2));
total = subTotal + taxAmount;
}else{
$('#taxAmount').val(0);
total = subTotal;
}
$('#totalAftertax').val( total.toFixed(2) );
calculateAmountDue();
}
So what happens now, you tab or press enter to cycle through the fields, and after you update the qty and tab through, it updates the total for that item, as well as the overall total.
The PROBLEM is that if you COPY and PASTE form fields using the following script :
//copies the selected table rows to new ones
$(".copy").on('click', function() {
var origs=$('.case:checkbox:checked');
for(var a=0; a<origs.length; a++) {
addNewRow();
var arr = origs.closest('tr')[a].id.split('_');
var id = arr[arr.length-1];
var dat = getValues(id);
setValues(i-1, dat);
}
$('#check_all').add(origs).prop("checked", false);
// Tried adding calculateTotal(); in this line to no avail...
});
The copied rows are not updated on the overall total. This is driving me insane, does anyone have a solution or tutorial on how to do this?
Requests : (show addNewRow function)
var addNewRow = function(id){
html = '<tr id="tr_'+i+'">';
html += '<input type="hidden" id="stock_'+i+'"/>';
html += '<input type="hidden" id="stockMaintainer_'+i+'" name="data[InvoiceDetail]['+i+'][stockMaintainer]" />';
html += '<input type="hidden" id="previousQuantity_'+i+'"/>';
html += '<input type="hidden" id="invoiceDetailId_'+i+'"/>';
html += '<td><input class="case" id="caseNo_'+i+'" type="checkbox" onkeyup="return tabE(this,event);"/></td>';
html += '<td class="prod_c"><input type="text" data-type="productCode" name="data[InvoiceDetail]['+i+'][product_id]" id="itemNo_'+i+'" class="form-control autocomplete_txt" autocomplete="off" onkeyup="return tabE(this,event);">';
html +='<span class="add_icon" id="add_icon_'+i+'"> <i class="fa fa-plus-circle"></i></span>';
html +='<span class="subtract_icon" id="subtract_icon_'+i+'"><i class="fa fa-minus-circle"></i></span>';
html +='</td>';
html += '<td><input type="text" data-type="productName" name="data[InvoiceDetail]['+i+'][productName]" id="itemName_'+i+'" class="form-control" autocomplete="off" onkeyup="return tabE(this,event);"></td>';
html += '<td><input type="text" name="data[InvoiceDetail]['+i+'][price]" id="price_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" onkeyup="return tabE(this,event);" ondrop="return false;" onpaste="return false;"></td>';
html += '<td><input type="text" name="data[InvoiceDetail]['+i+'][quantity]" id="quantity_'+i+'" class="form-control changesNo quanyityChange" autocomplete="off" onkeypress="return IsNumeric(event);" onkeyup="return tabE(this,event);" ondrop="return false;" onpaste="return false;">';
html += '</td>';
html += '<td><input type="text" id="total_'+i+'" class="form-control totalLinePrice addNewRow" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '<td><input type="checkbox" name="data[InvoiceDetail]['+i+'][staged]" id="staged_1'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td><input type="checkbox" name="data[InvoiceDetail]['+i+'][added]" id="added_1'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td><select name="data[InvoiceDetail]['+i+'][location]" id="location_1'+i+'" class="form-control autocomplete_txt" autocomplete="off">';
html += '<option value="Used">Used</option>';
html += '<option value="RTS">RTS</option>';
html += '<option value="LAJ">LAJ</option>';
html += '</select></td>';
html += '</tr>';
if( typeof id !== "undefined"){
$('#tr_'+id).after(html);
}else{
$('table').append(html);
}
$('#caseNo_'+i).focus();
i++;
}
(getValues) Code :
var getValues=function(id){
var inputs=$('#tr_'+id).find('select,input,textarea').filter('[name]');
var values={};
for(var i=0; i<inputs.length;i++){
var cur=inputs[i];
values[cur.name.match(/\[\w+]$/)||cur.name] = $(cur).is(':checkbox, :radio') ? cur.checked : cur.value;
}
return values;
};
(setValues) :
var setValues=function(id,values){
var inputs=$('#tr_'+id);
for(var i in values){
var cur=inputs.find('[name$="'+i+'"]');
if(cur.is(':checkbox, :radio')) {
cur.prop('checked', values[i]);
} else {
cur.val(values[i]);
}
}
};
The addNewRow function is not setting a name attribute on the total textbox.
However, your getValues and setValues functions are using the [name] attribute selector to get and set values in the cloned rows. Because addNewRow did not set the name attribute, the total value fails to populate in the cloned row, and therefore the total does not change because calculateTotal interprets this value as 0.
Problem code is here:
html += '<td><input type="text" id="total_' + i + '" class="form-control totalLinePrice addNewRow" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
Here is the fixed line of code: (and also remember to call calculateTotal in your copy handler)
html += '<td><input type="text" name="data[InvoiceDetail][' + i + '][total]" id="total_' + i + '" class="form-control totalLinePrice addNewRow" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
See working (but slightly simplified) snippet below: (or see the fiddle)
$(document).on('change keyup blur', '#tax', function() {
calculateTotal();
});
IsNumeric = tabE = function() {
return true
}
var i = 0;
var addNewRow = function(id) {
var html = '<tr id="tr_' + i + '">';
html += '<input type="hidden" id="stock_' + i + '"/>';
html += '<input type="hidden" id="stockMaintainer_' + i + '" name="data[InvoiceDetail][' + i + '][stockMaintainer]" />';
html += '<input type="hidden" id="previousQuantity_' + i + '"/>';
html += '<input type="hidden" id="invoiceDetailId_' + i + '"/>';
html += '<td><input class="case" id="caseNo_' + i + '" type="checkbox" onkeyup="return tabE(this,event);"/></td>';
html += '<td class="prod_c"><input type="text" data-type="productCode" name="data[InvoiceDetail][' + i + '][product_id]" id="itemNo_' + i + '" class="form-control autocomplete_txt" autocomplete="off" onkeyup="return tabE(this,event);">';
html += '<span class="add_icon" id="add_icon_' + i + '"> <i class="fa fa-plus-circle"></i></span>';
html += '<span class="subtract_icon" id="subtract_icon_' + i + '"><i class="fa fa-minus-circle"></i></span>';
html += '</td>';
html += '<td><input type="text" data-type="productName" name="data[InvoiceDetail][' + i + '][productName]" id="itemName_' + i + '" class="form-control" autocomplete="off" onkeyup="return tabE(this,event);"></td>';
html += '<td><input type="text" name="data[InvoiceDetail][' + i + '][price]" id="price_' + i + '" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" onkeyup="return tabE(this,event);" ondrop="return false;" onpaste="return false;"></td>';
html += '<td><input type="text" name="data[InvoiceDetail][' + i + '][quantity]" id="quantity_' + i + '" class="form-control changesNo quanyityChange" autocomplete="off" onkeypress="return IsNumeric(event);" onkeyup="return tabE(this,event);" ondrop="return false;" onpaste="return false;">';
html += '</td>';
html += '<td><input type="text" name="data[InvoiceDetail][' + i + '][total]" id="total_' + i + '" class="form-control totalLinePrice addNewRow" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '<td><input type="checkbox" name="data[InvoiceDetail][' + i + '][staged]" id="staged_1' + i + '" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td><input type="checkbox" name="data[InvoiceDetail][' + i + '][added]" id="added_1' + i + '" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td><select name="data[InvoiceDetail][' + i + '][location]" id="location_1' + i + '" class="form-control autocomplete_txt" autocomplete="off">';
html += '<option value="Used">Used</option>';
html += '<option value="RTS">RTS</option>';
html += '<option value="LAJ">LAJ</option>';
html += '</select></td>';
html += '</tr>';
if (typeof id !== "undefined") {
$('#tr_' + id).after(html);
} else {
$('table').append(html);
}
$('#caseNo_' + i).focus();
i++;
}
$(".addmore").on('click', function() {
html = '<tr>';
html += '<td><input class="case" type="checkbox"/></td>';
html += '<td><input type="text" data-type="productCode" name="data[Invoice][itemNo][]" id="itemNo_' + i + '" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td><input type="text" data-type="productName" name="data[Invoice][itemName][]" id="itemName_' + i + '" class="form-control" autocomplete="off"></td>';
html += '<td><input type="text" name="data[Invoice][price][]" id="price_' + i + '" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '<td><input type="text" name="data[Invoice][quantity][]" id="quantity_' + i + '" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '<td><input type="text" name="data[Invoice][total][]" id="total_' + i + '" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '<td><input class="case" type="checkbox" name="data[Invoice][staged][]" id="itemStaged_' + i + '"></td>';
html += '</tr>';
$('table').append(html);
i++;
});
//copies the selected table rows to new ones
$(".copy").on('click', function() {
var origs = $('.case:checkbox:checked');
for (var a = 0; a < origs.length; a++) {
addNewRow();
var arr = origs.closest('tr')[a].id.split('_');
var id = arr[arr.length - 1];
var dat = getValues(id);
setValues(i - 1, dat);
}
$('#check_all').add(origs).prop("checked", false);
calculateTotal();
});
//total price calculation
function calculateTotal() {
subTotal = 0;
total = 0;
$('.totalLinePrice').each(function() {
if ($(this).val() != '') subTotal += parseFloat($(this).val());
});
$('#subTotal').val(subTotal.toFixed(2));
tax = $('#tax').val();
if (tax != '' && typeof(tax) != "undefined") {
taxAmount = subTotal * (parseFloat(tax) / 100);
$('#taxAmount').val(taxAmount.toFixed(2));
total = subTotal + taxAmount;
} else {
$('#taxAmount').val(0);
total = subTotal;
}
$('#totalAftertax').val(total.toFixed(2));
//calculateAmountDue();
}
var getValues = function(id) {
var inputs = $('#tr_' + id).find('select,input,textarea').filter('[name]');
var values = {};
for (var i = 0; i < inputs.length; i++) {
var cur = inputs[i];
values[cur.name.match(/\[\w+]$/) || cur.name] = $(cur).is(':checkbox, :radio') ? cur.checked : cur.value;
}
return values;
};
var setValues = function(id, values) {
var inputs = $('#tr_' + id);
for (var i in values) {
var cur = inputs.find('[name$="' + i + '"]');
if (cur.is(':checkbox, :radio')) {
cur.prop('checked', values[i]);
} else {
cur.val(values[i]);
}
}
};
addNewRow()
addNewRow()
input {
width: 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
Tax rate
<input type="text" id="tax" value="8.7">
</div>
<div>
Tax amt
<input type="text" id="taxAmount" value="0">
</div>
<div>
Total
<input type="text" id="totalAftertax" value="0">
</div>
COPY CHECKED ROWS (check some rows first)
<table>
<thead>
<tr>
<th>copy</th>
<th>product code</th>
<th>product name</th>
<th>price</th>
<th>qty</th>
<th>total</th>
<th>staged</th>
<th>added</th>
<th>location</th>
</tr>
</thead>
</table>
Here you are calling calculateTotal(); function on change keyup and blur
events.this works as long as you interact with form elements.
but when you copy the row.you wont be interacting with textboxes.so those change,blur and keyup events wont get fired and as a result calculateTotal()
will not be executed.as a result you cant see any update on total value.
to overcome this you have to call calculateTotal() in copy function.

jquery and input selects

JS Fiddle of nonworking code :
https://jsfiddle.net/8fo28ccL/
With the code below, I have items that are dynamically added to my html body whenever a user clicks a button to add a line. The top line works just fine(its a checkbox), but I cannot get the select input lines to work....
var addNewRow = function(id){
html = '<tr id="tr_'+i+'">';
html += '<td><input class="case" id="caseNo_'+i+'" type="checkbox"/></td>';
html += '<td class="prod_c"><input type="text" data-type="productCode" name="data[InvoiceDetail]['+i+'][product_id]" id="itemNo_'+i+'" class="form-control autocomplete_txt" autocomplete="off">';
html +='<span class="add_icon hide" id="add_icon_'+i+'"> <i class="fa fa-plus-circle"></i></span>';
html +='</td>';
html += '<td><input type="text" data-type="productName" name="data[InvoiceDetail]['+i+'][productName]" id="itemName_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td><input type="text" name="data[InvoiceDetail]['+i+'][price]" id="price_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '<td><input type="text" name="data[InvoiceDetail]['+i+'][quantity]" id="quantity_'+i+'" class="form-control changesNo quanyityChange" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">';
html += '<input type="hidden" id="stock_'+i+'"/>';
html += '<input type="hidden" id="stockMaintainer_'+i+'" name="data[InvoiceDetail]['+i+'][stockMaintainer]" />';
html += '<input type="hidden" id="previousQuantity_'+i+'"/>';
html += '<input type="hidden" id="invoiceDetailId_'+i+'"/>';
html += '</td>';
html += '<td><input type="text" id="total_'+i+'" class="form-control totalLinePrice addNewRow" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '<td><input type="checkbox" name="data[InvoiceDetail][0][staged]" id="staged_1'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td><select value="" name="data[InvoiceDetail][0][location]" id="location_1'+i+'" class="form-control autocomplete_txt" autocomplete="off">';
html += '<option value="Used">Used</option>';
html += '<option value="RTS">RTS</option>';
html += '<option value="LAJ">LAJ</option>';
html += '</select></td>';
html += '</tr>';
if( typeof id !== "undefined"){
$('#tr_'+id).after(html);
}else{
$('table').append(html);
}
Edit : Sorry, added an old revision of code, updated with the proper TD elements. The select box will appear on the page, but if you try to select values, nothing saves...
Edit 2 : Guys/Gals, the issue is not whether the html appears in my body(it does via the append function, the issue is AFTER it is added. After the text is added, a checkbox appears, and a form select field. If you select a different option in the form select, and save the form, that option is NOT saved.
Try adding var before html , adjusting += to = at first html variable reference
var i = 0;
var html = '<td><input type="checkbox" name="data[InvoiceDetail][0][staged]" id="staged_1'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td><select value="" name="data[InvoiceDetail][0][location]" id="location_1'+i+'" class="form-control autocomplete_txt" autocomplete="off">';
html += '<option value="Used">Used</option>';
html += '<option value="RTS">RTS</option>';
html += '<option value="LAJ">LAJ</option>';
html += '</select></td>';
document.body.innerHTML = html
From those stuff you provided i can suggest only this things. You should try once.
var html = "";
html += "<td><input type='checkbox' name='data[InvoiceDetail][0][staged]' id='staged_1'" + i + " class='form-control autocomplete_txt' autocomplete='off'></td>";
html += "<td><select value='' name='data[InvoiceDetail][0][location]' id='location_1'" + i + "'class='form-control autocomplete_txt' autocomplete='off'>";
html += "<option value='Used'>Used</option>";
html += "<option value='RTS'>RTS</option>";
html += "<option value='LAJ'>LAJ</option>";
html += "</select></td>";
$(html).appendTo(WhereYouwanttoappend);
Hope it may work for you.
your html wasn't initialised (probably)
var html = ''
check out this running code: http://codepen.io/anon/pen/zvOaqj
Remove the "value" attribute from your select element.

Symfony Redirect for some action

I use this dashboard and when I pushed button "Add New" create dynamics button save, I find this button in js file this dasboard:
function editRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
jqTds[0].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[0] + '">';
jqTds[1].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[1] + '">';
jqTds[2].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[2] + '">';
jqTds[3].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[3] + '">';
jqTds[4].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[4] + '">';
jqTds[5].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[5] + '">';
jqTds[6].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[6] + '">';
jqTds[7].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[7] + '">';
jqTds[8].innerHTML = '<a class="edit" href="??????????">Save</a>';
jqTds[9].innerHTML = '<a class="cancel" href="?????????">Cancel</a>';
}
and my question
I have routing for add new developer how I put my routing this "href=" or maybe redirect for my creatAction ????
If you want use that way,
put hidden input and then get value via jQuery
HTML
<input type="hidden" id="form-url" val="{{ path('my_route') }}">
in edit row fundtion
jqTds[9].innerHTML = '<a class="cancel" href="'+$('#form-url').val();+'">Cancel</a>';

Can't create multiple datepicker using jquery

I have a problem. I have a dynamic form that can generate a rows of textfields and these textfields are should be datepicker. These textfields have same classes but only the first one has a datepicker. The rest can't generate a datepicker. But when I checked their classes they have the class of datepicker.
Here's my simple code:
function addNewRowCheck() {
check_html = '<tbody id="check-row' + check_row + '">';
check_html += '<tr style="background-color: #FDCACB">';
check_html += '<td class="txt-center"><input type="hidden" name="check[' + check_row + '][order_no]" value="' + check_row + '" /></td>';
check_html += '<td>';
check_html += '<select>';
check_html += $select_account_type;
check_html += '</select>';
check_html +- '</td>';
check_html += '<td><input type="text" class="txt-center chkdate" name="check[' + check_row + '][curr]" /></td>';
check_html += '<td><input type="text" class="txt-right" name="check[' + check_row + '][rate]" /></td>';
check_html += '<td><input type="text" class="txt-right" name="check[' + check_row + '][amount]" /></td>';
check_html += '<td><input type="text" class="txt-right" name="check[' + check_row + '][check_number]" /></td>';
check_html += '<td><input type="text" class="txt-right chkdate" name="check[' + check_row + '][check_date]" /></td>';
check_html += '<td><input type="text" class="txt-right" name="check[' + check_row + '][bank_name]" /></td>';
check_html += '<td class="center"><img id="remove_btn" src="<?php echo $button_remove; ?>" onclick="$(\'#check-row' + check_row + '\').remove()" style="display: inline;" /></td>';
check_html += '<tr>';
check_html += '</tbody>';
$('#check-content tfoot').before(check_html);
check_row++;
}
....
$('.chkdate').each(function() {
$(this).datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true
});
});
* you start jquery click function*
$("input[type=text]").click(function() {
$(this).datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true
});
});

Categories