Hi Guys,
This is my first time blogging and i am excited.
I have seen so many guys out there trying to bring in JQuery to browser enabled infopath forms in Sharepoint. Is this even possible?
The answer is YES.
Steps:
1). There is a core.js file loaded when you open your browser enabled infopath form. This is our key to success. Location of the file for me is http://sitename/_layouts/inc/core.js and may differ for you guys.
2). Get the head tag of the page.
var head = document.getElementsByTagName('head')[0];
3). Including jquery in head tag.
var script1 = document.createElement('script');
script1.type = 'text/javascript';
script1.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js';
head.appendChild(script1);
4). Include one more .js file in head where you can write your jquery code.
var script2 = document.createElement('script');
script2.type = 'text/javascript';
script2.src = '/_layouts/inc/customjs.js';
head.appendChild(script2);
5). Include .css file for styling in the head section.
var style1 = document.createElement('link');
style1.rel = 'stylesheet';
style1.type = 'text/css';
style1.href = '/_layouts/inc/CustomCss.css';
head.appendChild(style1);
6). Verify whether your jquery document ready works by writing the following in customjs.js file
$(function(){
alert('It Works');
});
7). IMPORTANT - Your infopath form is loaded to browser after the document ready function is called hence your controls in infopath are still undefined.
Solution:
window.onload = function() {
window.setTimeout(readyCall, 1000);
}
function readyCall(){
alert('It works');
}
readyCall is a function which is called after a delay of 1 second and within that time your infopath form should be loaded else increase the delay. Now there is no need to write JQuery's document ready. Write all your code in the function you call after window.setTimeout.
8). WARNING!! - The core.js file is loaded for all your infopath forms in your site hence including customjs.js file might create serious problems. So, before including the customjs.js file, verify your url first and include the file.
Use this in core.js file to check your URL
if(window.location = "/*URL of infopath form*/")
{
//include jquery, javascript and css file.
}
Now you can use jquery to make ajax calls to get data into your forms or add fading effects, animations etc. The use is endless. Remember, Use this only if you cannot get something to work in infopath the normal way.
Please do let me know if there is a better way to do this.
Happy to receive your suggestions and comments. Happy Coding :-)
