Javascript / Jquery functions

Question

Not sure if I am being totally wrong here but I want to do something like this:

1. Have an external js page (on an external server)
2. Include the page - OK that is easy etc...
3. Have a Jquery function on the external page - well actually many functions
4. Call those functions directly onto the page.

All a bit like this:

External js page:

$(document).ready(function() {
function testit() {
$('#test').load('page.php');
}
function testit_1() {
$('#test_1').load('page_1.php');
}
function testit_1() {
$('#test_2').load('page_2.php');
}
});

Then on the actual page just call:

<script type="script/javascript">
 testit();
</script>
<div id="test"></div>

Am I wrong or should that not work?

• kobe: you are doing it fine , as along the page loads befire you call your testit you should be good.
• idrumgood: Your current code would load page.php's content into the <div id="test"></div>. Are you saying that, within page.php, there is code to run testit_1, and on page_2.php to run testit_2?
• kobe: @rmap , you are doing it fine , as along the page loads befire you call your testit you should be good
• kobe: i changed my comment as answer , hmm
• rmap: @idrumgood - simple - no just need to call the page/pages to run some php functions based on myserver that do not exist on the site where the function is called. Hence JQuery .load therefore using the AJAX bits from it.

Answer 1

You dont need to define the functions within the ready function, but you have to call it within the ready function.

$(document).ready(function() {
 testit();
});
function testit() {
 $('#test').load('page.php');
}
function testit_1() {
 $('#test_1').load('page_1.php');
}
function testit_2() {
 $('#test_2').load('page_2.php');
}

Otherwise testit() will be called before the document is loaded. And at that moment the function doesn't even exist yet in your example.

• Pointy: In fact the functions really should not be in the "ready" handler, or else they won't be global!
• Mark Baijens: Your right, however it is no problem if they only get called after the onready
• Eric: @Pointy: Yep, that is the problem. The functions are local to the scope of the anonymous function passed to $(document).ready(). See my answer.

Answer 2

Your functions are local to the scope of the anonymous function passed as the argument to $(document).ready(). Here's a simple example showing the behaviour you're seeing:

(function() {
 function foo() {
 alert("It shouldn't alert this...");
 }
})();
foo();

To fix it, simply move your function declarations outside of the ready function:

function testit() {
 $('#test').load('page.php');
}
function testit_1() {
 $('#test_1').load('page_1.php');
}
function testit_2() {
 $('#test_2').load('page_2.php');
}

And use the ready function (shorthand $(function() { ... })) in your main js file:

$(function() {
 testit_1();
});

• rmap: many thanks for the And use the ready function (shorthand $(function() { ... })) - just what I wanted as well.

Answer 3

I'm not sure if I'm understanding you wrongly, but will you load an external page of an external server? This is not possible on normal browser security settings. You cannot perform a succesful XMLHttpRequest for a document that resides on a different server. Nearly all browsers will block this and leave you with nothing. You would have to write a server-side proxy that fetches the document and serves it back to the client.

• sunn0: This was my interpretation as well
• rmap: Hi "you 2" - buddhabrot & sunn0 - you have me "intrigued" by using jQuery I can use the AJAX functions to call an external page from an external server? - no - I have tested it and so far seems OK. Interested to hear if I am totally "off base" here. All I need to do is call "test.js" from my server and then call "page.php" from the same server - page PHP has php functions on it that link to "my servers" database. What I want/wanted was a "nice easy" way for my site "members" to call those functions

Answer 4

That should work fine. Just be sure to include the external JS file in your page and execute testit() inside another $.ready() call:

<script type="script/javascript" src="http://someurl.com/external.js"></script>
<script type="script/javascript">
 $.ready( function() {
 testit();
 } );
</script>
<div id="test"></div>

The location of a JS file is irrelevant. Once it is loaded into your page, it is executed in the context of that page.