CODEWITHSUNDEEP
jquery
Vrunda
Vrunda

Reputation: 5

.select() is not workig for td while tr append through jquery

I have tr that append through jquery while click on input. I want one of them td selected by default while appending.That td is editable but not input tag.

I am using this:

$("#qty_1").select();

But it did not work.

Here is my demo: https://jsfiddle.net/vrunda22/fvhnspg4/53/

Upvotes: 0

Views: 68

Answers (2)

Ahmed Maruf
Ahmed Maruf

Reputation: 511

Hope this also might work as you expected:

Just adding few lines within your code:

$("#productsearch").on('mouseout', function(e) {
  setTimeout(function() {
    e.stopPropagation()
    $("#qty_1").text("");
    console.log($("#qty_1").select().focus());
  }, 300);
});

Also reset the product_html variable to avoid duplicates if required. 

$("#sproduct_detail_record").prepend(product_html);
product_html = "";

Upvotes: 0

Akhil Aravind
Akhil Aravind

Reputation: 6130

Replaced your mouseout with blur, which I think is more good in this situation.

This is the update which I done to achieve 

$("#productsearch").on('blur', function (e) {
    var cell = document.getElementById('qty_1');
    setTimeout(function () {
        e.stopPropagation()
        var range, selection;
        if (document.body.createTextRange) {
            range = document.body.createTextRange();
            range.moveToElementText(cell);
            range.select();
        } else if (window.getSelection) {
            selection = window.getSelection();
            range = document.createRange();
            range.selectNodeContents(cell);
            selection.removeAllRanges();
            selection.addRange(range);
        }
    }, 30);
});

Working snippet is added. Hope it will help you. :) 

var $ = jQuery;

$("#productsearch").on('click', function(e) {
  var product_html = '';
  product_html += '<tr id="product_1">' +
    '<td class="pt-15 pb-15" id="product_name_1" name="product_name[]"><a id="popupid_1" onclick="return productdetailpopup(this);"><span class="informative">Wheat Dalia 200 gm</span></a></td>' +

    '<td id="sellingpricewgst_1" class="rightAlign"><input type="text" id="showsellingwithoutgst_1" class="floating-input tarifform-control noinput" value="8.19" readonly="" tabindex="-1"></td>' +
    '<td id="qty_1" name="qty_1" class="number" style="border: 1px solid #cccccc;border-radius: 10px !important;text-align: right" contenteditable="true">100</td>' +


    '<td id="stotalamount_1" style="font-weight:bold;text-align:right !important;">17.20</td>' +
    '</tr>';
  $("#sproduct_detail_record").prepend(product_html);

});
$("#productsearch").on('blur', function(e) {
var cell = document.getElementById('qty_1');
  setTimeout(function() {
    e.stopPropagation()
    var range, selection;
  if (document.body.createTextRange) {
    range = document.body.createTextRange();
    range.moveToElementText(cell);
    range.select();
  } else if (window.getSelection) {
    selection = window.getSelection();
    range = document.createRange();
    range.selectNodeContents(cell);
    selection.removeAllRanges();
    selection.addRange(range);
  }
  }, 30);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input class="form-control form-inputtext typeahead" value="" maxlength="" type="text" name="productsearch" id="productsearch" placeholder="Enter Product Name">
<table width="100%" border="0">
  <!-- <table class="table mb-0" style="margin:10px 0 0 0;font-size:0.92rem !important;" border="0"> -->

  <thead>
    <tr class="blue_Head">
      <th class="pa-10 leftAlign"> <span class="bold itemfocus"><span class="titems">1</span></span><span class="plural">Item</span></th>
      <th class="rightAlign" style="width:10%;">MRP</th>
      <th class="rightAlign" style="width:5%">Qty.</th>
      <th class="rightAlign" style="width:10%;">Total</th>

    </tr>
  </thead>

  <tbody id="sproduct_detail_record">

  </tbody>
</table>

Upvotes: 1

Related Questions