SharePoint 2013 custom JS not working in IE11 list view

Question

I seem to have some browser compatibility issue but not sure what is causing the issue.

I wrote my code using Chrome and buttons, Javascript, etc. runs good. Everything displays as it should. I'm using a CEWP in a list view page using JQuery.

The same code which functions properly in Chrome when run in IE11 results in buttons that don't work and my widget (datepicker) doesn't display on the page.

I took my code and pointed my browser at my local machine and the html and ran it (in IE11) and buttons and datapicker show up. Buttons work as expected.

So, my guess is something is going on in IE11 in SharePoint but not sure what that is.

In IE11 the error I'm getting is "Unable to get property 'focusValidOnThisNode' of undefined or null reference."

Again, no issues in Chrome...not tried Firefox yet but I'm testing that today.

Thanks.

<!--Jquery and SP Core Libs-->
<script src="https://Someurl.net/sp/tg/MNOCENTRAL/sandbox/SiteAssets/jslib/jquery351/jquery-3.5.1.min.js"></script> 

<script type="text/javascript" src="https://someurl.net/sp/tg/MNOCENTRAL/sandbox/SiteAssets/jslib/spservices/jquery.SPServices.min.js"></script>   
<script type="text/javascript" src="https://someurl.net/sp/tg/MNOCENTRAL/sandbox/SiteAssets/jslib/JqueryUI/jquery-ui.js"></script>

<!--<script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script>  -->

<script type="text/javascript" src="/_layouts/15/sp.RequestExecutor.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.Core.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/SP.UI.Dialog.js" ></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>


<!--***********************-->

<link rel="stylesheet" href="https://someurl.net/sp/tg/MNOCENTRAL/sandbox/SiteAssets/jslib/ProjToSchedv1/ProjToSchedv1.css">
<script type="text/javascript" src="https://someurl.net/sp/tg/MNOCENTRAL/sandbox/SiteAssets/jslib/ProjToSchedv1/ProjToSchedv1-13.js"></script>


<style>
    .ledate   {
        text-align: left;
    }
    
    .ffwdate  {
        text-align: left;
    }
    .tadate  {
        text-align: left;
    }
    
    .lelbldate{
        display: inline-block;
        text-align: left;
    }
    .launchdate{
        display: inline-block;
        text-align: left;
    }

</style>
   
<body>
    <button id="showschedchange" type='button'>Document Schedule Change</button>
    <button id="hideschedchange" type="button">Hide Schedule Change</button>
   
        <div id='myfields'>
            <table style="width:100%">
                <tr>
                    <th>
                        <div id="le-datechange" class="ledate"><p>Changed LE/RC1/PUT/SignOff Date:</p></div>
                        <p><label id="le-lbl" class="lelbldate" name="LEDATE">Original Date:  </label><label id="lemydateold"></label></p>
                        <p><label id="le-lbl" class="lelbldate" name="LEDATE">New Date:  </label><label id="lemydate"></label></p>
                        
                    </th>
    
                    <th>
                        <div id="ffw-datechange" class="ffwdate"><p>Changed FFW/RC2/P1/LabStart Date:</p></div>
                        <p><label id="ffw-lbl" class="fflblwdate" name="FFWDATE">Original Date: </label></label><label id="ffwmydateold"></label></p>
                        <p><label id="ffw-lbl" class="fflblwdate" name="FFWDATE">New Date:  </label></label><label id="ffwmydate"></label></p>
                    </th>
                    
                    <th>
                        <div id="ta-datechange" class="tadate"><p>Changed TA/FieldStart Date:</p></div>
                        <p><label id="ta-lbl" class="talbldate" name="TADATE">Original Date:  </label></label><label id="tamydateold"></label></p>
                        <p><label id="ta-lbl" class="talbldate" name="TADATE">New Date:  </label></label><label id="tamydate"></label></p>
                    </th>
                    <th>
                        <div id="launch-datechange" class="launchdate"><p>Changed Launch Date:</p></div>
                        <p><label id="launch-lbl" class="launchlbldate" name="LAUNCHGDATE">Original Date:  </label></label><label id="launchmydateold"></label></p>
                        <p><label id="launch-lbl" class="launchlbldate" name="LAUNCHGDATE">New Date:  </label></label><label id="launchmydate"></label></p>
                    </th>
                </tr>
    
            </table>
    
            <!--reason for change of item-->
            <label for="reason">Enter Reason for Change</label>  
            <input type="text" id="reason" size="100" name='REASON'><br>  
    
            <!--submit-->
            <button type="button" id="mysubmit">Submit</button> 
           
        </div>
    



