Question

I’m working on a site that allows users to love an item (like an item). The event is handled with jQuery and AJAX. The item array holds quite a lot of items and each item has a button to ‘love’. I decided to efficiently reduce the number of forms on the page by putting one form at the bottom of the page and just submit it remotely.

So every time a user clicks the love button, the data attribute that holds the item id is put into the form and the form is submitted. Simple stuff.

But I’m finding the data response a bit more complex because I don’t know how to find the element id of the item I want to update. I can’t just use this or event.target because its inside a different event. I’ve also tried to carry the event parameter into the submit event, but it didn’t work.

  $(".love_item").click (event) ->
    $(".love_item_item_id").val $(this).data 'id'
    $(".love_item_form").submit()
    $(this).hide(200)

  $("form.love_item_form").submit (evt) ->
     evt.preventDefault()
     $form = $ @
     $form.find(':submit').prop 'disabled', true
     $.post($form.attr('action'), $form.serializeArray(), type: 'json').done (data) ->
       $(event.target).parent().find(".item_info_box").html data

The last line, where it says event.target is as far as I’ve got. Its obvious that this variable is not carried, but I don’t really know what to place there to achieve my goal. Also, I know that I could pass additional parameters through the form action (in other words send them to the rails controller and back), but I’d rather not. Any ideas?

Answer 1

You don’t need an abitrary form at all. Something like this would work:

Example Markup (notice the data attribute):

<a href="#" data-id="2" class="likeable">Item to like</a>

jQuery:

$('a.likeable').on('click', function() {
    var $item = $(this);
    var id = $item.data('id');

    $.post('url/like/' + id, function() {
      // success
      // do something with $item here.
    });
});