I have a sales script and I have been asked to choose one of 4 prices per product within a modal. I have tried in several ways, but I can not understand how to send the 4 prices to a radio input within modal for each line of product to sell you can choose the sale price.
Each line of my sales script is added via javascript:
var addNewRow = function(id){
html = '<tr id="tr_'+i+'">';
html += '<td class="prod_c" width="50%"><input type="text" data-type="nombreProd" name="nombreProd[]" id="nombreProd_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td width="10%"><input type="text" name="cantidad[]" id="cantidad_'+i+'" class="form-control changesNo cq totalCantidad" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '<td width="10%"><input type="text" name="venta[]" id="venta_'+i+'" class="form-control changesNo vventa" data-toggle="modal" data-target="#escoger" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" readonly="readonly"></td>';
html += '<td width="25%"><input type="text" name="total[]" id="total_'+i+'" class="form-control totalLinePrice pisto" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" ></td>';
html += '<td class="trash_td"><i class="fa fa-trash fa-delete" aria-hidden="true" data-id="'+i+'"></i></td>';
html += '</tr>';
if( typeof id !== "undefined"){
$('#tr_'+id).after(html);
}else{
$('table').append(html);
}
$('#caseNo_'+i).focus();
i++;
return (i-1);
};
I leave my javascript where I make the call to a database and this returns me the values of the product that has been selected:
$(document).on('focus','.autocomplete_txt',function(){
type = $(this).data('type');
id_arr = $(this).attr('id');
id = id_arr.split("_");
element_id = id[id.length-1];
autoTypeNo =1;
if(type =='cod' ){
autoTypeNo=0;
$('#add_icon_'+element_id).removeClass('hide');
} else if(type =='nombreProd' ) {
autoTypeNo=1;
}
$(this).autocomplete({
source: function( request, response ) {
$.ajax({
url : 'partes/include/aPos.php',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
type: type
},
beforeSend: function(){
$('#msg').html('<img src="images/ajax-loader.gif"/> <span class="label label-primary">verificando</span>');
},
success: function( data ) {
$('#msgCod').html("");
if(!data.length && readonly != 'readonly'){
$('#product_code_modal').val( $('#itemNo_'+element_id).val() );
$('#product_name_modal').val( $('#itemName_'+element_id).val());
$('#current_element_id').val(element_id);
//$('#add_product_form').find('.form-group').removeClass('animated fadeIn').addClass('animated fadeIn');
//$('#addNewProduct').modal('show');
/*var result = [
{
label: 'No record found',
value: ''
}
];
response(result);*/
}else{
response( $.map( data, function( item ) {
var code = item.split("|");
return {
label: code[autoTypeNo],
value: code[autoTypeNo],
data : item
};
}));
}
}
});
},
autoFocus: true,
selectFirst: true,
minLength: 2,
open: function(e, ui){
var first = $(".ui-menu-item:eq(0) div").html();
//$(this).val(first);
console.log(first);
return false;
},
select: function( event, ui ) {
if( typeof ui.item.data !== "undefined" ){
var names = ui.item.data.split("|");
if( type == 'general'){
var currentTextid = $('#reciboPos tr:last').find("td.prod_c > input").attr('id');
if(typeof currentTextid !== 'undefined') {
var currentTextArr = currentTextid.split("_");
element_id = currentTextArr[currentTextArr.length-1];
var cod = $.trim( $("#"+currentTextid).val() );
element_id = parseInt(element_id);
if (cod !=='') {
element_id = addNewRow();
}
} else {
element_id = addNewRow();
}
}
$('#nombreProd_'+element_id).val(names[1]);
$('#cantidad_'+element_id).val(1);
$('#venta_'+element_id).val(names[2]);
$('#total_'+element_id).val(names[2]);
// Aquí se han agregado los otros tres precios de venta
$('#venta1_'+element_id).val(names[3]);
$('#venta2_'+element_id).val(names[4]);
$('#venta3_'+element_id).val(names[5]);
setTimeout(function(){
$("#autocomplete_top").val("");
},100);
}else{
return false;
}
calculateTotal();
}
});
});
Then I call the modal when I press the sales input
//modal para escoger precio
$('#escoger').on('show.bs.modal', function(e) {
var venta = $('#venta_0'+id[1]).val();
var venta1 = $('#venta_1'+id[1]).val();
var venta2 = $('#venta_2'+id[1]).val();
var venta3 = $('#venta_3'+id[1]).val();
$('input[name="venta"][value="'+venta+'"]').prop('checked',true);
$('input[name="venta"][value="'+venta1+'"]').prop('checked',false);
$('input[name="venta"][value="'+venta2+'"]').prop('checked',false);
$('input[name="venta"][value="'+venta3+'"]').prop('checked',false);
});
But I can not see the values inside the modal:
<div id="escoger" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<label class="radio-inline mr10">
<input type="radio" name="venta" id="venta_0">1
</label>
<label class="radio-inline mr10">
<input type="radio" name="venta" id="venta_1">2
</label>
<label class="radio-inline mr10">
<input type="radio" name="venta" id="venta_2">3
</label>
<label class="radio-inline mr10">
<input type="radio" name="venta" id="venta_3">4
</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>