javascript - how to call a function newly added from ajax

Question

I have a coding difficulty which have been asked in this forum before:

Calling a JavaScript function returned from an Ajax response

But I didn't find the answers quite satisfying. To be more precise of the problem I'm dealing, here is the detail:

I dynamically load a document (HTML and javascript) using jquery

var url = 'document.php';
$('#container').load(url);

Example of what the document.php looks like:

<form>
    <input name="firstname"></input>
</form>
<script>
    function dosomething()
    {
        console.log($('input[name=firstname]').val());
    }
</script>

*The dosomething() function is the one I'd like to call later

And then I want to call the functions from that document.php. Due to my requirement, I don't want to call the function after the documents' loaded, but rather to call it later when I need it. Because it was dynamically loaded, the DOM doesn't recognize the functions. How to properly call this function?

Thank you

You mean there are script elements with functions inside which you want to call? — Madara's Ghost, Jun 24 '12 at 21:11
that name is callback function, you can find more at jquery.com documentations — mohammad falahat, Jun 24 '12 at 21:16
if all the html from remote is being loaded, that function should be accesible — charlietfl, Jun 24 '12 at 22:20
@charlietfl unfortunately newly added elements or functions are not automatically added to the DOM (CMIIW) , javascripters usually work with newly added elements using 'delegate/on/live' method of jquery or other js framework :D but how to call a newly added function? :D that's the question — strike_noir, Jun 24 '12 at 22:32
if function is global it does indeed get added, can look at DOM tab in Firebug and see it, and call it also right from console or another event handler... as long as you call it after it exists and new script doesn't have errors. As for elements added to DOM.. all elements get added, you are confusing event handlers for future elements when you talk about delegation — charlietfl, Jun 24 '12 at 22:39

charlietfl · Answer 1 · 2012-06-24T22:14:14.100

1

the DOM doesn't recognize the functions

This sounds like your other functions are wrapped in $(document).ready() in the remote page. If that is the case they are out of scope for you to call them from code in the main page and you need to move them out of the ready handler to make them globally accessible.

EDIT: Other possibilities

Script tags in head- move to body after html, or use $.getScript in ajax callback to retrieve

edited Jun 24 '12 at 22:14

answered Jun 24 '12 at 22:02

charlietfl

170,828
13
121
150

my functions are wrapped in a normal tag (in the document.php) not in $(document).ready() if that's what you mean :) – strike_noir Jun 24 '12 at 22:08
then `DOM doesn't recognize` doesn't make sense... are they in the head? if so look at using $.getScript, or move them below the html – charlietfl Jun 24 '12 at 22:10
does your load method include a css selector after the url to look for in remote page? `load('page.php #someId')` – charlietfl Jun 24 '12 at 22:18
the script are loaded into a div container (so they are definitely not in the head :D) and I don't include a css selector after the url :D – strike_noir Jun 24 '12 at 22:29
no ideas sorry, I just tried a simple test worked fine. Called the function from console after loaded other page. Any erorrs in console after load? – charlietfl Jun 24 '12 at 22:35

score 0 · Answer 2 · answered Jun 24 '12 at 22:31

I think that you're trying to implement the technique called on-demand javascript (or lazy-loading). In other words, your page should initially load just a small script - but use a bunch of objects and functions, which are available in some other files, but will be loaded when they're required.

If that's the case, I have to warn you: you'll probably need to update your existing code. Instead of just calling some function right as it is, in all gun-blazing glory, you should check for its existence first - and if it's not available, wait for its loading:

if (typeof lazyObjects.someLazyFunction !== 'function') {
  lazyLoad('lazyFunction.js');
}
lazyObjects.someLazyFunction();

The key point here is that lazyLoad should be synchronous. In other words, you'll have to wait until the script containing your function is actually loaded. Otherwise someLazyFunction just won't be defined when it's called, even with this sort of checks.

lazyFunction.js, in turn, will contain some code that will alter lazyObjects, adding to them the required method as a property:

// in lazyFunction.js
lazyObjects.someLazyFunction = function() { ... }

While it's technically possible to use global (=window) object for these cases, I usually don't do this - and won't recommend doing it either.

See, it's not that simple. ) I'd recommend reading this article to find out more about this technique - and actually using some established components to implement it in your code (some of them are mentioned in the linked article).

javascript - how to call a function newly added from ajax

2 Answers2