If rating = +0 the following will show (standby).
If I click on the button, then the following will show( adding rating ).
If I click again, then the following will show ( removing rating )
I'd like for it to show as follows:
if rating = +0, when I click it the following will show.
Issue: When I click the button the font-weight:bold & color: # goes away when It should automatically update with the class. What am I doing wrong? Sorry for this lame question, just been at it for a while and I'm stuck with such a simple problem I'm sure.
This is my code:
PHP :
<div class="up vote" name="voteUp" id="<?php echo $post_iD;?>">
<div class="wrapper">+<?php echo $VoteRate;?></div>
</div>
AJAX:
$(function()
{
$(".vote").click(function()
{
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
if (name=='voteUp')
{
$.ajax(
{
type: "POST",
url: "voting/up_vote.php",
data: dataString,
cache: false,
success: function(html)
{
parent.html(html);
}
});
}
return false;
});
});
In your success function, replace the HTML of the .wrapper div, not the parent:
parent.find(".wrapper").html(html);
Related
i have a readmore link that allows people to read more posts once it has been clicked, what i don't want is the button showing again and i also don't want the whole post to show again, i just want the remaining posts to add to the previous that the reader has read or being reading just as its done on facebook page when you click seemore link.
Thanks
$(function(){
$(".readMore").click(function(event){
event.preventDefault();
var link = $(this).attr('href');
var dataString = 'link='+ link;
$.ajax({
type : "POST",
url: "readmore-post.php",
data: dataString,
cache : false,
success: function(html){
$(".read_more").before(html);
}
});
});
});
this is the html part
<?php echo substr($post,0,250); ?>..
<?php
if(strlen($post)>250)
{
echo"<a href='$postID' style='font-size:0.8em;' class='readMore'>readmore</a> </br>";
}
?>
<div class="read_more"></div>
this is the php part
<?php
include('../config/connect.php');
$read_id = $_POST['link'];
$srm = "SELECT * FROM page_timeline WHERE timelineID='$read_id' ORDER BY timelineID DESC";
$sre = $db->query($srm);
while($rowr = $sre->fetch_array())
{
$postID = $rowr['timelineID'];
$post = $rowr['post'];
}
echo "<p>".$post."</p>";
?>
Try this and see inline comments
$(function(){
$(".readMore").click(function(event){
event.preventDefault();
var that=$(this);
var link = $(this).attr('href');
var dataString = 'link='+ link;
$.ajax({
type : "POST",
url: "readmore-post.php",
data: dataString,
cache : false,
success: function(html){
$(".read_more").empty().append(html);
//clear all the contents and append new one to .read_more div
that.hide(); //hide the button on successful load
},
});
});
});
I want to display like count for that post the user likes, every post like href has a specific id, now if I am clicking the post having id 222. Then like count having id 222 will refresh.
like <div id="111">4</div>
like <div id="222">5</div>
like <div id="333">12</div>
My rate function
<script type="text/javascript">
function rate(c)
{
var c
jQuery.ajax({
type: 'POST',
url: 'rate.php',
data: {
cmnt: c
}
});
return false;
}
</script>
the C variable is getting the post id
you can update your rate() function as given below
<script type="text/javascript">
function rate(c)
{
jQuery.ajax({
type: 'POST',
url: 'rate.php',
data: {cmnt: c},
success: function(html) {
var count = $("#"+c).html();
var new_count = parseInt(count)+parseInt(1)
$("#"+c).html(new_count);
}
});
return false;
}
</script>
let me know if that helped you...
I have some JQuery handling a div click. If the div is clicked once it hides itself and shows another div (and posts to a php script in the background). If it is then clicked again, it's supposed to hide the new div, show the new one again, and post more data to a different script, and so on.
It changes the first time (.f hides, .uf shows) but when I click '.uf' nothing happens.
JQuery:
if($('.f').is(":visible")) {
$('#follow').click(function() {
var to_follow = $('.name').attr('id');
$.ajax({
type: "POST",
url: "/bin/rel_p.php",
data: "y=" + to_follow,
success: function() {
$('.f').hide();
$('.uf').show();
}
});
});
}
else {
$('#follow').click(function() {
var to_unfollow = $('.name').attr('id');
$.ajax({
type: "POST",
url: "/bin/relu_p.php",
data: "y=" + to_follow,
success: function() {
$('.uf').hide();
$('.f').show();
}
});
});
}
HTML:
<div id="follow" class="f">
<img src="img/icons/Follow.png">
<h1>Follow</h1>
</div>
<div id="follow" class="uf" style="display:none;">
<img src="img/icons/Unfollow.png">
<h1>Unfollow</h1>
</div>
use a class if you intend to use the selector twice, and don't write the same code twice unless you have to:
$('.follow').on('click', function() {
var is_f = $('.f').is(":visible"),
to_follow = $('.name').attr('id'),
give_me_an_u = is_f?'':'u';
$.ajax({
type: "POST",
url: "/bin/rel" + give_me_an_u + "_p.php",
data: {y : to_follow}
}).done(function() {
$('.f, .uf').toggle();
});
});
My page consists of a list of records retrieved from a database and when you click on certain span elements it updates the database but at present this only works for the first record to be displayed.
(Basically changes a 0 to 1 and vice versa)
These are my two html elements on the page that are echoed out inside a loop:
Featured:<span class="featured-value">'.$featured.'</span>
Visible:<span class="visible-value">'.$visible.'</span>
Here is what I have:
$(document).ready(function() {
$('.featured-value').click(function() {
var id = $('.id-value').text();
var featured = $('.featured-value').text();
$('.featured-value').fadeOut('slow');
$.ajax({
type: "POST",
url: "process.php",
data: "id="+id+"&featured="+featured,
success: function(data) {
$('.featured-value').html(data);
$('.featured-value').fadeIn('slow');
}
});
return false;
});
// same function for a different span
$('.visible-value').click(function() {
var id = $('.id-value').text();
var visible = $('.visible-value').text();
$('.visible-value').fadeOut('slow');
$.ajax({
type: "POST",
url: "process.php",
data: "id="+id+"&visible="+visible,
success: function(data) {
$('.visible-value').html(data);
$('.visible-value').fadeIn('slow');
}
});
return false;
});
});
It was working fine with one using id attributes but now I'm using class the fadeIn part of the success query isn't working but I'm hoping the .each will fix this.
UPDATE
The full loop is as follows:
while ($event = $db->get_row($events, $type = 'MYSQL_ASSOC'))
{
// open event class
echo '<div class="event">';
echo '<div class="id"><span class="row">Event ID:</span><span class="id-value"> '.$id.'</span></div>';
echo '<div class="featured"><span class="row">Featured: </span><span class="featured-value">'.$featured.'</span></div>';
echo '<div class="visible"><span class="row">Visible: </span><span class="visible-value">'.$visible.'</span></div>';
echo '</div>';
}
Cymen is right about the id selector causing you trouble. Also, I decided to refactor that for you. Might need some tweaks, but doesn't everything?
function postAndFade($node, post_key) {
var id = $node.parents('.id').find('.id-value').text();
var post_val = $node.text();
$node.fadeOut('slow');
$.ajax({
type: "POST",
url: "process.php",
data: "id="+id+"&"+post_key+"="+post_val,
success: function(data) {
$node.html(data);
$node.fadeIn('slow');
}
});
return false;
}
$('.featured-value').click(function() { return postAndFade($(this), 'featured'); });
$('.visible-value').click(function() { return postAndFade($(this), 'visible'); });
The click function is getting the same id and value on each click because you've bound it to the class. Instead, you can take advantage of event.target assuming these values are on the item being clicked. If not, you need to use event.target and navigate to the items within the row.
$('.featured-value').click(function(event) {
var $target = $(event.target);
var id = $target.attr('id');
var featured = $target.text();
$target.fadeOut('slow');
$.ajax({
type: "POST",
url: "process.php",
data: "id="+id+"&featured="+featured,
success: function(data) {
$target.html(data).fadeIn('slow');
}
});
return false;
});
So something like that but it likely won't work as it needs to be customized to your HTML.
im trying to pass on the id attribute to the file.php, but its giving me 0 every time, when i try to insert it into the database, the javascript and the html is provided!
$(function() {
$(".follow").click(function(){
var element = $(this);
var I = element.attr("id");
var info = 'id=' + I;
$.ajax({
type: "POST",
url: "file.php",
data: info,
success: function(){}
});
$("#follow"+I).hide();
$("#remove"+I).show();
return false;
});
});
html file:
<div id="follow1"><span class="follow_b"> Follow </span></div>
p.s. it deos insert the value in the database
file.php:
<?php
$id =$_POST['id'];
msql_insert.........
?>
It may not matter in this case, but the ID of an element is not supposed to start with a number.