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>
5
  • You should add the references to your question, sound's like it's not getting loaded correctly. Aug 16, 2018 at 8:39
  • I have updated my question to include my code
    – Vusi85
    Aug 16, 2018 at 8:42
  • I have solved it. I used jQuery.noConflict() function and it cleared the error.
    – Vusi85
    Aug 16, 2018 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. Aug 17, 2018 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, 2018 at 7:30

0

Your Answer

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

Browse other questions tagged or ask your own question.