CODEWITHSUNDEEP
jqueryajaxload
Nick Budden
Nick Budden

Reputation: 641

Refresh multiple div-[unique_ID]'s with jQuery and .load()?

I am working on modifying a plugin to allow users to vote on posts. My page looks something like this (though this is simplified of course):

<div class="vote vote1">
//voting buttons
</div>

<div class="vote vote2">
//voting buttons
</div>

<div class="vote vote3">
//voting buttons
</div>

<div class="vote vote4">
//voting buttons
</div>

As you can see, each voting div has a unique class associated with it, vote[id]. My trouble is that after submitting the vote to my vote.php file I need to refresh this unique voting div with the new data. I have been able to do this without trouble when I hardcode a particular voting div's unique id into .load(), but I cannot seem to get this to work dynamically for all voting divs using a single script. Would somebody be able to help me out in refreshing the unique voting div that has been clicked? 

<script type="text/javascript">
jQuery(document).ready(function(){
$(".vote a.can-vote").click(
    function() {
        var some = jQuery(this).parent();
        var thepost = jQuery(this).attr("post");
        var theuser = jQuery(this).attr("user");
        var updown = jQuery(this).attr("up-down");
        var is_update = jQuery(this).attr("update");
        var votebox = ".vote"+thepost+" span";

        jQuery.ajax({
            type: "POST",
            url: "<?php bloginfo('template_url'); ?>/vote.php",
            data: {user: theuser, post: thepost, up_down: updown, update: is_update},
            cache: false,
            success: function( data ){
                jQuery(some).load('http://mydomain.com div.vote[ID]');
            }
        });
        return false;
    });
}); 
</script>

I'm sorry if this is a simple question but I've been trying my best to figure it out for two days with no luck; thank you in advance for any help.

Upvotes: 2

Views: 2191

Answers (3)

Robbert
Robbert

Reputation: 713

My guess is that you're using the "jQuery()"-selector instead of the $()-selector in order to avoid conflicts with other Javascript libraries on the page. Yet you are using the $-selector before ('.vote a.can-vote') and not the jQuery()-alternative. This might be the cause of your script not executing well.

You are able to use the regular $-selector by using the noConflict() function. (http://api.jquery.com/jQuery.noConflict/)

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206048

If I understood well:
you can do an 'offline' trick.
Just increment the vote number with jQuery, something like in this Ex: 

var voted = 0;
$('.vote').attr('value', function() {
voted++;
return voted;
});

The change will happen in the browser. Than always on page refresh you'll get back the real state from the DB.

Upvotes: 1

Pointy
Pointy

Reputation: 413712

Hmm ... well you could find the "ID" class via a regex:

$(".vote a.can-vote").click(
    function() {
        var some = jQuery(this).parent();
        var keyClass = some.attr('className').replace(/^.*(vote\d+).*$/, '$1');

Then your ".load()" can do:

          jQuery(some).load('http://mydomain.com div.' + keyClass);

You might also consider giving the <div> elements an actual "id" value too. That'd make stuff a little easier.

Upvotes: 0

Related Questions