JQuery separate js files
I have two separate js files:
//first.js
$(document).ready(function(){
$("#someButton").click(function(event){
showMessageBox("test");
});
});
and the second
$(document).ready(function(){
alert('csdfsdf');
function showMessageBox(msg) {
alert("something");
$('#messageBox').text(msg);
$('#messageBox').dialog('open');
}
$("#messageBox").dialog({
bgiframe: true,
autoOpen: false,
height: 200,
width: 300,
modal: true,
buttons: {
'Ok': function() {
$(this).dialog('close');
window.location.reload(true);
}
}
});
});
The showMessage () function in the second file, which I would like to use in other jquery-style js files like in the first. The problem is that I am getting an error stating that showMessage () is undefined when I try to use it.
This happens with any other function I call that is in a separate jquery style file. If the showMessage () function is not inside $ (document) .ready (function () {.....}); then it gets called, but then it is not applicable with jquery.
I also make sure that the file containing the showMessage () function is loaded before the file that calls it.
Any help would be appreciated.
Thank.
source to share
From what I can see you are using the wrong function name in your call, the function is declared showMessageBox
and you are calling showMessage
. Also, you need to declare the function outside the block document.ready
, so it is available in the global context.
A function declared from one block document.ready
cannot be accessed from other blocks document.ready
, I have already done this test. See Answer:
You have multiple $ (document) .ready (function () {...}); section?
source to share
You define showMessage in a second function document.ready
, and so it is only scoped in that function (well, that's not strictly true, but it definitely isn't scoped in the other document.ready function).
The solution is to move it to an area that both functions can access. The easiest way to achieve this is to place it outside of the other features that give it global reach.
Getting the name correct ( showMessage
vs showMessageBox
) often helps.
source to share
Try to reorganize how your functions work. You can have the first "util.js" file, for example (outsite and without document.ready function):
function showMessageBox(msg,msgBox) {
alert("something");
$(msgBox).text(msg);
$(msgBox).dialog('open');
}
And then, in the files you want:
//first.js
$(document).ready(function(){
$("#someButton").click(function(event){
showMessage("test","#messageBox");
});
});
I would say, because you load this function after loading the document, there is a priority issue for calling it on the first file while it is not loaded into memory yet (even if you put that file first). The output of the document.ready () function allows it to be defined as soon as it is read by the browser and at the global scale.
source to share
Try the following code. Basically, mainstream your showMessage function and use it anywhere. You were defining showMessage inside the $ (document) .ready () scope, making it unusable from the outside.
//first.js
function showMessage(msg) {
$('#messageBox').text(msg);
$('#messageBox').dialog('open');
}
$(document).ready(function(){
$("#someButton").click(function(event){
showMessage("test");
});
});
$(document).ready(function(){
$("#messageBox").dialog({
bgiframe: true,
autoOpen: false,
height: 200,
width: 300,
modal: true,
buttons: {
'Ok': function() {
$(this).dialog('close');
window.location.reload(true);
}
}
});
});
source to share
I just came across this still unresolved issue via google to post a solution:
If you have 2 different ready-made blocks and want to call a function that is located in another ready-made block, just define the called function a little more global.
This can be done using window.YourFunctioName=function(){...}
.
In your case, the solution is to define a more global mailbox: `$ (Document) .ready (function () {
window.showMessageBox=function(msg) {...
`
source to share