Scroll to the Mandatory Field validation – Issue with Iframe – ScrollinToView- JavaScript

Sathish Nadarajan
 
Solution Architect
April 20, 2016
 
Rate this article
 
Views
7228

Recently met with a strange small issue like setting up the focus. In one of the project, I have the AppPart and an lengthy App hosted inside that. Hence, both the SharePoint Site as well as the AppPart is having the Scroll Bars as shown in the figure.

clip_image002

Now, the issue was like at the bottom of the app, I have a submit button and on click of the submit button, the scroll should move up and focus should be set on the mandatory fields, which were not given the inputs. I tried with the asusual focus methods and the setfocus etc.,

But everything was working with the normal pages. But when I deploy inside this iFrame, nothing works. And the most important thing is, the SharePoint and the AppWeb are hosted on different domains. Since the document.domain differs, we cannot call the DOM Object.

While doing some googling, found a solution for this issue. The native JavaScript code will be very much helpful for this scenario.

Just a small div surrounding the control. Then we need to use the method scrollIntoView().

 if (($("#ddlDate").val() === "") || ($("#ddlDate").val() === "null")) {
                  document.getElementById("divDueDateCtrl").scrollIntoView();
                  
              }
 

Though it seems very small, it ate some hrs of my time to fix.

Happy Coding,

Sathish Nadarajan.

Category : JavaScript, SharePoint

Author Info

Sathish Nadarajan
 
Solution Architect
 
Rate this article
 
Sathish is a Microsoft MVP for SharePoint (Office Servers and Services) having 15+ years of experience in Microsoft Technologies. He holds a Masters Degree in Computer Aided Design and Business ...read more
 

Leave a comment