How to use jQuery Alert Dialogs in Netsuite SuiteScript?

As per my finding, Netsuite till now hasn’t provided any straight forward way (API) to implement jQuery in SuiteScripts. So, you need to follow a deceitful way to get the jQuery stuffs done in your Netsuite screen.

In this Tip I’m going to show how to use a ‘jAlert’ in Netsuite screen, lets see how it goes:-

1) In this example we need 3 files:-

-jquery.min.js 
-jquery.alert.js 
-jquery.alert.css

You can host these files in your Netsuite account (File Cabinet) or use any CDN to refer.

2) Create a Client script .js file whose function will be called in the ‘Page Init’ function. In this function you can write code to add the above 3 files into thehtml DOM of the Netsuite pages.

>>Code:-

function OnPageInit() 
{ 
AddJavascript('http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js', 'head'); 
var t = setTimeout("AddJavascript('https://system.netsuite.com/core/media/media.nl?id=253&c=TSTDRV896291&h=c3fc87f394f396552e09&_xt=.js', 'body')", 3000); 
AddStyle('https://system.netsuite.com/core/media/media.nl?id=254&c=TSTDRV896291&h=50d488b82c3c3ed7263c&_xt=.css', 'head'); 
}

function AddJavascript(jsname, pos) 
{ 
var tag = document.getElementsByTagName(pos)[0]; 
var addScript = document.createElement('script'); 
addScript.setAttribute('type', 'text/javascript'); 
addScript.setAttribute('src', jsname); 
tag.appendChild(addScript); 
}

function AddStyle(cssLink, pos) 
{ 
var tag = document.getElementsByTagName(pos)[0]; 
var addLink = document.createElement('link'); 
addLink.setAttribute('type', 'text/css'); 
addLink.setAttribute('rel', 'stylesheet'); 
addLink.setAttribute('href', cssLink); 
tag.appendChild(addLink); 
}

 
In the ‘OnPageInit’ function, we are first adding the ‘jquery.min.js’ (google CDN) and then we are using ‘setTimeout’ method for doing a time out of few seconds before adding the 2nd script. This is because, when the page gets loaded it will first download the ‘jquery.min.js’ script might take some time, for this reason when the second script ‘jquery.alert.js’ gets loadedit might show ‘jquery undefined’ error. To avoid this we can use the ‘setTimeout’ to delay the adding of the ‘jquery.alert.js’ script in the page’s DOM. After that the CSS is also added to it. In this code we have hosted the ‘jquery.alert.js’ and ‘jquery.alert.css’ in the Netsuite’s ‘File Cabinet’ folder.

3) Now deploy the client script. Lets say you have deployed it for ‘Customer’ record. Now, we can test if ‘jAlert’ is working for the Customer record screen or not.

4) Suppose, you write a client script function which will be called in the ‘Save Record’ event of the ‘Customer’ screen.

>>Code:- 
function OnSaveRecord() 
{ 
jAlert('Custom Alert Box Test', 'This is a jAlert Box!'); 
}

5) Now test in the Customer screen if both the ‘Page Init’ and ‘Save Record’ functions are working fine or not.
If you have got some other tricks of using jQuery in Netsuite’s SuiteScripts then please do mention below.