I have a datatable and populating with Ajax response. I have a submit button at top and i want to handle click event for submit,
I have input text boxes in each row and The below code is working only for first 10 rows, if is click next button in data table the submit ($('#createOrderId').click) event is not working. I tried creating on change event in fndrawcallback, but that is also not working.
Can anyone help me on this.
function showCheckoutResults(obj) {
oTable = $('#checkoutTable').DataTable({
bDestroy : true,
"autoWidth": false,
columnDefs : [ {
width: "2%",
targets : 0,
className : 'dt-body-center select-checkbox',
'checkboxes': {
//'selectRow': true
}
},
{
"targets": [ 10 ],
"visible": false
}
],
select : {
style : 'multi',
selector: 'td:first-child'
},
order : [ [ 1, 'asc' ] ],
"fnDrawCallback": function() {
loadDatePicker();
$('.commonOrderQty').on('change', function () {
var dataArr = [];
var rows_selected = oTable.column(0).checkboxes.selected();
if (typeof rows_selected != 'undefined') {
$.each(rows_selected, function(index, rowId){
dataArr.push(rowId);
});
}
for(var i=0;i<dataArr.length;i++) {
$( "#ordQty" + dataArr[i] ).change(function() {
alert($("#ordQty" + dataArr[i]).val);
validateOrderQty( dataArr[i]);
});
}
});
}
});
oTable.rows().remove().draw();
$.each(obj, function(index, key) {
var ordrSrchResultData = [];
var finalLeadTime = calculateLeadTime(key.fopLeadTime);
var unitPrice = key.quote;
if(key.um == 'CPC') {
unitPrice = key.quote/100;
}
ordrSrchResultData.push(index);
ordrSrchResultData.push('<input id="po' + index
+ '" type="text" maxlength="12" class="checkoutText" value="' + key.poNo + '"/>');
ordrSrchResultData.push('<input id="ordQty' + index
+ '" type="text" class="checkoutText commonOrderQty" value="' + key.orderQty + '"/>');
ordrSrchResultData.push('<input id="boxQty' + index
+ '" type="text" class="checkoutText" value="' + key.boxQty + '"disabled/>');
ordrSrchResultData.push('<input type="text" class="checkoutText" id="datePicker' + index
+ '" value="' + key.dueDate + '" readonly="readonly"/>');
ordrSrchResultData.push('<input type="text" class="checkoutText" id="datePicker' + index
+ '" value="' + finalLeadTime + '" readonly="readonly"/>');
ordrSrchResultData.push('<input id="partNo' + index
+ '" type="text" class="checkoutText" value="' + key.partNo + '"disabled/>');
ordrSrchResultData.push('<input type="text" class="checkoutText" id="suppPartNo' + index
+ '" value="' + key.suppPartNo + '" readonly="readonly"/>');
ordrSrchResultData.push('<input type="text" class="checkoutText" id="extPrice' + index
+ '" value="' + key.extPrice + '" readonly="readonly"/>');
ordrSrchResultData.push('<input type="text" class="checkoutText" id="customerCd' + index
+ '" value="' + key.customerCd + '" readonly="readonly"/>');
ordrSrchResultData.push('<input type="text" class="checkoutText" id="quote' + index
+ '" value="' + unitPrice + '" readonly="readonly"/>');
ordrSrchResultData.push('<input type="hidden" value="'+key.dueDate+'" id="existDatePicker'+index+'"');
oTable.columns.adjust().draw();
oTable.row.add(ordrSrchResultData).draw();
localStorage.setItem('_selectedStartDate', finalLeadTime);
updateDatepicker(index, finalLeadTime);
$('#checkoutTable tr:last').attr('id', 't' + index);
$("#" + 't' + index).removeClass('selected');
$( "#ordQty" + index ).change(function() {
validateOrderQty(index);
});
});}
$('#createOrderId').click(function (){
var dataArr = [];
var rows_selected = oTable.column(0).checkboxes.selected();
$.each(rows_selected, function(index, rowId){
dataArr.push(rowId);
});
var rowsCount = dataArr.length;
var errMsg = $("#noSelectedDataErrMsg").val();
if(rowsCount == 0) {
jQuery("label[for='ordlabelvalue']").html(errMsg);
$('#orderErrorModal').modal('show');
return;
}
createOrder(dataArr);
});
Instead of:
$('#createOrderId').click(function (){
Use this:
$(document).on('click','#createOrderId',function (){
Related
I just created ajax response but i dont know how to give input fields here.. im new bie to Ajax, can you suggest any way please..
$.ajax({
type: "GET",
url: 'get/' + vouchno,
// cache: false,
success: function(data) {
alert(data);
alert(JSON.stringify(data));
$('#vochDate').val(data.strvouchdt);
$('#cashbill').val(data.billtype);
$('#cashref').val(data.refno);
$('#cashAc').val(data.acctname);
$('#refdate').val(data.refdt);
$('#payacc_code').val(data.acctcode);
$('#cashAc').val(data.acctname);
$('#cashAc').val(data.acctname);
for (var i = 0; i < data.cashpayments.length; i++) {
$("#tab_logic ").append('<tr><td>' + '<input type="text">' + data.cashpayments[i].acctcode + '</td>' +
'<td>' + '<input type="text">' + data.cashpayments[i].debit + '</td>' +
'<td>' + '<input type="text">' + data.cashpayments[i].acctcode + '</td>' +
'<td>' + '<input type="text">' + data.cashpayments[i].acctcode + '</td>' +
'<td>' + '<input type="text">' + data.cashpayments[i].acctcode + '</td>' + '</tr>');
}
},
failure: function(data) {
alert(data.responseText);
},
error: function(data) {
alert(data.responseText);
}
});
Completely a guess, you want text-fields in row columns with values prefilled in it:
$("#tab_logic").append(`<tr><td><input type="text" value="${data.cashpayments[i].acctcode}"></td>
<td><input type="text" value="${data.cashpayments[i].debit}"></td>
<td><input type="text" value="${data.cashpayments[i].acctcode}"></td>
<td><input type="text" value="${data.cashpayments[i].acctcode}"></td>
<td><input type="text" value="${data.cashpayments[i].acctcode}"></td></tr>`);
If you are talking about binding the data into input form from the response:
function populate(data) {
for (var i in data) {
if (typeof (data[i]) === 'object') {
//populate(data[i]);
} else {
$(
"input[type='text'][name='" + i + "']," +
" input[type='hidden'][name='" + i + "'], " +
"input[type='checkbox'][name='" + i + "'], " +
"select[name='" + i + "'], textarea[name='" + i + "']"
)
.val(data[i]);
$("input[type='radio'][name='" + i + "'][value='" + data[i] + "']").prop('checked', true);
if ($("input[name='" + i + "']").hasClass('datepicker')) {
$("input[name='" + i + "']").val($.datepicker.formatDate("dd-M-yy", new Date(data[i])));
}
if ($("input[name='" + i + "']").hasClass('financialValueFormat')) {
var formatedAmount = financialValFormat(data[i]);
$("input[name='" + i + "']").val(formatedAmount);
}
}
}
$('form').find('input[type="checkbox"]').each(
function () {
if ($(this).siblings('input[type="hidden"]').val() == "true" ||
$(this).siblings('input[type="hidden"]').val() == 1) {
$(this).prop('checked', true);
} else {
$(this).prop('checked', false);
}
}
);
}
You can define this function some where in your project which is available globally and then just call populate(response.data)
Please ignore the functions financialValFormat. This function is just used to format the value for money fields.
I am just learning jquery and javascript and i have a function that unwraps [select] elements on my page and displays them as buttons. There could be multiple select boxes on my page so I need to dynanically name the following variables based on the elementname that is passed in, so that when the buttons are clicked it passed the correct values:
selector1
currentvalue1
hidden1
svalue1
This is the function:
function doUnwrap(elementname) {
var selector1 = document.getElementById('' + elementname + '');
var currentvalue1 = selector1[selector1.selectedIndex].text;
var hidden1 = $('<input type="hidden" name="' + elementname + '">');
hidden1.val($('[name=' + elementname + ']').val());
hidden1.insertAfter($('[name=' + elementname + ']'));
$("[name=" + elementname + "] option").unwrap().each(function () {
var btn = $('<div class="btn" id="' + $(this).attr('value') + '">' + $(this).text() + '</div>');
if ($(this).text() == currentvalue[i]) {
var btn = $('<div class="btn" id="' + $(this).attr('value') + '" >' + $(this).text() + '</div>');
if ($(this).is(':checked')) btn.addClass('on');
$(this).replaceWith(btn);
} else {
var btn = $('<div class="btn" id="' + $(this).attr('value') + '" >' + $(this).text() + '</div>');
$(this).replaceWith(btn);
};
});
$(document).on('click', '.btn', function () {
$('.btn').removeClass('on');
$(this).addClass('on');
$('input[name=' + elementname + ']').val($(this).text());
var sValue1 = "&value=" + elementname + "|" + $(this).attr('id') + "";
executeAjaxEvent(sValue1, null, "ComboBoxAjaxHandler", false, null, true);
});
}
I have a dropdown list which is getting Accountoff data from database through ajax. Now I am selecting data from modal and giving the val to the dropdown list and triggering it change method manually. But its not working.
This is the code where I am giving the selected data from modal to dropdown list.
AccountOf = function (value) {
var lblBrandCode = $(value).closest('tr').find("#hdnCusCode").val();
var lblCusDesc = $(value).closest('tr').find('#lblCusDesc').val();
$("#AccountOfModal").modal("hide");
$("#ddlACof").val(lblBrandCode);
//document.getElementById("ddlACof").value = lblBrandCode;
$("#ddlACof").change();
}
here is the the code that invoke the above method.
$.ajax({
dataType: "json",
async: true,
type: 'GET',
url: '#Url.Content("~/BookingOrder/Select_CustomerDetailModal")',
success: function (data) {
if (data.Success == true) {
var item = JSON.parse(data.Response)
$("#AccountOfTable tbody tr").remove()
if (item.length > 0) {
$.each(item, function (value, item) {
var temp = '<tr id="DelChkListRow1' + (rowCount++) + '" data-tr-count="' + (dataCount++) + '" onclick="AccountOf(this)">' +
'<td>' + SNo++ + '</td>' +
'<td class="tdDiv" style="overflow:auto"><label id="lblCusCode" >' + item.CusCode + '</label><input type="hidden" id="hdnCusCode" value="' + item.CusCode + '"/></td>' +
'<td class="tdDiv" style="overflow:auto"><label id="lblCusDesc">' + item.CusDesc + '</label></td>' +
'<td class="tdDiv" style="overflow:auto"><label id="lblNIC">' + item.NIC + '</label></td>' +
'<td class="tdDiv" style="overflow:auto"><label id="lblAddress">' + item.Address1 + '</label></td>' +
'<td class="tdDiv" style="overflow:auto"><label id="lblPhone">' + item.Phone1 + '</label></td>' +
'</tr>';
$("#AccountOfTable tbody").append(temp);
});
}
}
},
complete: function () {
},
});
$( "#ddlACof" ).trigger( "change" );
I am creating a directive, which is used to add and remove elements dynamically. But my ng-click fires multiple times while adding and removing elements. Please give suggestions.
Here enable values means to select when 1=>textbox; 2=>selectbutton;3=>Radio button; 4=>CheckBox;5=>+/-
HTML:
<body ng-app = "mainApp" ng-controller = "loginController">
<div id="sampleeid">
<incrementrowsdirective idvalue="sto"
arrayvalues='[]'
labelvalues='["Concepto","Monto","Add/Remove"]'
enablevalues='[2,1,5]'></incrementrowsdirective>
<button ng-click="SampleButton()">Sample
Button</button>
</div>
CODE:
gasapp.directive("incrementrowsdirective", function ($compile) {
var trheaderelements;
var tablenm;
var tablenm1;
var trelements;
var trfirstelement;
var firstelement;
return {
restrict: 'AE',
scope: {
idvalue: '#'
},
template: function (elem, attr) {
return '<div class="col-md-8 col-sm-11 col-xs-11"><table id="tableheaderid"></table> <table id="tableid' + attr.idvalue + '" class="table table-condensed table-striped table-bordered table-hover no-margin">' +
'</table></div>'
},
link: function (scope, iElement, iAttrs) {
scope.labelval = JSON.parse(iAttrs.labelvalues);
scope.enableval = JSON.parse(iAttrs.enablevalues);
scope.arrt = JSON.parse(iAttrs.arrayvalues);
scope.c = 0;
scope.count = 1;
trheaderelements = '<thead><tr id="mytrheader' + scope.idvalue + '" >';
angular.forEach(scope.labelval, function (value, key) {
trheaderelements = trheaderelements + '<th style="width: 20%;"> ' + value + ' </th>';
});
trheaderelements = trheaderelements + "</tr></thead>";
tablenm = angular.element(document.getElementById('tableid' + scope.idvalue)).append(trheaderelements);
$compile(tablenm)(scope);
trfirstelement = "<tr id='mytrfirstelement'>";
angular.forEach(scope.enableval, function (value, key) {
if (value == 1) {
trfirstelement = trfirstelement + '<td><input type="text" name="text1name' + scope.idvalue + value + key + '" ng-model="text1value' + scope.idvalue + value + key + '" id="text1valueeid' + scope.idvalue + value + key + '" > </td>';
}
if (value == 2) {
trfirstelement = trfirstelement + '<td><select id="selectid1value' + scope.idvalue + value + key + '" name="selectname1val' + scope.idvalue + value + key + '" ng-model="selectmodel1val' + scope.idvalue + value + key + '" style="width:185px;"><option>..select..</option><option>Brother</option><option>Sister</option><option>Wife/Husband</option></select></td>';
}
if (value == 3) {
trfirstelement = trfirstelement + '<td><input type="radio" id="radio1idvalue' + scope.idvalue + value + key + '" name="radio1nameval' + scope.idvalue + value + key + '" ng-model="radio1modelval' + scope.idvalue + value + key + '" > </td>';
}
if (value == 4) {
trfirstelement = trfirstelement + '<td><input type="checkbox" id="checkbox1idval' + scope.idvalue + value + key + '" name="checkbox1nameval' + scope.idvalue + value + key + '" ng-model="checkbox1modelval' + scope.idvalue + value + key + '"> </td>';
}
if (value == 5) {
trfirstelement = trfirstelement + '<td> <input type="button" value="+" id="addbtn' + scope.idvalue + value + key + '" ng-click="addRow1(' + scope.c + ')">' +
' </td>';
}
});
trfirstelement = trfirstelement + "</tr>";
firstelement = angular.element(document.getElementById('tableid' + scope.idvalue)).append(trfirstelement);
$compile(firstelement)(scope);
trfirstelement = '';
scope.addRow1 = function (a) {
scope.c++;
scope.count++;
trelements = '<tr id=mytr' + scope.idvalue + scope.c + '>';
angular.forEach(scope.enableval, function (value, key) {
scope.keyvalue = key;
if (value == 1) {
trelements = trelements + '<td><input type="text" name="text1name' + scope.idvalue + scope.c + value + key + '" ng-model="text1value' + scope.idvalue + scope.c + value + key + '" id="text1valueeid' + scope.idvalue + scope.c + value + key + '" > </td>';
}
if (value == 2) {
trelements = trelements + '<td><select id="selectid' + scope.idvalue + scope.c + value + key + '" name="selectname' + scope.idvalue + scope.c + value + key + '" ng-model="selectmodel' + scope.idvalue + scope.c + value + key + '" style="width:100%;"><option>..select..</option><option>Brother</option><option>Sister</option><option>Wife/Husband</option></select></td>';
}
if (value == 3) {
trelements = trelements + '<td><input type="radio" id="radioid' + scope.idvalue + scope.c + value + key + '" ></input> </td>';
}
if (value == 4) {
trelements = trelements + '<td><input type="checkbox" id="checkboxid' + scope.idvalue + scope.c + value + key + '" name="aaa" ></input> </td>';
}
if (value == 5) {
trelements = trelements + '<td> <input type="button" value="+" id="addbtn' + scope.idvalue + scope.c + value + key + '" ng-click="addRow1(' + scope.c + ')">' + ' <input type="button" value="-" ng-click="removerowbutton1(' + scope.c + ')" > </td>';
}
});
trelements = trelements + "</tr>";
tablenm1 = angular.element(document.getElementById('tableid' + scope.idvalue)).append(trelements);
$compile(tablenm1)(scope);
trelements = '';
}
scope.removerowbutton1 = function (index) {
//scope.c--;
alert("Removed")
var myEl = angular.element(document.querySelector('#mytr' + scope.idvalue + index));
myEl.remove();
}
}
};
});
Need to remove the lines,
$compile( firstelement )( scope );
$compile( tablenm1 )( scope );
and replace the line with
firstelement = angular.element(document.getElementById('tableid'+scope.idvalue)).append($compile(trfirstelement)(scope));
It´s is not very clear to me why I am not get any data appended when I have a lot of data to be appended.
When I have 3 objects It works fine, for a larger number it does not append data.
I believe that append is been called before the for loop is finished. Could be that?
building the <tr>'s:
for (var i = 0; i < obj.length; i++) {
if (obj[i].indiceId === 4 && dinamicDom !== 'dinamic_index_busca_edit') {
var dateChkBox = '<p class="pDtPeriodoChk"><input type="checkbox" name="dtPeriodoChk" class="dtPeriodoChk" id="' + i + '_chk">Por Período</p>';
trs = trs + '<tr class="' + dinamicDom + '" style="padding-top:10px;"><td class="smallMediumField ' + i + '" style="padding-top:10px;"><fieldset class="dataFieldset"><legend>' + obj[i].indiceName + '</legend>' + dateChkBox + '<span id="' + i + '_lblDtInicio" class="lblDataInicio" style="display:none"><br />Data Inicio:</span><table><tr><td><img src="/Images/equal.png" alt="Igual a"/></td><td><input type="text" id="' + i + '" name="data" class="selectInput limpar" ';
if (obj[i].valor !== null && obj[i].valor !== '') {
trs = trs + ' value="' + obj[i].valor + '" ';
}
trs = trs + '></td></tr></table><input type="hidden" id="' + obj[i].indiciId + '" name="data_indices" value="' + obj[i].indiciId + '" class="selectInput"></fieldset></td></tr>';
} else {
trs = trs + '<tr class="' + dinamicDom + '"><td class="smallMediumField ' + i + '" style="padding-top:10px;">' + obj[i].indiceName + '<br /><input type="text" id="' + i + '" name="groupBusca" class="selectInput limpar" ';
if (obj[i].valor !== null && obj[i].valor !== '') {
trs = trs + ' value="' + obj[i].valor + '" ';
}
trs = trs + '></td></tr></table><input type="hidden" id="' + obj[i].indiciId + '" name="indicesBusca" value="' + obj[i].indiciId + '" class="selectInput"></td></tr>';
}
}
appending:
$('#tblBusca').append(trs);
Try appending row by row
for (var i = 0; i < obj.length; i++) {
var trs;
if (obj[i].indiceId === 4 && dinamicDom !== 'dinamic_index_busca_edit') {
var dateChkBox = '<p class="pDtPeriodoChk"><input type="checkbox" name="dtPeriodoChk" class="dtPeriodoChk" id="' + i + '_chk">Por Período</p>';
trs = trs + '<tr class="' + dinamicDom + '" style="padding-top:10px;"><td class="smallMediumField ' + i + '" style="padding-top:10px;"><fieldset class="dataFieldset"><legend>' + obj[i].indiceName + '</legend>' + dateChkBox + '<span id="' + i + '_lblDtInicio" class="lblDataInicio" style="display:none"><br />Data Inicio:</span><table><tr><td><img src="/Images/equal.png" alt="Igual a"/></td><td><input type="text" id="' + i + '" name="data" class="selectInput limpar" ';
if (obj[i].valor !== null && obj[i].valor !== '') {
trs = trs + ' value="' + obj[i].valor + '" ';
}
trs = trs + '></td></tr></table><input type="hidden" id="' + obj[i].indiciId + '" name="data_indices" value="' + obj[i].indiciId + '" class="selectInput"></fieldset></td></tr>';
} else {
trs = trs + '<tr class="' + dinamicDom + '"><td class="smallMediumField ' + i + '" style="padding-top:10px;">' + obj[i].indiceName + '<br /><input type="text" id="' + i + '" name="groupBusca" class="selectInput limpar" ';
if (obj[i].valor !== null && obj[i].valor !== '') {
trs = trs + ' value="' + obj[i].valor + '" ';
}
trs = trs + '></td></tr></table><input type="hidden" id="' + obj[i].indiciId + '" name="indicesBusca" value="' + obj[i].indiciId + '" class="selectInput"></td></tr>';
}
$('#tblBusca').append(trs);
}