CODEWITHSUNDEEP
phpjquery
user1661548
user1661548

Reputation:

Pass multiple values to jQuery

I built a for each loop that pulls back several rows from the database. Each row it pulls has a link, and a hidden input box with a value of posting_id. This link will work similar to a like button on facebook in a way. The hidden input box just stores the posting_id. When you click the "like" link, it sends over the posting_id to a jQuery page and pings back a page called community to tell it the user has "liked" the post.

Here's the problem

I'm pulling several rows, and it seems that only the top row being pulled is actually sending the data to the jQuery page when you click the "like" button. If I click on any other "like" button other than the top one it will not work at all.

Jquery Page

$('.bump_link').click(function(){ 
    var posting_id = $('.posting_id').val();    
    $.post("community.php", {
        posting_id: posting_id
    });
    alert(posting_id);
    $(this).toggleClass("bumped"); 
});

Foreach Loop

foreach ($result as $value) {
    $group_postings .= '
    <input type="text" class="posting_id" value="'.$value['posting_id'].'"> 
    <div id="bump_icon" class="bump_link"></div>
    <span id="counter"></span>
    ';
}

I hope I've made the issue clear, it was and is difficult to explain.

Upvotes: 3

Views: 1076

Answers (5)

Perinparajah Prasath
Perinparajah Prasath

Reputation: 41

The problem is you are using a class to get the posting_id, since all the hidden fields have the same class only the first elements value is passed no matter what button you click.

i recommend using this html, without the hidden input, pass the value as a data attribute

<div id="bump_icon" class="bump_link" data-postid="'.$value['posting_id'].'">

and in this js, get the posting id from the data attribute

$('.bump_link').click(function(){ 
   var posting_id = $(this).data('postid'); // get the posting id from data attribute
   $.post("community.php", {
       posting_id: posting_id
   });
   alert(posting_id);
   $(this).toggleClass("bumped"); 
});

Upvotes: 2

bipen
bipen

Reputation: 36531

use on delegated event since you are adding the content dynamically and

$(this).prev('.posting_id') // to get the posting data value

$(document).on('click','.bump_link',function(){ 
  var posting_id = $(this).prev('.posting_id').val(); //<-- use $(this)  reference 
  $.post("community.php", {
      posting_id: posting_id
  });
 alert(posting_id);
 $(this).toggleClass("bumped"); 
});

Upvotes: 0

SteveP
SteveP

Reputation: 19093

Your problem is this line:

var posting_id = $('.posting_id').val();

This will return the first posting_id value every time, not the one associated with the bump_link you are clicking on.

There are lots of ways to solve this. One way is to use .prev() to select the previous element:

var posting_id = $(this).prev('.posting_id').val();

this selects the previous posting_id element from the current div. This relies on the fact that the posting_id element is before the associated bump_link div.

Upvotes: 1

ulentini
ulentini

Reputation: 2412

If you want to send just the posting_id of the clicked button, you could change your PHP/HTML code like this:

foreach ($result as $value) {
    $group_postings .= '
    <div id="bump_icon" class="bump_link">
    <input type="text" class="posting_id" value="'.$value['posting_id'].'"> 
    </div>
    <span id="counter"></span>
    ';
}

And your JS code like this:

$('.bump_link').click(function(){ 
    var posting_id = $(this).find('.posting_id').val();    
    $.post("community.php", {
        posting_id: posting_id
    });
    alert(posting_id);
    $(this).toggleClass("bumped"); 
});

Upvotes: 0

Adil
Adil

Reputation: 148110

You are calling val() on selector you might return more then one elements, but val() will give you the value of one (first) element only. You can use map() to get all values of input having class posting_id

var posting_id_values = $('.posting_id').map(function(){
       return this.value;
}).get().join(',');

Upvotes: 1

Related Questions