I am trying to apply javascript in a CEWP to a NewForm.aspx page of a simple custom list. Basically, the idea is to auto-populate a text field on the new item form whenever a dropdown column's selection is changed: the text to be populated will be queried from another lookup list based on the dropdown's selected item.

The script below works, EXCEPT when trying to call the lookup-query function via the "onchange" listener of the dropdown. I get some sort of Ajax error whenever I select an item in the dropdown (which kicks off the CAML-querying function):

Uncaught TypeError: Cannot call method 'apply' of undefined ScriptResource.axd?d=...

Here's my code:

    //function that sets up the query for filtering on the list of positions/descriptions
    function populateDesc()
        //initialize a clientContext object to use for querying a list on this site
        var clientContext = new SP.ClientContext.get_current();

        //initialize an object from the specific list to query from.
        var oList = clientContext.get_web().get_lists().getByTitle('LookupListName');

        //initialize a CAML query object
        var camlQuery = new SP.CamlQuery();

        //reference the position dropdown on the form
        var dropdown = document.getElementById('dropdownID');

        //get the value of the selected position in the dropdown
        var selectedVal = dropdown.options[dropdown.selectedIndex].value;

        //set the query to filter for this value
        var xml = '<Query><Where><Eq><FieldRef Name=\'Name\'/><Value Type="Text">' + selectedVal + '</Value></Eq></Where></Query>';

        //populate the CAML query into the object. This particular query retrieves the description of the selected positon choice text

        //get the items based on the the query
        this.collListItem = oList.getItems(camlQuery);

        //load the results list into the clientContext

        //execute the query and run one of the functions depending on success
            Function.createDelegate(this, this.onQuerySucceeded), 
            Function.createDelegate(this, this.onQueryFailed));

    //Actions to perform if the CAML query succeeded
    function onQuerySucceeded(sender, args) {

        //setup an Enumerator to manipulate individual query results
        var listItemEnumerator = collListItem.getEnumerator();

        //iterate through each CAML result item
        while (listItemEnumerator.moveNext()) {
            var oListItem = listItemEnumerator.get_current();

        //get the text area and set its value
        document.getElementById('textareaID').value = oListItem.get_item('Description');

    //Actions to perform if the CAML query failed
    function onQueryFailed(sender, args) {

        alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());

    function initialize() {
        ExecuteOrDelayUntilScriptLoaded(populateDesc, "sp.js");

        document.getElementById('dropdownID').onchange = populateDesc;


Most of this is directly based on Microsoft's example here: http://msdn.microsoft.com/en-us/library/hh185007(v=office.14).aspx

The difference with the MS example is because I apply an onchange listener to the dropdown choice box, causing the method to be run each time the dropdown is changed. If instead I make my ExecuteOrDelayUntilScriptLoaded function initialize the listener directly, I will get another error that "collListItem is not defined":

ExecuteOrDelayUntilScriptLoaded(function(){document.getElementById('dropdownID').addEventListener("change", populateDesc, false);}, "sp.js");

I have tried applying "onchange" as well instead of addEventListener, and various combinations of initializing the function calls, but with no luck. These errors are happening in both IE and Chrome. Any ideas? Alternatives?


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.