Hi how I can call a function in a bootbox jquery?
This is an example, at
select name="Status" I would if possible call a function that shows and hides tr of table called in html_form var. How would I do that?
function ChangeStatusDossier(UtenteCreatore) {
var html_form = '<form name="ChangeStatusDossier" id="ChangeStatusDossier" class="ChangeStatusDossier"><table><tr><th colspan="2"><h2 class="blue">Change Dossier Status</h2></th></tr><tr><td><strong>Choose status </strong> </td><td><select name="Status" onchange="Show(this.value);"><option value="0">Under process</option><option value="1">Under collection</option><option value="2">Cargo collected</option><option value="159">In Warehouse</option><option value="1485">To Destination</option></select></td></tr><tr id ="HubChoose" style="display:none;"><td>Choose hub</td><td><select name="Hub"><option>HUB MILANO</option></select></td></tr><input type="hidden" name="UtenteCreatore" value="' + UtenteCreatore + '"></table><form>';
bootbox.confirm(html_form, function (result) {
if (result) {
$('#ChangeStatusDossier').submit();
}
});
function Show(value) {
if (value == "159") {
$("#HubChoose").show();
}
}
}
In your case it's better to use the dialog method instead of confirm.
Here's how you could do that:
function ShowHub(value) {
if (value == "159") {
$("#HubChoose").show();
}
else {
$("#HubChoose").hide();
}
}
jQuery("#default").on("click", function() {
bootbox.dialog({
title: "This is a form in a modal.",
message:
'<form class="ChangeStatusDossier" id="ChangeStatusDossier" name="ChangeStatusDossier">' +
'<input name="UtenteCreatore" type="hidden" value="' + UtenteCreatore + '">' +
'<table>' +
'<tr>' +
'<th colspan="2">' +
'<h2 class="blue">Change Dossier Status</h2>' +
'</th>' +
'</tr>' +
'<tr>' +
'<td><strong>Choose status</strong> </td>' +
'<td><select name="Status" onchange="ShowHub(this.value);">' +
'<option value="0">' +
'Under process' +
'</option>' +
'<option value="1">' +
'Under collection' +
'</option>' +
'<option value="2">' +
'Cargo collected' +
'</option>' +
'<option value="159">' +
'In Warehouse' +
'</option>' +
'<option value="1485">' +
'To Destination' +
'</option>' +
'</select></td>' +
'</tr>' +
'<tr id="HubChoose" style="display:none;">' +
'<td>Choose hub</td>' +
'<td><select name="Hub">' +
'<option>' +
'HUB MILANO' +
'</option>' +
'</select></td>' +
'</tr>' +
'</table>' +
'</form>',
buttons: {
success: {
label: "Submit",
className: "btn-success",
callback: function () {
$('#ChangeStatusDossier').submit();
showResult("Form submitted!");
}
},
cancel: {
label: "Cancel",
className: "btn-danger",
callback: function() {
showResult("Canceled!");
}
}
} // buttons
}); // dialog
});
function showResult(result) {
if (typeof result !== "undefined" && result !== null) {
console.log(result);
}
}
Here's a working DEMO
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 have three tabs. in one i want to load data from database and have a filter by email. when i click the button i want the data of only the user with the email to be displayed in the table in the same tab.
this is my script in view
<script>
jQuery('.savedata').click(function (e) {
e.preventDefault();
jQuery.post('/gettabdata', {
_token: window.csrf_token,
email: jQuery('input[name="email"]').val()
}
function (data) {
var $tableBody = jQuery('#filtered-data tbody');
$tableBody.html('');
jQuery.each(data, function (i) {
$tableBody.append(
'<tr>' +
'<td>' + data[i].User_id + '</td>' +
'<td>' + data[i].email + '</td>' +
'<td>' + data[i].status + '</td>' +
'<td>' + data[i].date + '</td>' +
'<td>' + data[i].time + '</td>' +
'</tr>'
);
});
}
'json');
});
</script>
this is my controller
for the tab in which i want to see the result
else {
$user = \Auth::guard('api')->user();
$post = $request->all();
$email = $request->input('email');
$cond = ' 1=1 ';
if(!empty($post['email'])){
$cond .= " and email like '".$post['email']."'";
}
$qry = 'SELECT User_id, email, status, date, time FROM profile WHERE '.$cond.' ';
$data = DB::select($qry);
$response = $this->analysis($post);
//$getdata=$this->userdata($post);
$data = [
'data'=>$data,
'response'=>$response,
//'getdata'=>$getdata
];
return response()->json($data);
}
try this
Route
Route::get('/get-record-by-email','Controller#getRecord');
//controller
public function getRecord(Request $request)
{
$emailid= Input::get('email_id');
$jsondata= DB::table(your-table)->where('email',$emailid)->get();
return response()->json($jsondata);
}
//Ajax call
$("#btnClick").change(function(e){
//console.log(e);
var email_id = e.target.value;
//alert(email_id);
//$token = $("input[name='_token']").val();
//ajax
$.get('/get-record-by-email?email_id='+email_id, function(data){
$('#filterdata').empty();
//console.log(data);
$.each(data, function(index, obj){
$('#filterdata').append( '<tr>'
'<td>' + obj.User_id + '</td>' +
'<td>' + obj.email + '</td>' +
'<td>' + obj.status + '</td>' +
'<td>' + obj.date + '</td>' +
'<td>' + obj.time + '</td>' +
'</tr>' );
});
})
});
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 making dropdown item selected true dynamically using below lines of code
for(var i in data) {
var book_id = data[i]['book_id'];
var indivudvalbookdetails = data[i]['indivudvalbookdetails'];
var id=1;
for(var j in indivudvalbookdetails) {
if(indivudvalbookdetails[j]['status'] == undefined || indivudvalbookdetails[j]['status'] == "")
{
$('.library_info_tbl tbody').append('<tr>' +
'<td class="text-center centeralign"> ' + data[i]['subject'] + '</td>' +
'<td class="text-center centeralign"> ' + data[i]['title'] + ' </td>' +
'<td class="text-center centeralign"> ' + data[i]['isbn'] + '</td>' +
'<td class="text-center centeralign"> ' + data[i]['author'] + ' </td>' +
'<td class="text-center centeralign"> ' + indivudvalbookdetails[j]['acquisitionno'] + '</td>' +
'<td class="text-center centeralign"><div class="btn-group">' +
'<input type="text" class="hide" id="acquisitionno' + id + '" value="' + indivudvalbookdetails[j]['acquisitionno'] + '" class="form-control">' +
'<select id="status' + id + '" class="form-control">' +
'<option value="Select">Select</option>'+
'<option value="Damaged"' +
indivudvalbookdetails[j]['status'] == "Damaged" ? 'selected="true"': 'selected="false">Damaged</option>'+
'<option value="Lost"' +
indivudvalbookdetails[j]['status'] == "Lost" ? 'selected="true"' : ' selected="false">Lost</option>' +
'</select>'+
//'<input type="text" id="status' + id + '" class="form-control">' +
'</div></td>' +
'</tr>');
id++;
}
}
It is displaying the code in html like:
"selected="false">Lost selected="false">Lost
selected="false">Lost selected="false">Lost selected="false">Lost"
The string termination is not right and the if condition as well.
Check the code below:
var id = 'select';
var indivudvalbookdetails = [{
status: 'Damaged'
}]
var j = 0;
var select = '<select id="status' + id + '" class="form-control">' +
'<option value="Select">Select</option>' +
'<option value="Damaged"' +
(indivudvalbookdetails[j]['status'] == "Damaged" ? 'selected="selected"' : '') + '>Damaged</option>' +
'<option value="Lost"' +
(indivudvalbookdetails[j]['status'] == "Lost" ? 'selected="selected"' : '') + '>Lost</option>' +
'</select>'
document.getElementById('main').innerHTML = select;
<div id="main"></div>
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 (){