this code works but you need to select or click the data first before displaying the data. What i want to do is to use mouse hover and data will display because there are similar data upon entering and displaying the data so i think i should use mouse hover so you can see the difference of the data. Your help is much appreciated
enter image description here
<tr class='tr_input'>
<td><textarea rows="3" type='text' name='sear[]' class='form-control sear' id='sear_1'></textarea></td>
<td><textarea rows="3" type='text' name='fee[]' class='form-control fee' id='fee_1' ></textarea></td>
<td><textarea rows="3" type='text' name='description[]' class='form-control description' id='description_1' ></textarea></td>
<td><textarea rows="3" type='text' name='office[]' class='form-control office' id='office_1' ></textarea></td>
<td><input rows="3" type='text' name='amount[]' class='form-control amount payment' id='amount_1' ></td>
<td><input rows="3" type="text" id='fpay0' name='quantity[]' class="form-control qty payment" autocomplete="off"/></td>
<td><input type="text" class="form-control numeric_value0 subtotals" name="subtotal[]" id='subtotal_1' autocomplete="off"/></td>
</tr>
<script type="text/javascript">
$(document).ready(function(){
$(document).on('keydown', '.sear', function() {
var id = this.id;
var splitid = id.split('_');
var index = splitid[1];
$( '#'+id ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "getDetails.php",
type: 'post',
dataType: "json",
data: {
search: request.term,request:1
},
success: function( data ) {
response( data );
}
});
},
select: function (event, ui) {
$(this).val(ui.item.label); // display the selected text
var userid = ui.item.value; // selected id to input
// AJAX
$.ajax({
url: 'getDetails.php',
type: 'post',
data: {userid:userid,request:2},
dataType: 'json',
success:function(response){
var len = response.length;
if(len > 0){
var id = response[0]['id'];
var fee = response[0]['fee'];
var description = response[0]['description'];
var office = response[0]['office'];
var amount = response[0]['amount'];
var qty = response[0]['qty'];
var subtotal = response[0]['subtotal'];
document.getElementById('fee_'+index).value = fee;
document.getElementById('description_'+index).value = description;
document.getElementById('office_'+index).value = office;
document.getElementById('amount_'+index).value = amount;
}
}
});
return false;
}
});
});
// Add more
var index = 2;
$('#addmore').click(function(){
// Get last id
var lastarp_id = $('.tr_input input[type=text]:nth-child(1)').last().attr('id');
var split_id = lastarp_id.split('_');
// New index
var index = Number(split_id[1]) + 1;
// Create row with input elements
var html = "<tr class='tr_input'><td><textarea rows='3' type='text' name='sear[]' class='form-control sear' id='sear_"+index+"'></textarea></td><td><textarea rows='3' type='text' name='fee[]' class='form-control fee' id='fee_"+index+"' ></textarea></td><td><textarea rows='3' type='text' name='description[]' class='form-control description' id='description_"+index+"' ></textarea></td><td><textarea rows='3' type='text' class='form-control office' id='office_"+index+"' ></textarea></td><td><input rows='3' type='text' name='amount[]' class='form-control input-md amount paym' id='amount_"+index+"' ></td><td><input type='text' name='quantity[]' class='form-control qty paym' id='quantity_"+index+"' ></td><td><input type='text' class='form-control subtotals numeric_value' name='subtotal[]' id='subtotal_"+index+"' ></td></tr>";
// Append data
$('tbody').append(html);
$('.paym').keyup(function() {
var ids = $(this).attr("id").split("_");
// alert(ids[1]);
var sum = 0;
var f = $('#amount_'+ids[1]).val();
var p = $('#quantity_'+ids[1]).val();
sum = Number(f) * Number(p);
$('#subtotal_'+ids[1]).val(sum.toFixed(2));
var sums = 0;
$('.subtotals').each(function() {
sums += Number($(this).val());
});
sums = sums;
$('#total').val(sums.toFixed(2));
$('#tes').val(combines($('#total').val()));
});
index=index+1;;
});
$( "#delete" ).click(function() {
var rowCount = $('#tab_logic tr').length;
var del = rowCount - 2;
var ind = del-1;
if(del==2){
}else{
$("#tab_logic tr:eq("+ind+")").remove();
del=del-1;
var sums = 0;
$('.subtotals').each(function() {
sums += Number($(this).val());
});
sums = sums;
$('#total').val(sums.toFixed(2));
$('#tes').val(combines($('#total').val()));
}
});
//end
//start
$('.numeric_value').keyup(function() {
var sum = 0;
$('.numeric_value').each(function() {
sum += Number($(this).val());
});
sums = sums;
$('#total').val(sum.toFixed(2));
$('#tes').val(combines($('#total').val()));
});
$('.payment').keyup(function() {
var sum = 0;
var f = $('#fpay0').val();
var p = $('#amount_1').val();
sum = Number(f) * Number(p);
$('.numeric_value0').val(sum.toFixed(2));
var sums = 0;
$('.subtotals').each(function() {
sums += Number($(this).val());
});
sums = sums;
$('#total').val(sums.toFixed(2));
$('#tes').val(combines($('#total').val()));
});
//endold
})
</script>
I can't comment(need 50 reputation), so I send a answer.
Try mouseover event, in replace click.
like there:
document.getElementById("some").addEventListener("mouseenter", function( event ) {
// todo something
}, false);
Related
I'm trying to get the id from append table and use it in arithmetic.
Here's the modal where i append the table and its in php
<tbody>
<tr class="item-row" id="item-row" onload="calculate()">
<?php
foreach ($conn->query("SELECT * FROM panapricelist") as $info){
echo "<td><input type='checkbox' id='promotitle' name='check' value='".$info['ProductId']."' ></td>";
echo "<td><textarea rows='4' cols='7' maxlength='60' name='pcode' class='pcode' id='ProductCode' disabled>".$info['ProductCode']."</textarea></td>";
echo "<td><br><textarea rows='5' cols='40' maxlength='50' name='puse' id='productUse' disabled>".$info['ProductUse']." </textarea></td>";
echo "<td><br><textarea rows='4' cols='50' maxlength='50' name='pdesc' id='productDesc' disabled>".$info['ProductDesc']."</textarea></td>";
echo "<td id='msrp'><textarea rows='4' cols='10' maxlength='50' name='Msrp' class='productMsrp' id='productMsrp' disabled>".$info['Msrp']."</textarea></td>";
echo "<td style='width: 10%;' id='cost'><textarea rows='4' cols='10' name='Dealerphp' maxlength='50' class='cost' id='cost' disabled>".$info['DealerPhp']."</textarea></td</td></tr>";
}
?>
</tbody>
here's the append javascript.
<script type="text/javascript">
$(document).ready(function() {
$("#button_add").click(function() {
var favorite = [];
$.each($("input[name='check']:checked").each( function() {
// favorite.push($(this).val());
var getRow = $(this).parents('tr'); //variable for the entire row
var value = (getRow.find('td:eq(1)').html()); // Product Code
var value1 = (getRow.find('td:eq(2)').html()); // for Suggested Product Use
var value2 = (getRow.find('td:eq(3)').html()); // for product Description
var value3 = (getRow.find('td:eq(4)').html()); // for MSRP PHP
var value4 = (getRow.find('td:eq(5)').html()); // for Dealer PHP
$('#item-row').append('<tr><td class="item-name"><textarea class="productid" id="prc" value="'+ value +'</textarea></td><td class="item-name"><textarea class="productuse" id="productuse" value= "' + value1 + ' </textarea> </td><td class="item-name"><textarea class="description" id="description" value= "' + value2 +' </textarea></td><td class="item-name"><textarea class="msrp" id="msrp" value= "' + value3 + ' </textarea> </td><td class="item-name"><textarea class="cost" name="cost" id="'+ value4 + ' </textarea></td><td class="item-name"><textarea class="qty" id="qty" name="qty"></textarea></td><td class="item-name"><textarea id="price" class="price" name="price" disabled></textarea></td></tr>');
console.log(value4);
}));
});
});
</script>
and here's the arithmetic javascript to get the id, multiply to the column of qty and get the total.
function update_price() {
var row = $(this).parents('.item-row');
var price = row.find('.cost').val().replace("₱" ,"") * row.find('.qty').val();
price = roundNumber(price,2);
isNaN(price) ? row.find('.price').html("N/A") : row.find('.price').html("₱" +price);
update_total();
update_balance();
update_ftotal();
}
function bind() {
$(".cost").blur(update_price);
$(".qty").blur(update_price);
}
got it
function update_price() {
var row = $(this).parents('tr');
var a , w = 0;
var a = row.find('.cost').val().replace(/\,/g,'');
var w = row.find('.qty').val().replace(/\,/g,'');
var price = Number(a) * Number(w);
price = roundNumber(price,2);
isNaN(price) ? row.find('.price').html("N/A") : row.find('.price').html("₱" +price);
update_total();
update_balance();
update_ftotal();
}
function bind() {
$(".cost").blur(update_price);
$(".qty").blur(update_price);
}
I am adding rows dynamically with autofilled values from database. After adding it, it has to calculate total. Now it is calculating total only for 1st row. for 2nd row onwards it is not calculating anything. And also overall total is not happening.
Here is my code
html form
<table class="table table-bordered">
<tr>
<th><input class='check_all' type='checkbox' onclick="select_all()" /></th>
<th>No</th>
<th>Item ID</th>
<th>Description</th>
<th>UOM</th>
<th>Price</th>
<th>Tax</th>
<th>Quantity</th>
<th>Discount</th>
<th>Amount</th>
</tr>
<tr>
<td><input type='checkbox' class='case' /></td>
<td><span id='snum'>1.</span></td>
<td><input type="text" class="form-control" id="productcode_1" name="productcode[]"></td>
<td><input type="text" class="form-control" id="description_1" name="description[]"></td>
<td><input type="text" class="form-control" id="uom_1" name="uom[]"></td>
<td><input type="text" class="form-control price" id="price_1" name="price[]"></td>
<td><input type="text" class="form-control tax" id="tax_1" name="tax[]"></td>
<td><input type="text" class="form-control quantity" id="quantity_1" name="quantity[]"></td>
<td><input type="text" class="form-control discount" id="discount_1" name="discount[]"></td>
<td><input type="text" class="form-control amount" id="amount_1" name="amount[]"></td>
<td><button type="button" class='btn btn-danger delete'>-</button></td>
<td><button type="button" class='btn btn-success addmore'>+ </button></td>
</tr>
<tfoot>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th style="text-align:center;" class="total">0<b></b></th>
</tfoot>
</table>
javascript
$(".delete").on('click', function() {
$('.case:checkbox:checked').parents("tr").remove();
$('.check_all').prop("checked", false);
check();
});
var i = $('table tr').length - 1;
$(".addmore").on('click', function() {
count = $('table tr').length - 1;
var data = "<tr><td><input type='checkbox' class='case'/></td><td><span id='snum" + i + "'>" + count + ".</span></td>";
data += "<td><input class='form-control' type='text' id='productcode_" + i + "' name='productcode[]'/></td> <td><input class='form-control' type='text' id='description_" + i + "' name='description[]'/></td><td><input class='form-control' type='text' id='uom_" + i + "' name='uom[]'/></td><td><input class='form-control' type='text' id='price_" + i + "' name='price[]'/></td><td><input class='form-control' type='text' id='tax_" + i + "' name='tax[]'/></td><td><input class='form-control' type='text' id='quantity_" + i + "' name='quantity[]'/></td><td><input class='form-control' type='text' id='discount_" + i + "' name='discount[]'/></td><td><input class='form-control' type='text' id='amount_" + i + "' name='amount[]'/></td></tr>";
$('table').append(data);
row = i;
$('#productcode_' + i).autocomplete({
source: function(request, response) {
$.ajax({
url: 'ajax.php',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
type: 'items_table',
row_num: row
},
success: function(data) {
response($.map(data, function(item) {
var code = item.split("|");
return {
label: code[0],
value: code[0],
data: item
}
}));
}
});
},
autoFocus: true,
minLength: 0,
select: function(event, ui) {
var names = ui.item.data.split("|");
id_arr = $(this).attr('id');
id = id_arr.split("_
$('#description_' + id[1]).val(names[1]); $('#uom_' + id[1]).val(names[2]); $('#price_' + id[1]).val(names[3]); $('#tax' + id[1]).val(names[4]);
}
});
i++;
});
function select_all() {
$('input[class=case]:checkbox').each(function() {
if ($('input[class=check_all]:checkbox:checked').length == 0) {
$(this).prop("checked", false);
} else {
$(this).prop("checked", true);
}
});
}
$('body').delegate('.quantity,.price,.discount,.tax', 'keyup', function() {
var tr = $(this).parent().parent();
var qty = tr.find('.quantity').valr price = tr.find('.price').val tax = tr.find('.tax').val
var dis = tr.find('.discount').valr amt = (qty * price) - (qty * price * dis) / 100;
var tax1 = (amt) * (tax / 100);
tr.find('.amount').val(tax1al();
});
function total() {
var t = 0;
$('.amount').each(function(i, e) {
var amt = $(this).val() - 0;
t += tax1;
});
$('.total').html(t);
}
function check() {
obj = $('table tr').find('span');
$.each(obj, function(key, value) {
id = value.id;
$('#' + id).html(key + 1);
});
}
$('#productcode_1').autocomplete({
source: function(request, response) {
$.ajax({
url: 'ajax.php',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
type: 'items_table',
row_num: 1
},
success: function(data) {
response($.map(data, function(item) {
var code = item.split("|");
return {
label: code[0],
value: code[0],
data: item
}
}));
}
});
},
autoFocus: true,
minLength: 0,
select: function(event, ui) {
var names = ui.item.data.split("|");
$('#description_1').val(names[1]);
$('#uom_1').val(names[2]);
$('#price_1').val(names[3]);
$('#tax_1').val(names[4]);
}
});
ajax.php
<?php
require_once '../connect.php';
if($_POST['type'] == 'items_table'){
$row_num = $_POST['row_num'];
$name = $_POST['name_startsWith'];
$query = "SELECT items.iid, items.description, items.uom, items.selling_price, items.tax_id, taxes.tax_id, taxes.name, taxes.rate FROM items INNER JOIN taxes ON items.tax_id=taxes.tax_id where items.iid LIKE '".strtoupper($name)."%'";
$result = mysqli_query($con, $query);
$data = array();
while ($row = mysqli_fetch_assoc($result)) {
$name = $row['iid'].'|'.$row['description'].'|'.$row['uom'].'|'.$row['selling_price'].'|'.$row['rate'].'|'.$row_num;
array_push($data, $name);
}
echo json_encode($data);
}
?>
Only 1st row total is getting calculated. Not getting what is wrong
I got it resolved.Because of the class i have used
$('body').on('change', '.quantity,.price,.discount,.tax', function() {
var tr = $(this).parent().parent();
var qty = tr.find('.quantity').val();
var price = tr.find('.price').val();
var tax = tr.find('.tax').val();
var dis = tr.find('.discount').val();
var amt = (qty * price) - (qty * price * dis) / 100;
var tax1 = (amt * (tax / 100));
//alert(tax1);
tr.find('.tamount').val(tax1);
ttotal();
tr.find('.amount').val(amt);
total();
});
function total() {
var t = 0;
$('.amount').each(function(i, e) {
var amt = $(this).val() - 0;
t += amt;
});
$('.total').html(t);
}
function ttotal() {
var tt = 0;
$('.tamount').each(function(i, e) {
var tax = $(this).val() - 0;
tt += tax;
});
$('.ttotal').html(tt);
}
function check() {
obj = $('table tr').find('span');
$.each(obj, function(key, value) {
id = value.id;
$('#' + id).html(key + 1);
});
}
I successfully cloned my table rows, which has values retrieved from database. However I have few issues with it.I used class for all the elements as clone will duplicate IDs.No the problem raises because it unable to target each element uniquely. WHat's the way to do make each element / row unique here?
How the functions work:
When first select box selected, item for that selected id would appear in the next column.Followed by price textbox and quantity textbox. WHen both are filled up, last textbox for total amount would automatically appear.
Issues with the cloning are:
* WHen select box selected from the first/original row, all cloned items are updated with the value.Same goes for amount textbox and vise-versa.
My script:
<script>
var harga;
var qty;
$("input[name^=harga]").on("keyup", function () {
alert($(this).attr("id"));
console.log($(this).val());
harga = $(this).val();
});
$(".qty").on("keyup", function () {
console.log($(this).val());
qty = $(this).val();
var amount = harga * qty;
$(".amount").val(amount);
});
$(document).ready(function () {
$(".sub_item").hide();
$('.gr').change(function () {
var gr_id = $(this).find('option:selected').val();
console.log(gr_id);
var agency_id = '<?php echo $_SESSION['
agency_id
'];?>';
/*show branch for selected department starts*/
var data;
$.ajax({
type: "POST",
dataType: "json",
url: s_path + "get-item.php?group=" + gr_id + "&agency=" + agency_id, //Relative or absolute path to response.php file
data: data,
success: function (data) {
$(".sub_item").show();
$(".it_id").empty();
for (i = 0; i < data.length; i++) {
$(".it_id").append("<option value='" + data[i].item_id + "'>" + data[i].item_name + "</option>");
}
if (data.length == "") {
$(".it_id").append("<option>No items found</option>");
}
console.log(data);
}});//end success
/*show branch ends*/
});
});
$("#more_items").on("click", function () {
alert("Hi");
$(".clone_this").clone(true, true).insertBefore("#last_e");
});
$(function () {
$("#hide1").hide();
$("#hide2").hide();
$("#hide3").hide();
$('#faktor').change(function () {
var val = $(this).val();
//alert($(this).val());
if ($.trim(val) == 1) {
$("#hide1").show();
} else {
$("#hide1").hide();
}
});
$('#insurance').change(function () {
$("#hide2").show();
var val = $(this).val();
//alert($(this).val());
if ($.trim(val) == 1) {
$("#hide2").show();
} else {
$("#hide2").hide();
}
});
$('#bon').change(function () {
$("#hide3").show();
var val = $(this).val();
//alert($(this).val());
if ($.trim(val) == 1) {
$("#hide3").show();
} else {
$("#hide3").hide();
}
});
});
</script>
Form
<form action="#" method="POST" id="submit_item">
<input type="text" name="contract_id" value="" id="contract_id2"/>
<table>
<tr>
<th>Group Item</th>
<th>Nama Item</th>
<th>Harga</th>
<th>Kuantiti</th>
<th>Amount</th>
</tr>
<tr class="clone_this">
<td>
<select name='group' style="width:80px;" class="gr">
<option>Choose group</option>
<?php
$group = $agency->show_all_group();
foreach ($group as $k => $v) {
$i = 0;
$i++;
?>
<option value="<?php echo $v['group_id'] ?>"><?php echo $v['group_name'] ?></option>
<?php
}
?>
</select>
</td>
<td class="sub_item">
<select name='item' style="width:100px;" class="it_id">
</select>
</td>
<td><input type="text" name="harga_<?php echo $i; ?>[]" id="<?php echo $i; ?>" value="" class="harga"/></td>
<td>
<input type='text' size='2' value="" name='qty[]' class='qty'/>
</td>
<td><input type="text" name="amount[]" class="amount" value=""/></td>
</tr>
<tr id="last_e">
<td colspan="3"><input type="submit" name="submit" value="Next" id="item_s"/></td>
<td><input type="button" value="Add more items" id="more_items"/></td>
</tr>
</table>
</form>
You need find the relative elements to update so
$(document).ready(function () {
$('#submit_item').on('keyup', '.qty, .harga', function () {
var $tr= $(this).closest('tr');
$tr.find('.amount').val($tr.find('.harga').val() * $tr.find('.qty').val() || 0)
})
$(".sub_item").hide();
$('#submit_item').on('change', '.gr', function () {
var $this = $(this),
$tr = $this.closest('tr'),
gr_id = $this.find('option:selected').val(),
$subitem = $tr.find('.sub_item'),
$it_id = $tr.find('.it_id');
var agency_id = '<?php echo $_SESSION['agency_id'];?>';
/*show branch for selected department starts*/
var data;
$.ajax({
type: "POST",
dataType: "json",
url: s_path+"get-item.php?group="+gr_id+"&agency="+agency_id, //Relative or absolute path to response.php file
data: data,
success: function (data) {
$subitem.show();
$it_id.empty();
for (i = 0; i < data.length; i++) {
$it_id.append("<option value='" + data[i].item_id + "'>" + data[i].item_name + "</option>");
}
if (data.length == "") {
$it_id.append("<option>No items found</option>");
}
console.log(data);
}
}); //end success
/*show branch ends*/
});
});
Demo: Fiddle
I am having a bit of trouble trying to add a autocomplete field to my dynamically created content. Previously it worked fine as the textbox was generated in HTML, but I cannot figure how to make it work with dynamically generated content (even trough I am using static textbox id for test purposes)
Autocomplete:
jQuery(document).ready(function($){
var products= JSON.parse( '<?php echo json_encode($products_list) ?>' );
var t = 0;
var r = '<?php echo json_encode($number_of_rows_tuote) ?>';
var availableProducts = [];
var cellPlace = [];
while(t < r){
availableProducts.push(products[t]['prsku']+":"+products[t]['prname']);
cellPlace.push(t);
t++;
}
$( "#product2" ).autocomplete({
source: availableProducts
});
});
Dynamic create content
function addElement()
{
var contentID = document.getElementById('more');
var newTBDiv = document.createElement('div');
newTBDiv.setAttribute('id','strText'+intTextBox);
newTBDiv.innerHTML ="<br><div class='product'><TABLE><tr>";
newTBDiv.innerHTML += "<td><input type='text' placeholder = 'product_code' name='sku_" + intTextBox + "' id='sku_" + intTextBox + "'/></td><td><input type='text' id='product2' name='product2'></td>;
contentID.appendChild(newTBDiv);
}
<body onload="addElement();">
Try to call your autocomplete function after the addElement function .
OR
simply add
$( "#product2" ).autocomplete({
source: availableProducts
});
these lines at the last of your addElement function like this
function addElement()
{
var contentID = document.getElementById('more');
var newTBDiv = document.createElement('div');
newTBDiv.setAttribute('id','strText'+intTextBox);
newTBDiv.innerHTML ="<br><div class='product'><TABLE><tr>";
newTBDiv.innerHTML += "<td><input type='text' placeholder = 'product_code' name='sku_" + intTextBox + "' id='sku_" + intTextBox + "'/></td><td><input type='text' id='product2' name='product2'></td>;
contentID.appendChild(newTBDiv);
$( "#product2" ).autocomplete({
source: availableProducts
});
}
Call function to bind autocomplete as shown below and remove onload from body.
<body>
NOTE - you have missed " at the end of dynamic element string i.e. after </td>, please correct it.
jQuery(document).ready(function($){
var products= JSON.parse( '<?php echo json_encode($products_list) ?>' );
var t = 0;
var r = '<?php echo json_encode($number_of_rows_tuote) ?>';
var availableProducts = [];
var cellPlace = [];
while(t < r){
availableProducts.push(products[t]['prsku']+":"+products[t]['prname']);
cellPlace.push(t);
t++;
}
$('body').load(function(){
var contentID = document.getElementById('more');
var newTBDiv = document.createElement('div');
newTBDiv.setAttribute('id','strText'+intTextBox);
newTBDiv.innerHTML ="<br><div class='product'><TABLE><tr>";
newTBDiv.innerHTML += "<td><input type='text' placeholder = 'product_code' name='sku_" + intTextBox + "' id='sku_" + intTextBox + "'/></td><td><input type='text' id='Product2' name='product2'></td>";
contentID.appendChild(newTBDiv);
//bind autocomplete
$( "#Product2").autocomplete({
source: availableProducts
});
});
});
Good day!
I'm doing a Dynamic table which you can add/remove row, and I'm using select2 to search Items on the database via ajax and its working well at the moment, then I want to add another button ("add new item") to my select2's input box. It was also working but when I add another row, the previous rows will have 2 (add new item) buttons on it, and when I add another row something weird is happening on my input box then.
Without adding new rows
After adding new rows
Here is my code:
$(document).ready(function() {
addRow();
});
addRow.js
var rowCount = document.getElementById('tblItemList').rows.length - 1 ;
var rowArrayId = rowCount ;
function addRow(){
var toBeAdded = document.getElementById('toBeAdded').value;
if (toBeAdded=='')
{ toBeAdded = 2; }
else if(toBeAdded>10)
{
toBeAdded = 10;
}
for (var i = 0; i < toBeAdded; i++) {
var rowToInsert = '';
rowToInsert = "<tr><td><input id='itemId"+rowArrayId+"' name='product["+rowArrayId+"][name]' class='form-control col-lg-5 itemSearch' type='text' placeholder='select item' /></td>";
$("#tblItemList tbody").append(
rowToInsert+
"<td><textarea readonly name='product["+rowArrayId+"][description]' class='form-control description' rows='1' ></textarea></td>"+
"<input type='hidden' name='product[" + rowArrayId + "][itemId]' id='itemId'>"+
"<td><input type='number' min='1' max='9999' name='product["+rowArrayId+"][quantity]' class='qty form-control' required />"+
"<input id='poItemId' type='hidden' name='product[" + rowArrayId + "][poContentId]'></td>"+
"<td><input type='number' min='1' step='any' max='9999' name='product["+rowArrayId+"][price]' class='price form-control' required /></td>"+
"<td class='subtotal'><center><h3>0.00</h3></center></td>"+
"<input type='hidden' name='product["+rowArrayId+"][delete]' class='hidden-deleted-id'>"+
"<td class='actions'><a href='#' class='btnRemoveRow btn btn-danger'>x</a></td>"+
"</tr>");
var rowId = "#itemId"+rowArrayId;
$(rowId).select2({
placeholder: 'Select a product',
formatResult: productFormatResult,
formatSelection: productFormatSelection,
dropdownClass: 'bigdrop',
escapeMarkup: function(m) { return m; },
minimumInputLength:1,
ajax: {
url: '/api/productSearch',
dataType: 'json',
data: function(term, page) {
return {
q: term
};
},
results: function(data, page) {
return {results:data};
}
}
});
rowArrayId = rowArrayId + 1;
};
$(".select2-drop").append('<table width="100%"><tr><td class="row"><button class="btn btn-block btn-default btn-xs" onClick="modal()">Add new Item</button></div></td></tr></table>');
function productFormatResult(product) {
var html = "<table><tr>";
html += "<td>";
html += product.itemName ;
html += "</td></tr></table>";
return html;
}
function productFormatSelection(product) {
var selected = "<input type='hidden' name='itemId' value='"+product.id+"'/>";
return selected + product.itemName;
}
$(".qty, .price").bind("keyup change", calculate);
};
Please Help me find solution for this one, been trying to solve this on my own but I cant get it working. Any suggestions, answers and comments would really be appreciated. Thank you very much and have a good day!
In my case I just added this function
formatNoMatches: function( term ) {
$('.select2-input').on('keyup', function(e) {
if(e.keyCode === 13)
{
$("#modalAdd").modal();
$(".select2-input").unbind( "keyup" );
}
});
return "<li class='select2-no-results'>"+"No results found.<button class='btn btn-success pull-right btn-xs' onClick='modal()'>Add New Item</button></li>";
}