Error in Obj.length>0 in Datalist Validation

Question

I have a script and i was running it over a website through tempermankey. The script is basically inserting a datalist in an input field and changing the other input value based on datalist selected value.

code:

(function() {
$("bdi:contains('Truck No')").closest('div').next().find('input').attr({
        maxlength: "10",
        Autocomplete: "OFF",
        list: "KASHIPUR",
        Placeholder: "TRUCK NUMBER",
        autocapitalize:"ON"
        }).after('<Datalist ID=KASHIPUR></Datalist>');

 $("bdi:contains('Truck No')").closest('div').next().find('input').blur(function(){
       var val=$("bdi:contains('Truck No')").closest('div').next().find('input').val();
        var obj=$("#KASHIPUR").find("option[value='"+val+"']");
    if(((obj !=null) && (obj.length>0))||($("bdi:contains('Vehical Type')").closest('div').next().find('input').val()==""))

       return false;
            else
                 alert("Pls Ask Depot to add the Vehicle Number");
     $("bdi:contains('Truck No')").closest('div').next().find('input').focusin();})


     const options = [
["DL01GB2355","9690023061"],
["UK18CA6626","9690023062"],
["UK18CA6821","9760027187"]
 ];

   jQuery( function($) {
const HTMLOptions = options.reduce((html, item) => {
 html += `<option value="${item[0]}"lebel="${item[1]}"lebel1="${item[2]}"></option>`;
 return html;
  }, "");

$("#KASHIPUR")
.empty().append(HTMLOptions)
$(document).ready(function() {

$("bdi:contains('Truck No')").closest('div').next().find('input').click(function()
{
    var value = $("bdi:contains('Truck No')").closest('div').next().find('input').val();
    ($('#KASHIPUR [value="' + value + '"]').data('value'));
    });
  });

$(document).on('change', $("bdi:contains('Truck No')").closest('div').next().find('input'), function () {
     $("bdi:contains('Driver Mobile No')").closest('div').next().find('input').val
     ($("#KASHIPUR option[value='" + $("bdi:contains('Truck No')").closest('div').next().find('input').val() + "']").attr("lebel"));
  });

$(document).on('change', $("bdi:contains('Truck No')").closest('div').next().find('input'), function () {
     $("bdi:contains('Driver Name')").closest('div').next().find('input').val
     ($("#KASHIPUR option[value='" + $("bdi:contains('Truck No')").closest('div').next().find('input').val() + "']").attr("lebel1"));
  });

 $("Datalist").slice(1).remove()



})

It is not working for the first fime, if i backward and forward it is working

Error- It is going in else but condition is true

    if(((obj !=null) && (obj.length>0))||($("bdi:contains('Vehical 
  Type')").closest('div').next().find('input').val()==""))

       return false;
           else
             alert("Pls Ask Depot to add the Vehicle Number");
 $("bdi:contains('Truck No')").closest('div').next().find('input').focusin();})

Answer 1

Sounds like a timing problem to me.

Some pages load additional data after the were already loaded. If you script tries to access an element that is loaded later, then your script doesn't find it.

I'm not familiar with tampermonkey. Can you call your main function with a setTimeout ?

E.g.:

setTimeout(
    function(){
        yourMainFunction();  // <-- call your main function here
    },
    1500 // <-- delay in milliseconds. Try how much is necessary.
);

If you need it (i.e. if you can not use the existing function that you already have), you can wrap your code within an extra function like this:

const yourMainFunction = function(){

    $("bdi:contains('Truck No')").closest('div').next().find('input').attr({

    // ... rest of your code here ...

}; <-- end of function

setTimeout( yourMainFunction, 1500 ); // <-- call function with delay