How to get dynamic post ID or value in a jquery script

Question

I'm working on a little wordpress plugin "rate my whatever". This plugin works well on single posts but on blog page when there is several posts the plugin is not able to see from which post id the click has been done. It always takes the page's firt post value.

I have added post id to id and class names to solve the issue (e g : post_id$post->ID) but now I'm blocked edting the jquery file in this way.

the php code of a post vote item :

 <input type=\"hidden\" id=\"post_id$post->ID\" value=\"" . $post->ID . "\" />
    <div class=\"vote\">
<table>
    <tr><td>
    <a class=\"vote_up\" href=\"#\"></a></td>
<td>
    <a class=\"vote_down\" href=\"#\"></a></td></tr>
    <tr>
<td class=\"up_perc$post->ID\">" . get_percentage(1, $post->ID ) ."%</td>
<td class=\"down_perc$post->ID\">" . get_percentage(2, $post->ID) . "% </td>
</tr>
    </table></div>

 <div class=\"vote_succ$post->ID\"></div>

The jquery code (for vote up, vote down is pretty the same) :

jQuery(document).ready(function($) { 


        $(".vote_up").click(function(e) { 
        e.preventDefault();

        $.post('/wp-content/plugins/rate-my-whatever/rate.php', {vote_type: "1", post_id: $("#post_id1").val()}, function(data) {

            $(".vote_succ1").html(data);
            $.post('/wp-content/plugins/rate-my-whatever/rate.php', {action: "getPercentage",  vote_type: "1", post_id: $("#post_id1").val()}, function(data2) {
                $(".up_perc1").html(data2);
            });
            $.post('/wp-content/plugins/rate-my-whatever/rate.php', {action: "getPercentage", vote_type: "2", post_id: $("#post_id1").val()}, function(data3) {
                $(".down_perc1").html(data3);
            });
        });
    });

I put staticly "1" after some id and class elements to check how my problem would be solved, it works fine with Post 1 which id and value are "1", now I need to replace the "1" at the end of #post_id, .vote_succ, .up_perc, .down_perc by dynamic code to make it work with dynamic elements generated by the php code.

Thanks for your help.

Answer 1

You need to change your code so that it operates on the unit that was clicked on, not on all objects of that class in the entire page. The easiest way to do that is to put each unit in a container div like this and use only class names, no ID values:

<div class=\"voteUnit\">
    <input type=\"hidden\" class=\"post_id\" value=\"" . $post->ID . "\" />
    <div class=\"vote\">
    <table>
        <tr>
            <td><a class=\"vote_up\" href=\"#\"></a></td>
            <td><a class=\"vote_down\" href=\"#\"></a></td>
        </tr>
        <tr>
            <td class=\"up_perc\">" . get_percentage(1, $post->ID ) ."%</td>
            <td class=\"down_perc\">" . get_percentage(2, $post->ID) . "% </td>
        </tr>
    </table>
    </div>

    <div class=\"vote_succ\"></div>
</div>

And, then change the code to find the relevant object in the same voting unit that was clicked on by using $(this).closest('.voteUnit').find() to find the object in the clicked-on voting unit rather than looking in the whole web page and finding objects in all voting units. .closest('.voteUnit') looks up the ancestor chain from the item clicked on until it finds a parent with the class=voteUnit. The code can then use that as the sub-tree to search for the other objects in the vote unit.

jQuery(document).ready(function($) { 
    $(".vote_up").click(function(e) { 
        var unit$ = $(this).closest('.voteUnit');
        e.preventDefault();

        $.post('/wp-content/plugins/rate-my-whatever/rate.php', {vote_type: "1", post_id: unit$.find(".post_id").val()}, function(data) {

        unit$.find(".vote_succ").html(data);
        $.post('/wp-content/plugins/rate-my-whatever/rate.php', {action: "getPercentage",  vote_type: "1", post_id: unit$.find(".post_id").val()}, function(data2) {
            unit$.find(".up_perc").html(data2);
        });
        $.post('/wp-content/plugins/rate-my-whatever/rate.php', {action: "getPercentage", vote_type: "2", post_id: unit$.find(".post_id").val()}, function(data3) {
            unit$.find(".down_perc").html(data3);
        });
    });
});