Javascript / Jquery functions

Question

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

Have an external js page (on an external server)
Include the page - OK that is easy etc...
Have a Jquery function on the external page - well actually many functions
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?

you are doing it fine , as along the page loads befire you call your testit you should be good. — kobe
– kobe, Commented Dec 1, 2010 at 16:59
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? — idrumgood
– idrumgood, Commented Dec 1, 2010 at 17:00
@rmap , you are doing it fine , as along the page loads befire you call your testit you should be good — kobe
– kobe, Commented Dec 1, 2010 at 17:01
@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. — rmap
– rmap, Commented Dec 1, 2010 at 17:19

Mark Baijens · Accepted Answer · 2010-12-01 17:08:07Z

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.

edited Dec 1, 2010 at 17:08

answered Dec 1, 2010 at 17:01

Mark Baijens

13.3k11 gold badges51 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pointy Over a year ago

In fact the functions really should not be in the "ready" handler, or else they won't be global!

Mark Baijens Over a year ago

Your right, however it is no problem if they only get called after the onready

Eric Over a year ago

@Pointy: Yep, that is the problem. The functions are local to the scope of the anonymous function passed to $(document).ready(). See my answer.

Eric · Accepted Answer · 2010-12-01 17:08:44Z

0

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();
});

answered Dec 1, 2010 at 17:08

Eric

98.1k54 gold badges257 silver badges389 bronze badges

1 Comment

rmap Over a year ago

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

buddhabrot · Accepted Answer · 2010-12-01 17:00:49Z

0

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.

answered Dec 1, 2010 at 17:00

buddhabrot

1,58610 silver badges14 bronze badges

2 Comments

sunn0 Over a year ago

This was my interpretation as well

rmap Over a year ago

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

MikeWyatt · Accepted Answer · 2010-12-01 17:00:02Z

-1

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.

answered Dec 1, 2010 at 17:00

MikeWyatt

7,89111 gold badges54 silver badges71 bronze badges

Collectives™ on Stack Overflow

Javascript / Jquery functions

4 Answers 4

3 Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related