jquery php json list

Question

I have got a website where people can share activities just like Twitter, users can Like them and Comment them.

Basically there is a filter that filters the list on date, so for example, show me all activities from today, what will happen is we make a request to our ajax controller, and it will send me the json for each activity based on the filter criteria, I got that all working.

How it works now is, when you press a filter criteria for example "today activities" we call the javascript method LoadActivities(filter); and it will just call the json, parse it and display all activities, now the question is what would be the best way to handle Likes and Comments, how I got it in mind was:

Each like button has the id "ActivityLike_{ACTIVITY_ID}" then make a click event, and split by '_' and voila got the id of the activity, but once the user pressed the like button, it needs to re-render a single activity on the page, because "like" has to change to "not like anymore" etc. Same with commenting.

So how do I build this list, not using splits '_' and other nasty solutions, but how can I do this in a proper clean way? Same question with jQuery "live" events, are they good to use or is there a work around?

Thanks for reading.

Grim... · Accepted Answer · 2012-02-07 10:45:11Z

2

live() is now depreciated, and you should use on() instead.

http://jqapi.com/#p=on

To avoid splits, you could use jQuery's data() method, which would be something like

<input id="myButtonId" type="button" data-activityLike="{activityLike}">

which you can get in jQuery with

var activityLike = $("input#myButtonId").data('activityLike');

This is only valid HTML in HTML5, however.

answered Feb 7, 2012 at 10:45

Grim...

17k7 gold badges47 silver badges62 bronze badges

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

Comments

Matt · Accepted Answer · 2012-02-07 11:29:52Z

1

Firstly it seems you're building an application which is heavily reliant on JavaScript, and does very little in terms on progressive enhancement. If this is a well thought out decision, then cool.

One thing I would recommend is to make use of data-* attributes rather than fiddling around with splitting the ID. Instead of ActivityLike_ID have a class of ActivityLike, and give each of those elements a data-id attribute of the Id. You then have;

$(document).on('click', '.ActivityLike', function () {
    var theId = $(this).data('id');
});

Awesome.

Because you've got simple cases of like <--> unlike and comment <--> remove comment this should be easy to do in JavaScript. You can add a class to the element when one of the states is selected, or can set a(nother) data attribute. A simple check in your code will let you know what to render the link as.

If there's a chance of more complicated manipulation occurring in future, you may be interested in letting the server control what to change in the page (as it's likely the server has more context on the request than the client).

Let the server return a data structure like this;

[
    {
        "selector": "#something",
        "operator": "append",
        "params": ["<div>Hi</div>"]
    }
]

I.e. an array of objects which map to jQuery operations. The selector describes the jQuery selector, the operator is the jQuery method to call and the params attribute is an array of parameters to pass the method.

In the response handler for your AJAX request you can then do;

for (var i=0;i<response.length;i++) {
    var curr = response[i];

    jQuery.fn[curr.operator].apply($(curr.selector), curr.params);
}

To handle those operations.

As a concrete example, to give the HTML to unlike an activity, the server could respond with;

[
    {
        "selector": ".like[data-id=\"activityId\"]",
        "operator": "html",
        "params": ["you liked this activity, click to unlike"]
    }
]

Note that params must be an array (in this example it only has one element).

edited Feb 7, 2012 at 11:29

answered Feb 7, 2012 at 10:45

Matt

75.4k26 gold badges156 silver badges181 bronze badges

3 Comments

randomKek Over a year ago

I like this solution thanks! If I understand well? The user has 3 activities, he likes the second activity, the server returns: selector -> .like, data-id -> activityId, operator -> html, params -> 'you liked this activity, click to unlike'

Matt Over a year ago

@MikeVercoelen: Almost. I've updated my answer to include the response the server should return to do that.

randomKek Over a year ago

awesome gonna play with this, thanks for your answer dude really helped me! :)

Collectives™ on Stack Overflow

jquery php json list

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related