How can you dynamically load Javascript functions using Ajax?

Question

(Rhetorical Question)

I ran into a bizarre scenario today where I wanted PHP to update how the javascript behaved on-the-fly. It was irritating, here is what I tried...

/*
 * ajax-php-javascript-function-loader.php
 *
 * this gets called by AJAX and defines or re-defines the 
 * definition of dynamicDoStuff()
 */
 <script type="text/javascript">
     function dynamicDoStuff(a,b){
          <?php
          //dynamically defined function behavior
          ?>
     }
 </script>

This did not work because when the new javascript was loaded, it's scope of the new function definition was limited to the new script tags. Scripts elsewhere on the page couldn't read it.

So here is what you have to do.

/*
 * index.html
 */
 <html>
     <head>
        <script type="text/javascript">
           var dynamicDoStuff;
        </script>
        <!-- Other Head Stuff -->
     </head>
     <body>
         <!-- the body of the site -->
     </body>
 </html>

and

/*
 * axax-php-javascript-function-loader.php
 */
 <script type="text/javascript">
     dynamicDoStuff = function(a,b){
         <?php
         //dynamically define function behavior
         ?>
     }
 </script>

by defining the name of the function in the header it becomes globally accessible so you can re-purpose it dynamically using ajax and (php or whatever)

The behaviour you describe is dependent on how the contents of the <script> tags inside the ajax response are eval() 'd. For example, jQuery would not have this issue because it takes your script and evals it in the global context. — Roatin Marth
– Roatin Marth, Commented Jan 25, 2010 at 21:53
@Roatin Right, but the problem is not that i cannot access global functions, it is that I can't create them. Unless I'm misunderstanding you and there is alternative method for locally declaring functions in the global space that has not been listed here. @wheaties it's not a question, it's how to solve the question in the title. (sharing knowledge and all that. you know?) — Brooks
– Brooks, Commented Jan 28, 2010 at 23:12

Pointy · Accepted Answer · 2010-01-25 21:53:19Z

2

Instead of just

function newFunctionViaAjax() { ... }

you could instead use

window['newFunctionViaAjax'] = function newFunctionViaAjax() { ... };

answered Jan 25, 2010 at 21:53

Pointy

415k62 gold badges600 silver badges632 bronze badges

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

1 Comment

Brooks Over a year ago

Very nice. This avoids having to declare the function in advance.

Justin Johnson · Accepted Answer · 2010-01-26 00:12:00Z

0

A better approach may be to just have your AJAX method return data, in this case, a flag indicating which behavior your the method in question should adopt.

var ajaxResponseHandler = function(jsonResponse) {
    dynamicDoStuff = jsonResponse.someFlagFromTheServer == someExpectedValue 
         ? staticDoStuffA
         : staticDoStuffB;
};

Ideally, at least in most situations, your AJAX method should just return data anyway.

Also, with this method, you can have the required alternate behavior defined in a normal JavaScript file that is already loaded by the client, instead of mixing JavaScript in with your PHP.

answered Jan 26, 2010 at 0:12

Justin Johnson

31.3k7 gold badges67 silver badges89 bronze badges

2 Comments

Brooks Over a year ago

Obviously, this is true of most situations. In my case I was loading a Prototype window, the content of which was created by PHP. The behaviors of the elements within the Prototype window are determined by a multitude of factors including the who the user is, what they've done so far, and what they chose to look at. The simplest route was to define the behaviors on-the-fly. I can imagine other situations, especially ones that are dynamic or closed-loop, where this would be useful as well.

Brooks Over a year ago

Also... This design pattern allows a great deal of modularity as functions may be defined ambiguously and customized on-the-fly to fit a given module's agenda (allowing them to loaded and unloaded dynamically).

Collectives™ on Stack Overflow

How can you dynamically load Javascript functions using Ajax?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related