Pass JavaScript function in ajax response

Question

I'm trying to return a callback from an AJAX submitted form. The user submits a form, the server processes and returns the valid response, i.e. an error message and also a JavaScript function that could perform an action. I'm using Zepto.js faling back to jQuery depending on browser.

My ajax request is:

$.ajax({
    success: function(data, status, xhr) {
        data.callback();
    },
    url: form.attr('action'),
    data: form.serialize(),
    dataType: 'json'
});

On the server I want to return something like:

// PHP code
?>
{
    return: false,
    error: 'Sorry, we couldn’t find an account with that username or password.',
    callback: function() {
        console.log('this is the callback');
    }
}
<?php
// more PHP code

When returned to the browser callback function should fire. I want the server to return the callback so I can use the same JavaScript code and have it respond accordingly to the server response.

Would I need to change the dataType to script? However I thought this was just for loading .js files, not blocks of code.

Any help appreciated.

It is not good idea for security to send callbacks via ajax. And - Why you cannot choose what to do in JavaScript ? — SergeS
– SergeS, Commented Jul 13, 2012 at 13:50
@SergeS I was just thinking it's easier to keep my callback messages, actions etc where they happen on the server. So I could add them all to a .js file with a name, or ID, then in PHP return that name or ID and call it in success? — Ric
– Ric, Commented Jul 13, 2012 at 14:09
Yes, this is better way (Use switch to choose action, so nothing unwanted can be called) — SergeS
– SergeS, Commented Jul 14, 2012 at 10:57

Ric · Accepted Answer · 2012-07-13 14:57:12Z

1

The general feeling here is I am approaching this in the wrong way. So revised code:

$.ajax({
    success: function(data, status, xhr) {
        var callback = data['callback'];
        callback();
    },
    url: form.attr('action'), // in this example it's badLogin
    data: form.serialize(),
    dataType: 'json'
});
// callback specified in PHP
badLogin: function() {
    console.log('bad login');
}

And my PHP

if (!$valid) {
?>
{
    "return": false,
    "error": "Sorry, we couldn’t find an account with that username or password.",
    "callback": "badLogin"
}
<?php
}

Thanks for pointing me in the right direction.

answered Jul 13, 2012 at 14:57

Ric

3,5081 gold badge36 silver badges52 bronze badges

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

2 Comments

David Winiecki Over a year ago

You don't get an error like "Uncaught TypeError: string is not a function"? I do.

David Winiecki Over a year ago

But I think you can do something like var callback = data['callback']; objectWithBadLoginMethod[callback]();

MMM · Accepted Answer · 2012-07-13 13:50:00Z

0

You can always return the code as a string and use eval() if you are absolutely sure that the string will always be correct and no code can be injected.

answered Jul 13, 2012 at 13:50

MMM

7,3402 gold badges27 silver badges42 bronze badges

4 Comments

jbabey Over a year ago

This is basically the only way to accomplish this, unfortunately.

Ric Over a year ago

I have tried doing this but it's proved very problematic. I'm starting to think that I should use a totally different method that's more secure and 'cleaner'.

MMM Over a year ago

I would basically question the need of returning code by the server. Why can't you just write a set of functions that will respons to certain parameters? Haven't you got a finite number of things that can happen after the server returns a message?

Ric Over a year ago

@MMM Agreed. I was thinking it would be simpler but I whichever way I achieve it I still need to write the functions somewhere.

Collectives™ on Stack Overflow

Pass JavaScript function in ajax response

2 Answers 2

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related