Question

I have an array that I want to pass to a javascript onclick function.

                var event_data = new Array();
                event_data.push(event_id);
                event_data.push(event_title);
                event_data.push(channel_id);
                event_data.push(channel_name);
                event_data.push(channel_onclick);
                event_data.push(event_site);
                event_data.push(event_url);
                event_data.push(event_onclick);
                event_data.push(start_date);
                event_data.push(start_time);
                event_data.push(end_date);
                event_data.push(end_time);
                event_data.push(event_notes);

I send that array in the onclick event of a button.

var span_string = '<span id=\"dt'+event_id+'\">'+print_span+'<br/><button href="#" onclick="edit_event('+event_data+');" style="width: 49px;">Edit</button><button href="#" onclick="delete_event();" style="width: 49px;">Delete</button></span>';
var event_id_string = 'mn'+event_id;
$('#'+event_id_string).append(span_string);

The onclick function isn’t called at all with that code. Is there a different way to do call that function with the event_data array?

function edit_event (event_data) {
/* function edit_event () { */
    alert ('edit event'); 
    var event_id = event_data[0];
    var event_title = event_data[1];
    var channel_id = event_data[2];
    var channel_name = event_data[3];
    var channel_onclick = event_data[4];
    var event_site = event_data[5];
    var event_url = event_data[6];
    var event_onclick = event_data[7];
    var start_date = event_data[8];
    var start_time = event_data[9];
    var end_date = event_data[10];
    var end_time = event_data[11];
    var event_notes = event_data[12];

    var alert_string = 'event id '+event_id+'<br/>'+
    'event title '+event_title+'<br/>'+
    'channel id '+channel_id+'<br/>'+
    'channel name '+channel_name+'<br/>'+
    'channel onclick '+channel_onclick+'<br/>'+
    'event site '+event_site+'<br/>'+
    'event url '+event_url+'<br/>'+
    'event onclick '+event_onclick+'<br/>'+
    'start date '+start_date+'<br/>'+
    'start time '+start_time+'<br/>'+
    'end date '+end_date+'<br/>'+
    'end time '+end_time+'<br/>'+
    'notes '+event_notes+'<br/>';

    alert (alert_string);
}

Answer 1

I ended up with this approach.

Make events data a global variable.

var events_data;

Pass event_id to the edit_event() function.

var span_string = '<span id=\"dt'+event_id+'\">'+print_span+'<br/><button href="#" onclick="edit_event(\''+event_id+'\');" style="width: 49px;">Edit</button><button href="#" onclick="delete_event();" style="width: 49px;">Delete</button></span>';

Get event data for selected event_id in the edit_event function.

    function edit_event (event_id) {
        for ( var i=0; i<events_data.event_id.length; i++ ) { 
            var site = "";
            var onclick =  "";
            if ( event_id == events_data.event_id[i]["0"] ) {
                  .
                  .
                  .
            }
         }
     }