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">
//vot开发者_如何学JAVAing 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.
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.
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.
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/)
精彩评论