How to make a Javascript AJAX function (w/ JQuery) to work with onclick?

I'm not sure what your problem is, but this is how I would handle it. Note that this avoids the issue when the post id is alphanumeric since it appends it to the href and extracts it from there. Note that the it starts hidden and is displayed only if javascript is enabled (which is required to make it work anyway).

I'm not sure what your problem is, but this is how I would handle it. Note that this avoids the issue when the post id is alphanumeric since it appends it to the href and extracts it from there. Note that the it starts hidden and is displayed only if javascript is enabled (which is required to make it work anyway).

To find your problem you should consider adding an error handler and using Firefox/Firebug to view the requests (and responses) as they are made. ");" style="display: none'">Like Post An alternative to support both javascript/non-javascript enabled browsers Note: your backend code needs to be able to distinguish between AJAX and non-AJAX requests. Note you can do this using the X_REQUESTED_WITH header (HTTP_X_REQUESTED_WITH) added by jQuery when making AJAX calls.It is possible to spoof so be careful how you use this check -- like not basing any authentication or authorization decisions on it.

When you get an AJAX request, just return the HTML snippet. For non-AJAX you'll need to render the entire page again.");">Like Post.

I really, really like this way of adding the $post_id to the href tag (which is just going to be # anyway, as I'm making a JS required web app). With the id added to the href, I don't have to play around with substring with the element ID. However, is this considered a completely acceptable way to storing the post id?

– Eric Jan 14 '11 at 17:54 @Eric - since it won't be shown unless you have javascript enabled, using the href in this way should be ok. If you wanted it to be usable with and without javascript, then I'd make the href the actual url for that particular post and simply reuse it. I'll update with another example.

Note that the example I show won't work, but isn't illegal since you don't/can't have a numeric id. – tvanfosson Jan 14 '11 at 18:27 @Eric - you could also use a custom attribute say, post_id="" and then use var post_id = $(this). Attr('post_id');.

It won't validate, but it will typically work. Browsers are pretty forgiving with HTML. – tvanfosson Jan 14 '11 at 18:35 I thought about the idea of a custom attribute like that.

These days with web apps, 100% validation isn't a big deal anyway. I may play around with that too. Currently I implemented the href version of your answer, works great!

– Eric Jan 14 '11 at 18:48.

The best way is binding functions to onclick (or . Click in jQuery) event by jQuery . Bind, .

Live or . Delegate functions.

First of all if you are using jQuery, you don't need to use onclick attribute of anchor tag(it feels very obtrusive). Try this syntax: >Like Post.

Here is what I normally do to fix this problem: In your PHP, when you need to loop out the posts and generate the links, assign unique ids for the anchors, like this: foreach ($posts as $post) { echo "Like Post"; } Then in your JS code, you can do this: $(document). Ready(function() { $('. Like-anchors').

Click(function() { var id = $(this). Attr('id'). Substring(10); $.

Get("domain/likes/like/"+id, function(data) { $('#post-'+id+'-like'). Html(data); }); }); }); Note You are not making use of post or any advance Ajax functions. $.

Get should be enough. Feel free to comment on this. Using href="javascript://" because I don't want the browser to scroll to top Even better, you can just assign a global id to the wrapper div, so you won't exhaust your ids.

Says if I have post, content, and like button, I would do this: PHP "> Like This Post JS $(document). Ready(function() { $('. Post-like').

Click(function() { var parent = $(this).parent().parent(); var id = parent. Attr('id'). Substring(5); $.

Get("domain/likes/like/"+id, function(data) { parent. Children('. Post-content').

Html(data); }); }); }); There are many ways to complete the task. These are just my 2 cents Cheers.

Good call on the $. Get (or $. Post too I guess!).

If I'm not making use of any advanced $. Ajax functionality, might as well short form it. – Eric Jan 14 '11 at 17:55 Also, great idea for the global div.

Makes things a lot easier and more generic. Only issue is using parent().parent(), does this slow things down in JQuery at all? What do you think of tvanfosson's comment of adding the id to the HREF attribute?

– Eric Jan 14 '11 at 17:56 Not sure. I think you never specify what is the final result that you want it to be, so his method of making the href is for scrolling-to-post purpose. Btw I scanned your question again I didn't see what you are trying to do when a user click on Like Post Perhaps you can elaborate more :) Cheers!

– Lionel Chan Jan 14 '11 at 18:11 Oh, regarding the .parent().parent(), no I don't think it would slow thing down, since this piece of code is triggered only when the user click on Like Post. Furthermore, the parent of an element is exactly the only one parent of the element so there will be no looping or searching, hence should be fast. – Lionel Chan Jan 14 '11 at 18:40 Ah good call on the parent() issue.

You're right about no looping, so it should definitely be fast. I just remembered reading a while back about the big hit you take with a class versus an ID with JQuery selecting. – Eric Jan 14 '11 at 18:49.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.