Friday, July 26, 2013

Attach OnChange Event To SharePoint Lookup Field By Using JavaScript

as per my requirement I have to populate Branches dropdownlist based on Protocols dropdownlist value. for this we added javascript onchange function to the protocols dropdownlist dynamically. 

reading Branches values by using ECMA script client object model  as they are in the different list. you can see the images below.

you can add this script content editor webpart or designer.


   <script type="text/javascript">

        _spBodyOnLoadFunctionNames.push("SetDropDownEvent");

        var ddlProtocol;

        function SetDropDownEvent() {
            getField('select', 'Protocol').onchange = function () { GetProtocol() };
            //alert('SetDropDownEvent');
        }

        function getField(fieldType, fieldTitle) {

            var docTags = document.getElementsByTagName(fieldType);
            //alert(docTags.length);
            for (var i = 0; i < docTags.length; i++) {
                if (docTags[i].title == fieldTitle) {
                    return docTags[i]
                }
            }
        }

        function GetProtocol() {
            //alert('syncDropDowns');
            lookupField = getField('select', 'Protocol');
            lookupSelectedItem = lookupField.options[lookupField.selectedIndex];
            // alert('lookupSelectedItem' + lookupSelectedItem.text);
            ddlProtocol = lookupSelectedItem.text;
            alert('ddlProtocol' + ddlProtocol);
            GetBranchByProtocol(lookupSelectedItem.text);
        }


        //  ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");
        function GetBranchByProtocol(protocolid) {
            // alert('protocolid' + protocolid);


            var clientContext = new SP.ClientContext.get_current();
            var oList = clientContext.get_web().get_lists().getByTitle('TestList');

            var camlQuery = new SP.CamlQuery();

            camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\'ProtocolNew\' /><Value Type=\'Text\'>' + protocolid + '</Value></Eq></Where></Query></View>');
            this.collListItem = oList.getItems(camlQuery);

            clientContext.load(collListItem);

            clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

        }

        function onQuerySucceeded(sender, args) {

            var listItemInfo = '';
            var listItemEnumerator = collListItem.getEnumerator();
            while (listItemEnumerator.moveNext()) {
                var oListItem = listItemEnumerator.get_current();

                if (ddlProtocol) {
                    branchField = getField('input', 'Branch');
                    // alert('branchField' + branchField.id);
                    document.getElementById(branchField.id).value = oListItem.get_item('Title')
                    // alert('branchvalue' + document.getElementById(branchField.id).value);
                } else {
                    alert('else');
                    branchField = getField('input', 'Branch');
                    // alert('branchField' + branchField.id);
                    document.getElementById(branchField.id).value = '';
                }
                //break
            }

            //alert(listItemInfo.toString());
        }

        function onQueryFailed(sender, args) {

            alert('fail');
            alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
        }
    
     </script>



3 comments:

  1. Hi surya,
    I have tried this solution in MOSS2007. It is getting the protocolid and it is displaying in the alert also but it is not able to fetch the list clientContext.get_web().get_lists().getByTitle('TestList');. Do i need to change the method on how to call the list in moss2007

    ReplyDelete

Followers