1

Anyone knows how to effectively get rid of this error? I have referenced the SPServices and jquery from my site assets library and also tried referencing for cdnjs but both throw the error which I get on developer dashboard. Please help.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7.1a/jquery.SPServices-0.7.1a.min.js"></script>

 <div class="container">
     <h2>Choice Column Update</h2>         
     This section is for PMO admins to update the Options in Choice columns
     <br/><br/>
     <table class="table1" width="100%">                
         <tr>
             <td><lable>Select the SharePoint List </lable>    </td>
             <td><select id="ddlLists"></select></td>                    
         </tr>

         <tr>
             <td width="30%"><lable>Select the Dropdown Column from the above Selected List</lable></td>
             <td><select id="ddlChoice"></select></td>                    
         </tr>
         <tr>
             <td><label>Options available for the above Selected Dropdown Column</label></td>
             <td><textarea title="Drop Down Values" ID="txtDD" data-validate="required;textbox"></textarea>
             <br/>Type each choice on a separate line</td>                    
         </tr>               
         <tr>
             <td></td>
             <td> <input type="button" id="Button1" onclick="ExecuteOrDelayUntilScriptLoaded(UpdateChoices, 'sp.js');" title="Click to Update" value="Update" style="float: none !important" />
             <input type="button" id="btnrefresh" onclick="javascript: location.reload(true);" title="Click to Refresh" value="Refresh" style="float: none !important" /> 
             </td>
             <td></td>
         </tr>       
     </table>
 </div> 

 <script>
 (function () {
     $(document).ready(function () {
         $("title").html("Choice Column Update");
         $('#ddlLists').append("<option value=''>" + "--Select List--" + "</option>");
         $('#ddlChoice').append("<option value=''>" + "--Select Choice--" + "</option>");
         GetAllLists();
         GetAllChoice();  
         ChoiceValues();
     });
 } ());

 //To get all the Lists in the SharePoint site using SPServices and append the values to <select id="ddlLists"> tag
 function GetAllLists() {

     $().SPServices({ 
         operation: "GetListCollection", 
         completefunc: function( xData, Status ) {     
             if (Status == "success") {
                 $( xData.responseXML ).find("Lists > List").each(function() {
                     var $node = $(this);                            
                     //If you want only specific Lists, then make use of this "IF" and specify the List name
                     if( ["Custom",
                           "Phone",
                         ].indexOf($node.attr("Title")) >= 0) {

                         appendField = $("#ddlLists");
                         $(appendField).append("<option value='" + $node.attr("Title") + "'>" + $node.attr("Title") + "</option>");
                     }
                 });
             }
         } 
     });

 }

 //To get all the Choice columns based on the selected List using SPServices and append the values to <select id="ddlChoice"> tag
 function GetAllChoice() {

     $('#ddlLists').change(function() {
         var listName = "destinationlist";
         $('#ddlChoice').empty();
         $('#txtDD').empty();
         $('#ddlChoice').append("<option value=''>" + "--Select Choice--" + "</option>");

         $().SPServices({
           operation: "GetList",
           listName: listName,
           completefunc: function (xData, Status) {
             $(xData.responseXML).find("Fields > Field").each(function() {
                 if($(this).attr("Type") === "Choice") {
                     $('#ddlChoice').append("<option value='" + $(this).attr("DisplayName") + "'>" + $(this).attr("DisplayName") + "</option>");                  
                 }
              });
            }
         });
     });    
 }

 //Append the Choice values in a <textbox id="txtDD"> Textbox based on the selected choice
 function ChoiceValues() {

     $('#ddlChoice').change(function() {
         var listName = $('#ddlLists :selected').val();
         var choiceName = $(this).val();    
         $('#txtDD').empty();

         $().SPServices({
             operation: "GetList",
             listName: listName,
             completefunc: function (xData, Status) {
             $(xData.responseXML).find("Field[DisplayName='" + choiceName +"'] CHOICE").each(function() {                                        
                 $('#txtDD').append($(this).text() + "\n");        
              });
             }
         });    
     });
 }

 //Updating the Choice value using JS Client Object Model
 function UpdateChoices() {

     var listName = $('#ddlLists :selected').val() || "";
     var choiceName = $('#ddlChoice :selected').val() || "";
     var newOptions = $('#txtDD').val() || "";

     if(listName != "" && choiceName != "" && newOptions != "") {

         var newOptionsArray = [];
         var lines = newOptions.split(/\n/);

         for (var i=0; i < lines.length; i++) {
           //Avoiding empty lines
           if (/\S/.test(lines[i])) {
             newOptionsArray.push($.trim(lines[i]));
           }
         }        

         var context = new SP.ClientContext.get_current();
         var web = context.get_web();
         var cldList = web.get_lists().getByTitle(listName);
         var categoryField = cldList.get_fields().getByInternalNameOrTitle(choiceName);
         var categoryChoiceField = context.castTo(categoryField, SP.FieldChoice);
         context.load(categoryChoiceField);

         context.executeQueryAsync(function () {                  
             categoryChoiceField.set_choices(newOptionsArray);              
             categoryChoiceField.updateAndPushChanges();
             context.executeQueryAsync(function () { 
                 alert(choiceName + ' choice column updated successfully.');
             }, 
             function () { 
                 alert('Error in updating the choice column');
             });

         }, function () { 
             alert('Error in updating the choice column');
         });    
     }
     else {
         alert('Please select the list and choice');
     }
 }
  </script>
  • You should add the references to your question, sound's like it's not getting loaded correctly. – Christoffer Aug 16 '18 at 8:39
  • I have updated my question to include my code – Vusi85 Aug 16 '18 at 8:42
  • I have solved it. I used jQuery.noConflict() function and it cleared the error. – Vusi85 Aug 16 '18 at 9:56
  • Great @Vusi85 Please if you got it worked, post your solution in details in answers section to be helpful for all :) Thanks in Advance. – Mohamed El-Qassas MVP Aug 17 '18 at 0:38
  • I just added the following line: jQuery.noConflict(); in $(document).ready() function. it resolved all the issues I had. – Vusi85 Aug 20 '18 at 7:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.