I'm building a simple voting thingy that'll appear in the sidebar of a college's website. The way it work's is simple. You pick who you like and that's it. It's structured like below. There's a heading, sub-heading and then candidates. Next to each candidate is the like link.
I'm stuck here: When a user clicks a like link, if what happens in demo.php is successful, then all the other like links for that sub-heading need to be taken out, so the user cannot vote for anyone else under that sub-heading anymore.
How can something like this be done when it's all built this way. If the </div> of id=h2 were moved below all the like, it'll make thing easier I feel.
I'm willing to implement changes since this is just being built.
Here's my demo.htm
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Side bar voting thingy</title>
<script type="text/javascript" src="http://localhost/site/scripts/jQueryCore.js"></script>
<script type="text/javascript">
$(function() {
$(".like").click(function() {
var hasLike = $(this).data("id");
var data = 'id='+hasLike;
console.log($(this).data('id'));
if(hasLike) {
// ajax call
$.ajax({
type:"GET",
url:"demo.php",
data:data,
beforeSend:function(html){
// We'll think of something to do here
},
success: function(page_data){
// Remove the remaining like links. How?
$('.like[data-id="'+page_data+'"]').append(page_data);
},
error: function(page_data){
$("#errors").empty();
$("#errors").fadeIn(200);
$("#errors").append('Screwed up!');
},
});
}
return false;
});
});
</script>
</head>
<body>
<div id="container">
<div id="h1" data-id="1">Teachers</div>
<div id="h2" data-id="2">Who is your favorite Math teacher?</div>
<div>* Homer Simpson   <span id="h3" class="like" data-id="3" data-sec="2">Like</span></div>
<div>* Elmer Fudd   <span id="h3" class="like" data-id="4" data-sec="2">Like</span></div>
<div>* Bugs Bunny   <span id="h3" class="like" data-id="5" data-sec="2">Like</span></div>
<div>* Obelix   <span id="h3" class="like" data-id="6" data-sec="2">Like</span></div>
<div>* Mojo Jojo   <span id="h3" class="like" data-id="7" data-sec="2">Like</span></div>
<br>
<div id="h1" data-id="8">Restaurants</div>
<div id="h2" data-id="9">Which is your favourtie restaurant in town?</div>
<div>* McDonalds   <span id="h3" class="like" data-id="10" data-sec="9">Like</span></div>
<div>* KFC   <span id="h3" class="like" data-id="11" data-sec="9">Like</span></div>
<div>* The Heart Attack Grill   <span id="h3" class="like" data-id="12" data-sec="9">Like</span></div>
<div>* In-n-Out   <span id="h3" class="like" data-id="13" data-sec="9">Like</span></div>
<div>* Popeye's   <span id="h3" class="like" data-id="14" data-sec="9">Like</span></div>
<div id="errors" style="display:none;"></div>
</div>
</body>
</html>
Here's demo.php (nothing much in here for now)
<?php
if(isset($_GET['id'])){
echo $_GET['id'];
} else {
echo 'Error! Id not found';
}
?>
First: it is not valid to have a duplicate ID! your h2 and h3s should be classes
Second: change your .click function to on()
$(".like").on('click', function() { ... };
at the end of your click function do that:
$(this).parent().parent().children('.like').off();
It's quite simple, you just need to have a class to go back "up the tree" to, and then drill down again.
For example, let's restructure your HTML a bit, it's incorrectly indented and a bit messy.
<h1 data-id="1">Teachers</h1>
<div class="sub-heading">
<h2 data-id="2">Who is your favorite Math teacher?</h2>
<div>* Homer Simpson   <span id="h3" class="like" data-id="3" data-sec="2">Like</span></div>
<div>* Elmer Fudd   <span id="h3" class="like" data-id="4" data-sec="2">Like</span></div>
<div>* Bugs Bunny   <span id="h3" class="like" data-id="5" data-sec="2">Like</span></div>
<div>* Obelix   <span id="h3" class="like" data-id="6" data-sec="2">Like</span></div>
<div>* Mojo Jojo   <span id="h3" class="like" data-id="7" data-sec="2">Like</span></div>
</div>
The above looks like a "list" to me, so semantically you should think about swapping all those <div>'s out for a <ul> and a bunch of <li>'s.
Now that we have our .sub-heading class container which has this group of sub elements, they're an easy target.
$(".like").click(function() {
var hasLike = $(this).data("id");
var data = 'id='+hasLike;
console.log($(this).data('id'));
var $this = $(this); // <-- Set a reference to this element
if(hasLike) {
// ajax call
$.ajax({
type:"GET",
url:"demo.php",
data:data,
beforeSend:function(html){
// We'll think of something to do here
},
success: function(page_data){
// Remove the remaining like links. How?
$this.closest('.sub-heading').find('.like').remove();
// Notice we're using the reference we set earlier
// Then we're going back "up the tree" to the closest .sub-heading
// Drilling down again, finding all the .like elements
// And simply removing them
$('.like[data-id="'+page_data+'"]').append(page_data);
},
error: function(page_data){
$("#errors").empty();
$("#errors").fadeIn(200);
$("#errors").append('Screwed up!');
},
});
}
return false;
});