Passing an object as a function parameter in jQuery

Question

I am trying to pass a JSON element to a function, but it's not working. Any thoughts? Here is my code:

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "/smallbusiness/_assets/js/events.json",
        success: formatJson,
        error: function() {
            alert("Data file failed to load");
        }
    });
});

function formatJson (data) {

        var json = data.events.event;
        var containerList = $('#event-list');
        var containerDescrip = $('#event-descrip');
        var template = '';
        var defaultDescrip = '';

        //Format and display event list 
        $.each(json, function(i, item) {
            template += '<p><a href="javascript:void(0)" onClick="formatDescrip(' + i + ',' + json[i].title + ')">' + this.title + '</a></p>';
        });
        containerList.html(template);
}

function formatDescrip(j, jsonData) {
    alert(j);
    alert(jsonData);
}

I am trying to pass both i and json[i].title to formatDescrip() but it's throwing this error:

Error: missing ) after argument list
Source File: http://localhost/smallbusiness/webinars.html#
Line: 1, Column: 20
Source Code:
formatDescrip(3,How to Leverage Email Marketing)

What am I doing wrong? And what if I wanted to pass the entire json object? How would I go about that? It seems like it should be straightforward, but I keep getting errors.

The error is pretty clear. Look at this: formatDescrip(3,How to Leverage Email Marketing). This is not valid JavaScript. It should be formatDescrip(3,'How to Leverage Email Marketing') so you are missing quotation marks. — Felix Kling
– Felix Kling, Commented Apr 27, 2011 at 14:20
And please, please, don't use javascript:void(0) the onclick attribute anymore in 2011... My eyes are bleeding. — Capsule
– Capsule, Commented Apr 27, 2011 at 14:22
@ellenchristine if a <a> has no href, then it shouldn't be a <a> anyway, use something else: a button or just a span. That way you don't have to worry about what to put in the href attribute. About the onclick, see the accepted answer or read more about the click event handler: api.jquery.com/click — Capsule
– Capsule, Commented Apr 27, 2011 at 15:26

Pointy · Accepted Answer · 2011-04-27 15:57:18Z

2

You forgot the quotes around the title.

    $.each(json, function(i, item) {
        template += '<p><a href="javascript:void(0)" onClick="formatDescrip(' + i + ',\"' + json[i].title + '\")">' + this.title + '</a></p>';
    });

Instead of setting up the handlers that way, however, why not use jQuery's ".delegate()"?

    $.each(json, function(i, item) {
        template += '<p><a class="dynamic" data-index="' + i + '" href="#">' + this.title + '</a></p>';
    });
    containerList.delegate("a.dynamic", "click", function(ev) {
      formatDescrip($(this).data('index'), $(this).text());
    });

Or something like that; if the list is extended multiple times then the ".delegate()" call should probably be done once, outside the handler.

edit — if the "formatDescrip()" function needs access to the original "event" object (whatever those things are that you use to make the list of <a> tags), you can pass it in to "formatDescrip()" instead of the index, and then modify the other function as necessary:

    containerList.delegate("a.dynamic", "click", function(ev) {
      formatDescrip( json[$(this).data('index')] );
    });

    // ...

function formatDescrip(eventObj) {
    alert(eventObj.title);
    //
    // ... more code here ...
    //
}

edited Apr 27, 2011 at 15:57

answered Apr 27, 2011 at 14:23

Pointy

415k62 gold badges600 silver badges632 bronze badges

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

3 Comments

Paul Erdos Over a year ago

Your solution worked great, thanks! And I learned something new about jQuery today. :)

Paul Erdos Over a year ago

One more question...what if instead of just passing the title, I wanted to pass the entire object?

Pointy Over a year ago

Well, that that "json" array you extract from the AJAX response will still be around. The index that (in my sample) gets stashed in the "data-index" attribute of the <a> tags, well, it could be used to find the entry in that table corresponding to the <a>. Does that make sense? So, in "formatDescrip()", you'd just look up json[j] and that should be the original "event" (or whatever they are). You'd have to pass "json" to that function too, however. I'll edit the answer to be more clear.

Community · Accepted Answer · 2017-05-23 11:47:42Z

1

I already explained in my comment what is the problem (missing quotes).

But it is better to not create the HTML this way, but to create "real" elements. It is even easier with jQuery:

var $div = $('<div />');
//Format and display event list 
$.each(json, function(i, item) {
    var title = json[i].title;
    $('<p />').append(
        $("<a />", {
            href: "javascript:void(0)", // you should use a proper URL here
            text: title,
            click: function(e){
                e.preventDefault(); 
                formatDescrip(i, title);
            }
        })
    ).appendTo($div);
});
containerList.empty().append($div.children());

Update: Or maybe even better, use .delegate() as @Pointy suggests.

edited May 23, 2017 at 11:47

CommunityBot

11 silver badge

answered Apr 27, 2011 at 14:26

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

2 Comments

Paul Erdos Over a year ago

What if no proper URL makes sense?

Felix Kling Over a year ago

@ellenchristine: Then use a <button> and style it however you want it to. A link has a distinct semantic meaning.

PachinSV · Accepted Answer · 2011-04-27 14:24:52Z

0

I think that maybe you have a simple quote as part of the title and that is breaking your code. Try to scape those characters in your string or using double quotes instead simple ones.

answered Apr 27, 2011 at 14:24

PachinSV

3,7782 gold badges32 silver badges41 bronze badges

Collectives™ on Stack Overflow

Passing an object as a function parameter in jQuery

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related