current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.
up vote 0 down vote favorite

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);
}
share|improve this question
2  
O_o Why do you use push, when you can create an array with all items right away using var event_data = [event_id, event_title, ...]; ? –  Rob W Mar 8 '12 at 20:43
    
You seem to be using jQuery, so why are you using inline event handlers in your html? jQuery's event binding methods like .on() have a mechanism to pass data to an event handler. (If you use "View Source" within your browser you'll see why your current method doesn't work.) –  nnnnnn Mar 8 '12 at 20:49

5 Answers 5

up vote 1 down vote

I see you're using jQuery, you could do it something like this:

Html

<span id="mySpan">Stuff</span>

JS 

$('#mySpan').click(function(){
    edit_event(event_data);
});
share|improve this answer
    
I have several <span> tags. With that approach event data ends up being the same for all the span. –  user823527 Mar 8 '12 at 23:43
up vote 1 down vote

You're passing it in as a string with single quotes, you should be passing it as the object.

onclick="edit_event(event_data);"
share|improve this answer
up vote 1 down vote accepted

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"] ) {
                  .
                  .
                  .
            }
         }
     }
share|improve this answer
up vote 1 down vote 
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>json pass</title>
        <script type="text/javascript" src="ga/jquery.min.js"></script>

<script type="text/javascript">
                var mydata =    [{ 
                            newsid: '10001', 
                            sectionName : 'SLIDESHOW',
                            title : 'The picture of slide show..',
                            slideShow : true,
                            slideShowID : [ 
                                            "image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg", 
                                            "gallery-1.jpg", "gallery-2.jpg", "gallery-3.jpg", "gallery-4.jpg", "gallery-5.jpg", "gallery-6.jpg", "gallery-7.jpg"
                                          ],
                            level : 0
                        }];

            function testMyFn(fnData) 
            {   
                $.each(fnData, function (key, value) {
                    alert(value);
                });
            }               

            $(function(){
                $('#myFnDiv').html("<a href='#' onclick='testMyFn(mydata[0].slideShowID);' >Get Test fn</a>")   
            });

</script>
</head>
<body>

<div id="myFnDiv">dsd</div>

</body>
</html>
share|improve this answer
up vote 0 down vote

You usually don't want to specify events in your html. Instead, assign a click event:

var event_data = ...;
$('#dt' +event_id).click(function(e){

  // put your click logic here

  // now you can access your array here by closure
  event_data.doSomething();
};
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.