<!--OLD HTML Code  

 <input id="GetPrimaryListIDbtn" type="button" value="Get Primary List ID" />  
 <input id="GetPrimaryListFieldsbtn" type="button" value="Get Primary List Fields" /> 
<div>
<input id="CreateRcdInSchedBtn" type="button" value="Create New Schedule Record" />
</div>
-->  

</body> 


/**
 
 */

var getitem=$.Deferred();
var newitem=$.Deferred();
var updateitem=$.Deferred();

$(document).ready(function () {
    console.log ('Version 13')  ;
    var siteURL="https://someurl.net/sp/tg/MNOCENTRAL/sandbox";
    var TargetListName='Schedule-TEST';
    var srcListName='Projects-TEST';

    srcIntName={ProjName:"Project_x0020_Name",LE:'LE_x002f_RC1_x002f_PUT_x002f_Sig',FFW:'FFW_x002f_RC2_x002f_P1_x002f_Lab',TA:'TA_x002f_FieldStart',Lnch:'Launch'};
    tIntName={ProjName:'Title',LE:'Archived_x0020_RC1_x002f_LE_x002',FFW:'Archived_x0020_FFW_x002f_RC2_x00', TA:'Archived_x0020_TA_x002f_FieldSta',Lnch:'Archived_x0020_Launch',Reason:'Reason_x0020_this_x0020_Schedule'};
    srcListFldVal={'ProjName':'','LE':'','FFW':'','TA':'','Lnch':''};

    var ItemID=GetItemID(window.location.href);  //get url of current selection and get item ID in url

    //on form load hide table
    $('#myfields').hide();

    GetListItem(ItemID,siteURL,srcListName,srcIntName,tIntName,srcListFldVal)

    .done(function(mylist){
        
        //display original dates
        srcListFldVal['ProjName']=mylist.get_item(srcIntName['ProjName']);
   
        srcListFldVal['LE']=mylist.get_item(srcIntName['LE']);
        srcListFldVal['FFW']=mylist.get_item(srcIntName['FFW']);
        srcListFldVal['TA']=mylist.get_item(srcIntName['TA']);
        srcListFldVal['Lnch']=mylist.get_item(srcIntName['Lnch']);
       
        $("#lemydateold").text(srcListFldVal['LE'].toLocaleDateString('en-us'));
        $("#ffwmydateold").text(srcListFldVal['FFW'].toLocaleDateString('en-us'));
        $("#tamydateold").text(srcListFldVal['TA'].toLocaleDateString('en-us'));
        $("#launchmydateold").text(srcListFldVal['Lnch'].toLocaleDateString('en-us'));

        

    });

    /* the following responds to datepicker date selections
    */
   $("#le-datechange").datepicker({
       onSelect: function (){

           var tmpdate=$(this).datepicker('getDate');
           var ledate= tmpdate.toLocaleDateString('en-us');  //convert date to mm/dd/yy format
           
           //document.getElementById("le-lbl").innerHTML=ledate;
           $("#lemydate").text(ledate);
           
           },

   });
       
   $("#ffw-datechange").datepicker({
       onSelect: function (){

           var tmpdate=$(this).datepicker('getDate');
           var ffwdate= tmpdate.toLocaleDateString('en-us');  //convert date to mm/dd/yy format
           $("#ffwmydate").text(ffwdate);
           
           },

   });
                   
   $("#ta-datechange").datepicker({
       onSelect: function (){

           var tmpdate=$(this).datepicker('getDate');
           var tadate= tmpdate.toLocaleDateString('en-us');  //convert date to mm/dd/yy format
           $("#tamydate").text(tadate);
          
           },

   });
   
   $("#launch-datechange").datepicker({
       onSelect: function (){

           var tmpdate=$(this).datepicker('getDate');
           var launchdate= tmpdate.toLocaleDateString('en-us');  //convert date to mm/dd/yy format
           $("#launchmydate").text(launchdate);
          
           },

   });

/**FORM BUTTON CONTROLS***************************************************
* 
Submit button - */

   $('#mysubmit').click(function(e){
       e.preventDefault();

        //form entered datas
       var ledate=$('#lemydate').html();
       var tadate=$('#tamydate').html();
       var ffwdate=$('#ffwmydate').html();
       var launchdate=$('#launchmydate').html();
       var reason=$('#reason').val();

        var NewDates={LE:ledate,TA:tadate,FFW:ffwdate,Lnch:launchdate};


       //if any fields are blank kick this back to user to populate.  
       //does not validate dates (yet)
       if(!(ledate===''||tadate===''||ffwdate===''||launchdate===''||reason==='')){
            
           var txtToSave='LEdate changed to:' +ledate+'\n FFW date: '+ffwdate+'\n tadate: '+tadate +' \n Launch date: '+launchdate+'\n Reason for change: '+reason;

           if(confirm(txtToSave)){
               
                GetListItem(ItemID,siteURL,srcListName,srcIntName,tIntName,srcListFldVal)

                    .done(function(mylist){
                        srcListFldVal['ProjName']=mylist.get_item(srcIntName['ProjName']);
                        srcListFldVal['LE']=mylist.get_item(srcIntName['LE']);
                        srcListFldVal['FFW']=mylist.get_item(srcIntName['FFW']);
                        srcListFldVal['TA']=mylist.get_item(srcIntName['TA']);
                        srcListFldVal['Lnch']=mylist.get_item(srcIntName['Lnch']);
                
                        $("#lemydateold").text(srcListFldVal['LE'].toLocaleDateString('en-us'));
                        $("#ffwmydateold").text(srcListFldVal['FFW'].toLocaleDateString('en-us'));
                        $("#tamydateold").text(srcListFldVal['TA'].toLocaleDateString('en-us'));
                        $("#launchmydateold").text(srcListFldVal['Lnch'].toLocaleDateString('en-us'));
                        
                        NewListItem(siteURL,TargetListName, tIntName,mylist,srcIntName)
                
                        .done(function(newlistitem){

                            UpdateListItem(ItemID,siteURL,srcListName,srcIntName,NewDates)
                            return;
                        })
            
                    .then(function(mylist){
                        alert('at the last then');
                    })
                    .catch(function(error){
                    
                        alert('some error');
                    })
                    
                    });
                    
                   
               /**Disable button */
               $('#mysubmit').attr("disabled",true);


           }else{
               
                txt='you pressed Cancel';
           };
       }else{
               MissingInfo();   
       }
   });

   $('#hideschedchange').click(function(e){
       e.preventDefault();
       $('#myfields').hide();

   });
   $('#showschedchange').click(function(e){
       e.preventDefault();
       $('#myfields').show();

   });


   /**END BUTTON CONTROLS */



   function MissingInfo(){
       alert('You must select new dates and provide a reason for the changed dates. ');
   }

}); //End document load function 

