place focus on specific cell after ajax and trigger('update') with row defined

Question

I have a dynamic table that reloads when the user(closed system) makes a change to the tableQtyUpd field. what i need to do is have the cursor focus set to next input tablePrice in that row. tableQID is a unique, and non-editable value.

$(document).on('change', '#tableQtyUpd', function(){
var isbn13 =  $('#isbn13').val();
var QIDFind= $(this).closest('tr').children('#tableQID').html();
    $.ajax({
    type: "POST",
        url: "QuoteUpdateQty.php",
        dataType: "json",
        data: ({QID:$(this).closest('tr').children('#tableQID').html(), QtyUpd:$(this).parent().parent().find('#tableQtyUpd').val(), }),
                            success: function(data){
            
$("#inv3 tbody tr").remove();   

 
    $.ajax({
        type: "POST",
        url: "QuoteRetriveShort.php",
        dataType: "json",
        async:false,
        data: ({isbn13: isbn13 }),
        success: function(data){
        
            for(var x=0;x<data.QID.length;x++)
               
                if (data.QISBN != null ) {
                    
                    
                            //code
                     $("#inv3").show();
                      $("#inv3").append('<tr><td id=tableQtyApp>'+data.QApQty[x]+
                                        '</td><td> <input type="text" class="qty"  id=tableDueDate value="'+data.QDateDue[x]+
                                        '"</td><td id=tableGuide>'+data.QGuide[x]+
                                         '</td><td> <input type="text4" class="qty" id="tableQtyUpd" onclick="this.select()" style="' + getStyle(data.quoteChange[x]) +
                                        '"value="'+data.QUpdateQty[x]+ 
                                         '"/></td><td id=tableQty>'+data.Qqty[x]+
                                         '</td><td id=tableQtyChange>'+data.quoteChange2[x]+
                                         '</td><td id=tableMonth>'+data.QMonth[x]+
                                         '</td><td> <input type="text4" class="qty onclick="this.select()" id="tablePrice" value="'+data.QPrice[x]+
                                         '"/></td><td> <input type="text" class="qty" onclick="this.select()" id=tableSource value="'+data.QSource[x]+
                                         '"</td><td id=tableDate>'+data.QDateQuote[x]+
                                          '</td><td> <input type="text" class="qty" onclick="this.select()" id="tableNotes" value="'+data.QNotes[x]+
                                         '"</td><td id=tableQID>'+data.QID[x]+
                                         '</td><td><img class="fill" src="add.jpg"/></td><td><img class="Delete" src="delete.gif"/></td></tr>');
                     }
                     else if (data.QISBN == null ) {
                           $("#inv3").hide();  
                     }
        }
    });
    
    $("#inv3").trigger("update");
    QIDFind.focus();
    
                },
                
});
      
 });

when i put QIDFind.focus(); i get an error i have tried numerous diffent methods of focus, i assume this is simple and i am just missing something--

Answer 1

You are trying to focus() on a text string, rather than a jQuery HTML element.

QIDFind= $(this).closest('tr').children('#tableQID').html(); is the content of that element, not the element

QIDFind= $(this).closest('tr').children('#tableQID') will give you the control(s), you then need to put .html() just where you need it

There are other issues. You are appending rows where the child element have the same ID in each row. ID need to be unique on the page, so you should probably switch to classes or data- attributes.