Multiple instances of jQuery on same page

Question

I have a list of items on a page dynamically generated - I can get the $itemid of each one easily enough.

I am trying to setup a vote for each one but I can't make the instances different enough for the instances of the vote links not to get confused with each other, and the page is trying as you would expect, to post all the items to my vote.php page

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function()
    {
        $(".submitVote a").click(function()
        {
            var ID = <?php echo $itemid;?>;
            var add = 1;
            var votedby = <?php echo $usr_id ;?>;
            var rating = <?php echo $ratings;?> 

            var queryString = 'id='+ ID +'&votedby='+votedby +'&add='+add +'&rating='+rating;
            $("#vote").text(rating+1); 

                $.ajax({
                type: "POST",
                url: "vote.php",
                data: queryString,
                cache: false,
                success: function(html)
                {

                    $(".submitVote").html('<p style="margin:1px;padding:0px;"></p>');
                    $("#greet").html("Thanks for voting!");
                    $("#greet").delay(500).fadeOut(5000);

                }
                });
        });
    });
</script>

    <div id="<?php echo $itemid;?>" style="width:350px;">
        <span class="submitVote" >
            <p style="margin:1px;padding:0px;">
                Submit your <a href="#">vote</a>
            </p>
        </span>
        <div id="voteBox">
            <div id="vote<?php echo $itemid;?>"> <?php echo $ratings;?> </div>
            <span style="color:#fae240;">votes</span>
        </div> 
        <div id="greet" style="padding-left:65px;"></div>
    </div>

Your question is not at all clear, but I suspect that you could make progress by taking advantage of the fact that when jQuery calls your event handler, this is bound to the DOM element involved. Thus, as long as your PHP code is putting distinct "id" values, and storing other information in "data-" attributes, the event handler can form the appropriate HTTP request. — Pointy
– Pointy, Commented Feb 17, 2013 at 18:17
Sorry I did not explain better...how do I tie in the $this with the above. In ts current for all the elements on the page are posting to the post.php page — Steve Brown
– Steve Brown, Commented Feb 17, 2013 at 18:41
Use PHP to put the information in the HTML, not in the JavaScript. You didn't post what the HTML looks like so I can't give details. — Pointy
– Pointy, Commented Feb 17, 2013 at 18:45
Unfortunately that doesn't really help me becuase of my lack of experience. If I only have once instance of the code above it works, but multiple instances of code (one for each picture that I want to vote for) it kills it — Steve Brown
– Steve Brown, Commented Feb 17, 2013 at 18:59
You only need one copy of that JavaScript code (or code like it) - it can service all the elements on the page. (I just noticed the HTML below the script; hold on and maybe I can post a good answer, or at least a starting point.) — Pointy
– Pointy, Commented Feb 17, 2013 at 19:04

Pointy · Accepted Answer · 2013-02-17 21:53:02Z

1

OK, in your HTML:

<div id="<?php echo $itemid;?>" style="width:350px;">
    <span class="submitVote" >
        <p style="margin:1px;padding:0px;">
            Submit your <a href="#">vote</a>
        </p>
    </span>
    <div id="voteBox">
        <div id="vote<?php echo $itemid;?>"> <?php echo $ratings;?> </div>
        <span style="color:#fae240;">votes</span>
    </div> 
    <div id="greet" style="padding-left:65px;"></div>
</div>

(well, your PHP that generates your HTML) you're already putting an item id somewhere. What you could do is add it to the <a> so that it's easier to find in the "click" handler:

    Submit your <a href='#' data-item-id='<?php echo $itemid;?>' data-ratings='<?php echo $ratings;?>' data-user-id='<? php echo $usr_id; ?>'>vote</a>

The user id could probably be stashed just once, but I'll leave it like that for simplicity. By doing that, everything you need for casting a vote is right there on the <a> itself. That's useful because your event handler will be called with that DOM node as this. Thus, you only need the JavaScript code in your page once — or, better, it can be in a separate file you import.

$(document).ready(function()
{
    $(".submitVote a").click(function()
    {
        var $clicked = $(this);
        var $voteBlock = $clicked.closest('.submitVote');
        var ID = $clicked.data('item-id');
        var add = 1;
        var votedby = $clicked.data('user-id');
        var rating = $clicked.data('ratings'); 

        var queryString = 'id='+ ID +'&votedby='+votedby +'&add='+add +'&rating='+rating;
        $("#vote").text(rating+1); 

            $.ajax({
            type: "POST",
            url: "vote.php",
            data: queryString,
            cache: false,
            success: function(html)
            {

                $voteBlock.html('<p style="margin:1px;padding:0px;"></p>');
                $("#greet").html("Thanks for voting!");
                $("#greet").delay(500).fadeOut(5000);

            }
            });
    });
});

Those calls to .data() extract the values from those three "data-" attributes in the <a>.

edit — I updated the function above to make sure that only the <a> that's clicked gets zapped after a vote. I added the variable "$voteBlock", which will be the parent <span> of the <a>. (By the way, it's not really correct HTML to put a <p> inside a <span>, but it probably won't cause drastic problems. You could replace the <span> with <div> but whatever.)

edited Feb 17, 2013 at 21:53

answered Feb 17, 2013 at 19:29

Pointy

415k62 gold badges600 silver badges632 bronze badges

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

5 Comments

Steve Brown Over a year ago

Thanks for taking the time to help a newbie - I give it go shorty..Steve

Steve Brown Over a year ago

Tried that but the values are not being passed out (add works 'cause it's hard coded) id undefined rating undefined votedby undefined The post is better ie only one, not one for each item

Pointy Over a year ago

Well check what the HTML looks like with "view source" or with the browser debugger. Make sure that the <a> tags really have those "data-foo-bar" attributes.

Steve Brown Over a year ago

Yep it was the revised <a> tag that did not match up with the names of the variables. Thanks. The data is being saved to the db correctly. The only problem left is that all the voting buttons get refreshed and therefore I can not vote on another item without reloading the page

Pointy Over a year ago

Ah OK I think I see; it's that line in the ajax success handler. Give me a sec to stare at it and I'll update the answer.

Collectives™ on Stack Overflow

Multiple instances of jQuery on same page

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related