/*********************************************************************** */
/**update list item handler */
function GetListItem(myID,siteURL,srcListName,srcIntName,tIntName,srcListFldVal) {  
    
    //this needs to reflect update actions
        var ctx = new SP.ClientContext(siteURL);
        this.list = ctx.get_web().get_lists().getByTitle(srcListName);
        this.listitem = list.getItemById(myID);    
        ctx.load(listitem);

        ctx.executeQueryAsync(  
            Function.createDelegate(this,this.OnSuccessG),
            Function.createDelegate(this,this.OnFailG),
        );  
  
     return getitem.promise();
}
   
    function OnSuccessG(args)    {
        
        getitem.resolve(listitem);
    }  

    function OnFailG(args) {
        console.log('An error occured while retrieving list items:' + args.get_message());  
        //Reject your object here  
        getitem.reject(sender,args);  
    }  

/**update list item handler */
function UpdateListItem(myID,siteURL,srcListName,tIntNames,newdates) {  
    
    //this needs to reflect update actions
        var ctxU = new SP.ClientContext(siteURL);
        var olist = ctxU.get_web().get_lists().getByTitle(srcListName);
        this.olistitem = olist.getItemById(myID);    
       
        //for some reason js doesn't like using my DateConver within the set_item so this is here to 
        //set the date vars, convert, and use them in the update. Wierd!
        var LE=DateConvert(newdates['LE']);
        var FFW=DateConvert(newdates['FFW']);
        var TA=DateConvert(newdates['TA']);
        var Lnch=DateConvert(newdates['Lnch']);

        olistitem.set_item(tIntNames['LE'], LE);
        olistitem.set_item(tIntNames['FFW'],FFW);
        olistitem.set_item(tIntNames['Lnch'],Lnch);
        olistitem.set_item(tIntNames['TA'],TA );
        
        console.log('LIst items are set');
        
       olistitem.update()
        console.log('Update list item object set');

        
        ctxU.executeQueryAsync(  
            Function.createDelegate(this,this.OnSuccessU),
            Function.createDelegate(this,this.OnFailU),
        );  
  
     return updateitem.promise();
}
   
    function OnSuccessU(sender,args)    {
        

        alert('item update success');
        updateitem.resolve(olistitem);
    }  

    function OnFailU(sender,args) {

        //Reject your object here  
        alert('Update failed'+  args.get_stackTrace());
  
    }  

