Grabbing and Changing Kendro DropDownList index in JS Injection

Question

I'm working on a chrome extension script to use JavaScript to auto fill in some forms for me. Using Scripty for the extension.

Currently trying to change the index of a kendoDropDownList. I can't seem to find the the correct element to grab or clone the websites own JS to cause this to happen.

Here's what I've currently tried. Read through all the Kendo API the Best I could. I commented in the errors thrown into the code. I have the script spamming every second to handle window changes and multiple pages at once.

    var dropDownList = document.getElementById("DocumentType");
    if (!dropDownList) {
        console.log("Could not find Document Type Drop Down List");
        return;
    } // Gets to here just fine. 
    dropDownList.select(5); // Does not throw error, but does nothing
    var dataVar = dropDownList.data("kendoDropDownList"); // Throws exception ".data( is not a function"
    if (!dataVar) {  // Haven't gotten this var down the method. 
        console.log("Element did not contain data set.");
        return;
    }
    if ((dropDownList.data("kendoDropDownList").index()) != 5) {
        console.log("Changing index of drop down list to Identiy Proof.").
            dropDownList.data("kendoDropDownList").select(5);
    }

I'm not familiar enough with JS to understand why I can't inject using $("Variable name") to find things like I can in the console, but this is what works in the console and the website itself uses to grab the element and mess with it. I can use that and .select(5) in the console just fine.

$("#DocumentType").data("kendoDropDownList").select(0);

Answer 1

You are messing up vanilla JS with jQuery. It's important to understand that jQuery(the code you run in console) is a JS library, but the code you're trying in your script is only JS. That means that jQuery's functions are not available the way you're using in your script.

This code document.getElementById("DocumentType"); return a DOM element, which doesn't has the .data() method. That method belongs to jQuery. That is why one code works and other doesn't, they're different.

Use the same code in your script and it will probably work, since jQuery is required for kendo to work, it would probably be available in your script as well.