in my project I m writing functions in different external JS files. the aim is to make some of them general (i.e. like messaging) and accessible by forms or other js files. Now once I place these functions inside "document.ready or its Jquery equivalent"
I can no longer call these functions from outside.
What happens if I ignore document.ready in my scripts?
if there is a side effect or harm, how can I go around it.
I have an example below
First JS File
/*Msging.js*/
function ExeJFn(JFn, JFnArg) { /*function to exe. function or functions by string name*/
if (JFn !== '') {
if (JFn.indexOf(';')>0) {
var FnArray = JFn.split(';')
var FnArgs = JFnArg.split(';')
var l = FnArray.length
for (i = 0; i < l; i++) {
window[FnArray[i]](FnArgs[i]);
}
}
else {
if (!JFnArg == '') {
window[JFn](JFnArg);
}
else {
console.log(JFn)
window[JFn]();
}
}
}
}
function MsgConf(code, Title, Message, JFnYes, JFnYesArg, JFnNo, JFnNoArg) { /*Confirmation Message function*/
$.confirm({
title: Title,
content: Message,
type: MsgCode(code),
icon: MsgCodIcon(code),
draggable: true,
alignMiddle: true,
theme: 'dark',
backgroundDismiss: false,
escapeKey: false,
//backgroundDismissAnimation: 'glow',
typeAnimated: true,
animation: 'RotateYR',
closeAnimation: 'RotateXR',
buttons: {
Yes: {
text: 'Yes',
btnClass: 'btn-' + code,
action: function () {
ExeJFn(JFnYes, JFnYesArg)
}
},
No: {
text: 'No',
btnClass: 'btn-' + code,
action: function () {
ExeJFn(JFnNo, JFnNoArg)
}
},
Cancel: {
text: 'Cancel',
btnClass: 'btn-' + code,
action: function () {
}
}
}
});
}
Second js File
/*Form-x js functions*/
$("#btn2").click(function () {
MsgConf('warning', 'delete', 'are you sure that you want to mark the selected record(s) for delete?', 'markdelete', '', '', '')
return false;
})
function markdelete() { /*Function related to Datatables Jquery API*/
var md= PrtTbl.rows({ selected: true }).every(function (rowIdx, tableLoop, rowLoop) {
PrtTbl.row(this).cell(rowIdx, 7).data('delete').draw()
var row = PrtTbl.row(this).node();
$(row).css('color', 'red').animate({ color: 'black' });
PrtTbl.rows(this).deselect();
});
return md;
}
A scientist shouldn’t be asked to judge the economic and moral value of his work. All we should ask the scientist to do is find the truth and then not keep it from anyone
“Arthur Kornberg”
Document ready is a handler that runs once the DOM is loaded in the browser. Since the browser loads item from the top down, use .ready() when you are referencing DOM elements in script where the script is loaded before the elements.
Embryologist
What happens if I ignore document.ready in my scripts?
That depends on your design. I suggest that you learn scope and closures in JavaScript.
I will be defining all my var outside the document.ready function and call them from within
A scientist shouldn’t be asked to judge the economic and moral value of his work. All we should ask the scientist to do is find the truth and then not keep it from anyone
“Arthur Kornberg”
Member
117 Points
241 Posts
document.ready function
Jun 04, 2017 04:35 AM|Embryologist|LINK
Dear All,
Simple question.
in my project I m writing functions in different external JS files. the aim is to make some of them general (i.e. like messaging) and accessible by forms or other js files. Now once I place these functions inside "document.ready or its Jquery equivalent" I can no longer call these functions from outside.
What happens if I ignore document.ready in my scripts?
if there is a side effect or harm, how can I go around it.
I have an example below
First JS File
/*Msging.js*/ function ExeJFn(JFn, JFnArg) { /*function to exe. function or functions by string name*/ if (JFn !== '') { if (JFn.indexOf(';')>0) { var FnArray = JFn.split(';') var FnArgs = JFnArg.split(';') var l = FnArray.length for (i = 0; i < l; i++) { window[FnArray[i]](FnArgs[i]); } } else { if (!JFnArg == '') { window[JFn](JFnArg); } else { console.log(JFn) window[JFn](); } } } } function MsgConf(code, Title, Message, JFnYes, JFnYesArg, JFnNo, JFnNoArg) { /*Confirmation Message function*/ $.confirm({ title: Title, content: Message, type: MsgCode(code), icon: MsgCodIcon(code), draggable: true, alignMiddle: true, theme: 'dark', backgroundDismiss: false, escapeKey: false, //backgroundDismissAnimation: 'glow', typeAnimated: true, animation: 'RotateYR', closeAnimation: 'RotateXR', buttons: { Yes: { text: 'Yes', btnClass: 'btn-' + code, action: function () { ExeJFn(JFnYes, JFnYesArg) } }, No: { text: 'No', btnClass: 'btn-' + code, action: function () { ExeJFn(JFnNo, JFnNoArg) } }, Cancel: { text: 'Cancel', btnClass: 'btn-' + code, action: function () { } } } }); }Second js File
“Arthur Kornberg”
All-Star
52201 Points
23278 Posts
Re: document.ready function
Jun 04, 2017 11:53 AM|mgebhard|LINK
Document ready is a handler that runs once the DOM is loaded in the browser. Since the browser loads item from the top down, use .ready() when you are referencing DOM elements in script where the script is loaded before the elements.
That depends on your design. I suggest that you learn scope and closures in JavaScript.
https://developer.mozilla.org/en-US/docs/Glossary/Scope
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
Member
117 Points
241 Posts
Re: document.ready function
Jun 04, 2017 03:37 PM|Embryologist|LINK
Thanks so much,
I totally got it now
I will be defining all my var outside the document.ready function and call them from within
“Arthur Kornberg”