?
Solved

AJAX + Dynamic Function Name

Posted on 2006-05-03
4
Medium Priority
?
1,413 Views
Last Modified: 2012-06-27
So I'm fairly new to AJAX, but I think it's pretty fun. I've been basing what I do off of Rasmus' 30-second AJAX tutorial:
http://rajshekhar.net/blog/archives/85-Rasmus-30-second-AJAX-Tutorial.html

In his quick setup, he has it so that the page being requested returns very simple data that looks like this (take a look at the handleResponse method):

element_id|data_to_be_filled

And that's just fine. It splits that data at the pipe character (|) and then fills whatever element in the document with id "element_id" with the data it retrieved. Works great. But I'd like my AJAX usage to do a little bit more, and alas, I'm not all that experienced with JavaScript to know how. Rather than returning the ID of an element that is to be filled along with some data, I'd like to return the name of a JavaScript function to be executed, along a parameter (or two). Since I can configure the page that is requested to give whatever output I want, I'll have my requested page return something like this:

function1|parameter

...or...

function2|parameter

...or...

function3|parameter

...and so on. So I'd like to modify the handleResponse method so that it will first split the data at the pipe (|), as it does already, and then execute function1(parameter), or function2(parameter), etc., which would be predefined functions somewhere in my JavaScript. I don't know if this possible. Is it possible? If so, how?
0
Comment
Question by:soapergem
  • 2
  • 2
4 Comments
 
LVL 12

Accepted Solution

by:
_Maddog_ earned 2000 total points
ID: 16601767
Hi soapergem,

well, something like that should work:

update = response.split("|");

//verify that function exists
if (typeof(eval(update[0]))!="undefined")

//run the function with the parameter
eval(update[0])(update[1]);

Maddog.
0
 
LVL 6

Author Comment

by:soapergem
ID: 16601896
Awesome! That worked. But I do have one follow-up question for you. That worked great when using just one parameter, but is there any way to modify it to allow for X parameters (X is positive)? I tried to modify it myself, but I couldn't get it to work. Still, I'll copy what I tried to do, just in case it helps you any.

function handleResponse()
{
      if ( http.readyState == 4 )
      {
            response = http.responseText;
            var update = new Array();

            if ( response.indexOf('|') != -1 )
            {
                  update = response.split('|');

                  //      verify that function exists
                  if ( typeof(eval(update[0])) != 'undefined' )
                  {
                        //      parse the parameters
                        var params = '';
                        for (i = 1; i < update.length; i++)
                        {
                              //      compile list of params, each enclosed in quotes
                              params += (",'" + update[i] + "'");
                        }
                        //      strip leading comma
                        params = params.substr(params, 1);
                        
                        //      run the function with the parameters
                        eval(update[0])(params);
                  }
            }
      }
}


I saw the line where you had "eval(update[0])(update[1]);" and figured that you could stick any comma-separated list of parameters in where update[1] was. I guess I was wrong. I'm hoping you know.
0
 
LVL 6

Author Comment

by:soapergem
ID: 16602540
Nevermind...I got it working! I realized that I could just compile a string with the command and the parameters all in one and then use eval() without the second pair of parentheses. Plus I fixed my syntax with the sub string function. What I ended up using I've included below. (And this works, but it does make the assumption that at least one parameter is present.) Thanks for your help, Maddog!


function handleResponse()
{
      if ( http.readyState == 4 )
      {
            response = http.responseText;
            var update = new Array();

            if ( response.indexOf('|') != -1 )
            {
                  update = response.split('|');

                  //      verify that function exists
                  if ( typeof(eval(update[0])) != 'undefined' )
                  {
                        //      parse the parameters
                        var command = '';
                        for (i = 1; i < update.length; i++)
                        {
                              command += ",'" + update[i] + "'";
                        }
                        //      strip leading comma
                        command = command.substr(1);
                        
                        //      finish compiling command
                        command = update[0] + '(' + command + ');';
                        
                        //      run the function with the parameters
                        eval(command);
                  }
            }
      }
}
0
 
LVL 12

Expert Comment

by:_Maddog_
ID: 16603694
I was glad to help, it was a cool idea :)
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question