/**New list item handler */
function NewListItem(siteURL,tlistname, tIntNames, srclistitem,srcIntNames) {  
    
     
    var ctxNew = new SP.ClientContext(siteURL);
    var tlist = ctxNew.get_web().get_lists().getByTitle(tlistname);
    var itemCreateInfo=new SP.ListItemCreationInformation();
    this.tListItem = tlist.addItem(itemCreateInfo);

   
    tListItem.set_item(tIntNames['ProjName'], srclistitem.get_item(srcIntNames['ProjName']));
    tListItem.set_item(tIntNames['LE'], srclistitem.get_item(srcIntNames['LE']));
    tListItem.set_item(tIntNames['FFW'], srclistitem.get_item(srcIntNames['FFW']));
    tListItem.set_item(tIntNames['Lnch'], srclistitem.get_item(srcIntNames['Lnch']));
    tListItem.set_item(tIntNames['TA'], srclistitem.get_item(srcIntNames['TA']));
    tListItem.set_item(tIntNames['Reason'],$('#reason').val());
 
   
    tListItem.update();
    ctxNew.load(tListItem);
    ctxNew.executeQueryAsync(  
        Function.createDelegate(this,this.OnSuccessN),
        Function.createDelegate(this,this.OnFailN),
    );  
  
     return newitem.promise();
}
   
    function OnSuccessN(args)    {
       
        newitem.resolve(listitem);
    }  

    function OnFailN(args) {
        console.log('An error occured while retrieving list items:' + args.get_message());  
        //Reject your object here  
        newitem.reject(sender,args);  
    }  



/**Get ID from selected item URL when user selects item from the Project list */   
function GetItemID(mylink){
    var myid=mylink.substring(mylink.indexOf("?")+1,mylink.indexOf("&"));
    var ItemID=myid.substring(myid.indexOf("=")+1);
    return ItemID;
}
/** End get list handler */

//Converts a date in mm/dd/yyyy format to a javascript object date
function ConvertDate(somedate){
    return new Date(somedate);

}

function DateConvert(somedate){
    
    var mynewdate=new Date(somedate);
    var utcdate=mynewdate.toUTCString();
    console.log('new date is '+utcdate)
    return utcdate;
}

You have to debug your code in IE F12 tool. See whether any error or NullReference return. If possible, you may post your code here. — Mark L, Sep 29, 2020 at 2:54

Stack Exchange Network

SharePoint 2013 custom JS not working in IE11 list view

0

Your Answer

Browse other questions tagged
2013
javascript
jquery
browser-compatibility
ie-11
or ask your own question.

Hot Network Questions

SharePoint 2013 custom JS not working in IE11 list view

0

Know someone who can answer? Share a link to this question via email, Twitter, or Facebook.

Your Answer

Sign up or log in

Post as a guest

Browse other questions tagged 2013javascriptjquerybrowser-compatibilityie-11 or ask your own question.

Related

Hot Network Questions

Browse other questions tagged
2013
javascript
jquery
browser-compatibility
ie-11
or ask your own question.