0

I have a custom form that I use an HTML file and JS file to span the fields that I designate and populate in the HTML fields. It has been working fine up until Friday, when the fields seem to not populate correctly. I deleted the files and reloaded the HTML and JS files with different names and placed them back in the CEWP, and although it looks like it is working for me, it is still malfunctioning for the end user.

I'm not sure if its the JS file or a permissions issue. I checked to make sure that the end user does have permissions to the HTML and JS files in Site Assets. Does anyone have any idea of some troubleshooting I could do? Like I said, this has been working fine until Friday afternoon of last week.

JS File:

<script src="//code.jquery.com/jquery-1.10.1.min.js"></script>

<style type="text/css">
  .ms-formtable
  {display:none;}
</style>

<script type="text/javascript">
    $(document).ready(function() {
        //loop through all the spans in the custom layout        
        $("span.hillbillyForm").each(function()
        {
            //get the display name from the custom layout
            displayName = $(this).attr("data-displayName");

            displayName  = displayName.replace(/&(?!amp;)/g,'&amp;');
            elem = $(this);
            //find the corresponding field from the default form and move it
            //into the custom layout
            $("table.ms-formtable td").each(function(){
                if (this.innerHTML.indexOf('FieldName="'+displayName+'"') != -1){
                    $(this).contents().appendTo(elem);
                }
            });
        });
    });
</script>

HTML File:

<center><img src="https://<site>/sites/hhintranet/SiteAssets/hhc_logo1.png"/>
<h1>DSME Appointment Form</h1></center><br>
<table cellpadding="5" cellspacing="3" >
    <tr>
        <td>
            <b>Patient Name:</b><br>
            <span class="hillbillyForm" data-displayName="Patient Name"></span>
        </td>
          <td> <b>Attendance:</b><br>
            <span class="hillbillyForm" data-displayName="Attendance"></span>

        </td>

    </tr>
       <tr >
        <td>
            <b>Phone Number:</b><br>
            <span class="hillbillyForm" data-displayName="Phone Number"></span>

        </td>
              <td>
            <b>Appointment Status:</b><br>
            <span class="hillbillyForm" data-displayName="Appointment Status"></span>
        </td>   
    </tr>
    <tr>

            <td>
            <b>Class:</b><br>
            <span class="hillbillyForm" data-displayName="Class"></span></td>

            <td>    <b>Instructor:</b><br>
            <span class="hillbillyForm" data-displayName="Instructor"></span>

        </td>   

    </tr>
    <tr>
        <td>    <b>Start Time:</b><br>
            <span class="hillbillyForm" data-displayName="Start Time"></span>

        </td>
            <td>    <b>End Time:</b><br>
            <span class="hillbillyForm" data-displayName="End Time"></span>

        </td>
    </tr>
     <tr>
        <td>    <b>Location:</b><br>
            <span class="hillbillyForm" data-displayName="Location"></span>

        </td>
            <td>    <b>Recurrence:</b><br>
            <span class="hillbillyForm" data-displayName="Recurrence"></span>

        </td>
    </tr>
    </table>

    <br><br>
    <table cellpadding="5" cellspacing="3" >
    <tr>
        <td>    <b>Participants:</b><br>
            <span class="hillbillyForm" data-displayName="Participants"></span>


        </td></tr>
    </table>
  • To make things even stranger with this... the user is able to "Add" the item with the fields not showing. Then on the calendar it shows (No Title). She clicks on the item, it displays, she hits "Edit" and then the empty form fields appear and she is now able to enter the information. All three forms use the same HTML and JS files. What in the world!? – cbbrown Aug 21 '17 at 18:55
  • Are you on SharePoint Online or 2013? If you can put a screenshot of the error that would be helpful? – SharePointer Aug 21 '17 at 20:21
  • @SharePointer - SharePoint Online, and it doesn't show an error. Sometimes it works, and sometimes it doesn't. And that is with me having Full Control permissions. However, for the end user, it just doesn't work at all. – cbbrown Aug 21 '17 at 20:57
  • Please share the Js/html code used – SharePointer Aug 21 '17 at 21:19
  • 1
    Press F12 and check the developer tool from end user and see if it shows any error. One more thing you can try is copy the jquery in SiteAsset and link it rather than calling it from cdn. It might be cross domain issues – SharePointer Aug 22 '17 at 15:22
0

Did you forget to publish the files (js/css). If the SiteAssets are checked out, then you need to publish them in for other users to see them.

Also, ensure it's not a caching issue with old js/css files. Depending on your browser you should verify the cache is being flushed correctly.

Forgot to mention, in case you're unfamiliar, try Chrome with F12 (developer tools) to ensure the user is receiving all of the custom files. If your files are not minified, you can even view the files from their perspective to ensure they're getting the correct ones.

Last ditch effort, add console.log statements to your javascript to ensure they're firing. If they are, you may be able to narrow the problem to a specific line of code. If they aren't you know the files aren't being received by users for whatever reason.

  • The files were checked in. The strange thing about this is, that the end user has been using this form since May and this is the first issue that we have ever heard. It is just with the "New Item Form" Once the blank new item is on the calendar, the user can go into it and edit it with the HTML and JS working fine, and it saves just as its supposed to. – cbbrown Aug 22 '17 at 14:48
  • Did you try using developer tools to dig further? If this is a client-side style changeup (to make the form look/feel better) it should be something you can track down using client-side dev tools. Look for missing files (ie. 404, 401, etc.) or add console.log('test') statements at key points in your JS to verify it makes it to those parts. – Chad Aug 22 '17 at 17:00
0

I've run into problems with the 'hillbilly' style code where rich text fields didn't populate correctly. Going into an EditPage wouldn't show the data. I had to change the fields from rich text to enhanced rich text (these were from a list created in SharePoint 2010). I never found out the underlying reason - it seemed to be some kind of timing issue but never really gave a hard answer.

When you're running through your JQuery, when you are getting the original field, make sure it doesn't pick up multiple values - you know, the problem when you look for 'Description' and you've got 3 columns that use that text. You might need something like this:

    //find the corresponding field from the default form and move it
    //into the custom layout
    // we have multiple fields with 'description' in the name
    // also Completed By
    x = (displayName=='Description'? 1: 0);
    x = (displayName=='Completed By'? 1: x)
    x = (displayName=='Scan Requested'? 1 : x)
    thiscontent = $("nobr:contains('" + displayName + "')").eq(x).parents('tr:first').find('td').eq(1).contents();

Also, there's css in there to hide the original table structure - maybe while you are debugging remove the style

   .ms-formtable
  {display:none;}

and see if your missing fields are still down there. If they are, then the move didn't work.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.