根据搜索结果执行不同的操作

Question

I have a form with a lot of inputs (text inputs, textareas, checkboxes...) that users can populate with their own presets. At the moment, users can search for their presets, an ajax query is called and I return HTML with a list of found presets. The HTML is (elaboratly) generated in a PHP file that adds an onclick="" with lots of different actions. The users can click the presets and the form gets populated.

An example of generated HTML (that gets put in the page) could be

<a onclick=" $('#AgendaItemName').val('Preset 1');  $('#AgendaItemOpmerking').val('');  $('#AgendaItemLokaalID').val('');  $('#AgendaItemPlaats').val('');  $('#AgendaItemBegeleidendeLeerkrachten').val('');  $('#AgendaItemDoelgroep').val('');  $('#AgendaItemIsPubliek').val('1');  $('#AgendaItemLesFicheAbonnementID').val('');  $('#AgendaItemAgendaItemTypeID').val('2');  $('#AgendaItemAgendaItemPublicatieTypeID').val('');  $('#AgendaItemLeergebiedID').val('1');  $('#AgendaItemLeerdomeinID').val('1');  $('#AgendaItemLessenTaken').val('');  $('#AgendaItemVerloop').val('Test verloop

test opslaan vanuit agendaitem');  $('#AgendaItemBeginsituatie').val('');  $('#AgendaItemMateriaal').val('');  $('#AgendaItemEvaluatie').val('Test evaluatie');  $('#AgendaItemEigenLesdoelen').val('Test lesdoelen');  $('#AgendaItemAgendaItemHerhaalModeID').val('');  $('#AgendaItemHerhaalStartDatum').val('');  $('#AgendaItemHerhaalEindDatum').val('');  $('#AgendaItemAgendaItemKleuterModeID').val('0');  UpdateVisibleFields('AgendaItem');$('.HoekVeldInput').val('');$('#AgendaItemAgendaItemBelangstellingsCentrumID').val('');  $('#AgendaItemLesFicheID').val('791');  $('#AgendaItemIsBestaandeFicheAanpassen').attr('disabled', false); loadFieldsets(791, 'LesficheID'); return false; " href="#">Preset 1</a>

You don't actually have to fully read that piece of code, cuz it's... well, not so good. Most of the times it's just setting values, but sometimes, I also need to execute a few functions, depending on preset settings. Now I was thinking about a better way to approach this, but I'm stuck. Is there any way to send these actions along with JSON? Is it possible to do something like

var returndatafromajax = [
    {
        "html" : "<a href='#' rel="0">preset</a>",
        "actions" : "dothis(); dothat();"
    },
    {
        "html" : "<a href='#' rel="1">preset 2</a>",
        "actions" : "someofthis();"
    },
    {
        "html" : "<a href='#' rel="2">preset 3</a>",
        "actions" : "noneofthat();"
    }
]

$('ul').on('click', 'a', function() {
    var index = $(this).attr('rel');
    somehowexecute(returndatafromajax[index].actions);
});

Answer 1

Yes you can do this in this way

var returndatafromajax = [
    {
        "html" : "<a href='#' rel="0">preset</a>",
        "actions" : {"1":"dothis","2":"dothat"}
    },
    {
        "html" : "<a href='#' rel="1">preset 2</a>",
        "actions" : {"1":"someofthis"}
    },
    {
        "html" : "<a href='#' rel="2">preset 3</a>",
        "actions" : {"1":"noneofthat"}
    }
]

use only function names not the (); with their names.