How to show users that a new comment has been entered - php

I have a small blog that I am creating. It gets its information from a database. I would like to show the users that are logged in that someone else has just entered a new comment. I have created 3 pages: old_count, new_count, posts. I was going to create a session for both new_count and old_count and subtract them in posts. The result would have been displayed in a div to the user. This idea I have scrapped because both old_count and new_count would have the same information, so the result in posts would have always been 0. What I am looking for is something like Twitter where if there is a new entry, a div appears displaying --1 New post--. I have being looking for a way to do this. Can someone please help me. (Note - please explain script given in full....Thanks In Advance!!!!)

Set a timestamp of the last time they checked for content.
then, using javascript, poll the server (SELECT * FROM posts WHERE created_timestamp > {$last_checked_timestamp}
If result > 0 then display count.
Update timestamp.

The question is: When is a comment a new comment? If it has been created between the most recent click and the current click? Or if the user has not yet seen it?
The easiest way will be to store the "known" comments (e.g. IDs) in the session and check against the currently available comments.

You would have to store the login timestamp user. Maybe in DB or in session. Check it against the comment timestamp.
You have to display notifications for all the comments that have been inserted in the database and stick to following conditions
Comment_Timestamp < User_Login_Timestamp.
(Current_Timestamp - Comment_Timestamp) <= Refresh_interval
PHP:
<?php
/*
DB CONNECT AND SQL TO SELECT COMMENTS FROM THE TABLE. YOU CAN OPTIMIZE QUERY TO REDUCE THE NUMBER OF
TUPLES
*/
$current_ts = strtotime(date('m/d/Y h:i:s a');
$notified = array();
foreach($all_comments as $comment) {
if(strtotime($comment['ts']) < strtotime($_SESSION['user_login_ts'])) {
if(($current_ts - strtotime($comment['ts']) <= REFRESH_INTERVAL) {
$notified[] = $comment;
}
}
}
echo json_encode($notified);
?>
JS AJAX
setInterval(function(){
$.ajax({
url: "server",
success: function(data) {
/* Data is the JSON Object for new comments for that user */
},
dataType: "json"
});
}, <?=REFRESH_INTERVAL?>);

With the suggestion that was posted by David, I came up with the following solution to the questions that I had asked earlier.
I created a timestamp upon login.
I then use this to run the search on the database.
The DIV containing this information is being refresh every 10 secs and is a clickable link to a timestamp reset page. The code for this page is as follows:
<?php
session_start();
$reset = $_POST['reset'];
if($reset == 'reset')
{
$_SESSION['time_stamp'] = time();
echo "done";//confirmation purpose
}
?>
and my javascript that controls the whole show:
<script type="text/javascript">
<!--
$(document).ready(function(){
$('#divname').click(function(){
var r="reset";
$.ajax({
type: "POST",
url: "reset_time.php",
data: r,
success: function(html){
if(html == 'done')
{
$('#divwithinfo').reload(/*my blog page url*/);
}
});
});
});
-->
</script>

Related

MYSQL subtract value if input differs

I have a text area (txt_desCription) on a form that is used to calculate a score. The score is weighted as follows:
If the input in the text area is smaller than 75 words, 5 points is added to a the col_score column(TINYINT(1) in the tbl_score table of the database.
If the input in the text area is greater than 75 words, 10 points is added to a the col_score(TINYINT(1) column in the tbl_score table of the database.
An onblur event calls the jquery script that 'counts' the words and then sends it to the add_score.php page that handles the update event. Code below:
if (isset($_POST["txt_desCription"])); {
$sessionscore = $_POST["txt_desCription"]; // ◄■■ PARAMETER FROM AJAX.
if ($sessionscore <= 75) {
$descscore = 5;
} else if ($sessionscore >= 75) {
$descscore = 10;
}
$updatesql=sprintf("UPDATE tmp_score
SET col_score=col_score+%s
WHERE sessionid = %s",
GetSQLValueString($descscore, "int"),
GetSQLValueString($_SESSION['sessionid'], "text")
);
$result=mysql_query($updatesql) or die(mysql_error());
}
It works perfectly well, but what I cannot figure out is how to update the score if the user goes back and make changes to the text in the text area?
With other Words, what if the user changes their mind about the answer and goes back and change their answer to a shorter or longer one? Meaning the value will change from 5 to 10 or vise versa.
Please help. My hair is thinning by the second :-)
I think you need to use onchange jquery event and send ajax request every time user change the value. You ajax request will look something like this
jQuery(document).ready(function($){
$(document).on("change","#textareaId",function(){
$.ajax({type: "POST",
url: 'yourUrl', //Ajax request url here
data:{}, // data to update here
success: function(data) {
//do something with response here
}
});
});
});
I hope this will help you out.

Append old chats before new chats to the div using jQuery

In my online-chat project using Codeigniter, jQuery, AJAX I have a function that runs every 1 second which retrieves chat with delivered status = 0
$.post("<?php echo base_url(); ?>chat/admin_chat/get_chat",
{
user_id : $('.hide_me').text(),
username : $('.username').text()
},
function(data){
if (data != "") {
$('#chat_window').append(data);
$('#chat_window').scrollTop($('#chat_window').prop("scrollHeight"));
}
}
);
and there is another function which is used to get the chats with delivered status = 1 (or old chats),
$(document).on('click','.user',function (e) {
e.preventDefault();
$('.username').html($(this).text());
$('.hide_me').html($(this).attr('id'));
$('.username').show();
$('.log_username').hide();
$("#input").removeAttr("readonly");
var user = $(this).attr('id');
$("#chat_window").html('');
$.post("<?php echo base_url(); ?>chat/admin_chat/get_old_chat",
{
user_id : $('.hide_me').text(),
username : $('.username').text()
},
function(data){
$('#chat_window').append(data);
$('#chat_window').scrollTop($('#chat_window').prop("scrollHeight"));
}
);
});
which is called when clicked on the username. The result of both AJAX calls are appended to a div. The problem I face now is sometimes when I click on the username, the chats that are not delivered is getting appended to the div before the old chats which is not what I want. I need the old chats to be appended to the div before the new chats, when clicked on the username. Could someone please suggest a way to fix the issue?
At last I found a way to fix the issue.
I added a span <span id='old_chat_appended' hidden=""></span>.
Modified the get_old_chat function a little bit by changing the value of span to 0 and 1.
After e.preventDefault(), added
$('#old_chat_appended').text('0')
and after appending data to div using $('#chat_window').append(data), added
$('#old_chat_appended').text('1').
At last in the get_chat function, which runs every 1 second, added
if($('#old_chat_appended').text() == 1)
{
$('#chat_window').append(data);
}
The application is working as expected. The old chats are getting appended to the div before the new chats.

Counting clicks changing link href

I asked this question but did not explain it thoroughly. I have a regular link:
Click Me
I want the change the href after the link is clicked 10 times not by the individual use but clicked 10 total times by all users.My jquery is obviously flawed but here is what i have:
var count = 0;
$(document).ready(function(){
$('a').click(function(){
count++;
if(count > 10){
$('a').attr("href","https://www.yahoo.com");
}
});
});
I am new to jQuery but from what ive read cookies and local storage store individual users information not the total websites information. So how could i use ajax with a database to do this? maybe even php?
You have a huge fundamental misunderstanding of how JavaScript works.
Firstly, when someone clicks that link, they're going to be navigated away from your page unless you do something to prevent that (e.preventDefault or return false in jQuery). Once they're navigated away, your counter is lost because is stored locally, in memory, for the life of the page.
Secondly, even if the counter wasn't cleared, or you stored the counter in a cookie, or localStorage, it will only count for a single user. If you want to count the clicks by all users, you're going to have to do that server side. i.e., in PHP.
So... how do we do that? Well, as I said before, when a user clicks that link, they're going to be sent to Google. Your site will have no knowledge of what has occurred.
We have two options to deal with this. We can intercept the click, and use AJAX (more appropriately "XHR") to send a request back to your server, where you can log the click, before forwarding them off to Google.
Or, you re-write the URL to something like /log_click.php?forward=http://google.com. Now when the user clicks the link, they will actually be sent to your log_click.php script, where you can log the click to your database, and then use $_GET['forward'] in combination with header('location: ...') to forward them off to their destination. This is the easiest solution. Through some JavaScript hackery, you can hide the link so that when they mouse over it, they won't even know they're being sent to your site (Google does this).
Once you've accumulated your 10 clicks, you again use PHP to write out a different HTML link the next time someone views that page.
HTML
<a href='http://www.google.com' data-ref='99'>Click Me</a>
Javascript
$("a").click(function() {
var _this = $(this);
var ref = $(this).data('ref');
$.ajax({
url: '/click_url.php',
type: 'POST',
data: {id:ref}
success: function(href) {
if(href != '')
_this.attr("href",href);
}
});
}
PHP (click_url.php)
if($_POST['id'] > 0){
$id = $_POST['id'];
//count increment
$sql = "UPDATE table SET count = count + 1 WHERE id = '$id'";
mysql_query($sql);
//get row count
$sql = "SELECT * FROM table WHERE id = '$id' LIMIT 1";
$result = mysql_query($sql);
$row = mysql_fetch_array($result);
//if count > 10 , return new url
if($row['count'] > 10){
die($row['href']);
}
}
While clicking the link you can call an ajax request and increment the count in the server. So that u should remove link from href and call manually by using javascript window.location.href each time. Hope that helps
var count = 0;
$(document).ready(function(){
$('a').click(function(e){
e.preventDefault();
count++;
if(count > 10){
$('a').attr("href","https://www.yahoo.com");
}
});
});
and use ajax like below
//send set state request
$.ajax({
type: "POST",
contentType: "text/xml; charset=utf-8",
datatype: "xml",// you can set json and etc
url:"your php file url",
data: {test:test1},// your data which you want to get and post
beforeSend: function (XMLHttpRequest) {
// your action
},
success: function (data, textStatus, XmlHttpRequest) {
// your action },
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
for more deatils see Ajax
Mark's answer is more useful, even you want to implement for the sake of some constraints then try below with jQuery 1.9
I have implemented for 3 clicks, AFAIU you need to change the URL on every 3rd successive click
var c=0;
$(document).on('click', 'a#ten', function(e){
c++;
alert('clicked ' + c + ' times');
if(c%3 == 0) {
$('a').attr("href","https://www.yahoo.com");
alert('changed');
c = 0;
}
e.preventDefault();
})
working DEMO
You must save no of times that link has been clicked in the database with php. when you render the link(with php) check the no of times it has been called before and decide what link to render.
Click Me
write this javascript in the page wher you place your link
$(function()
{
$('.mylink').click(function()
{
$.ajax({
type: "POST",
url: "listening/end/point", // enter your counting url here
async: false
);
});
});
And in server on the listening end point write php script to store no of times that link has been called.

Grabbing correct variables for AJAX Post - from HTML/PHP page

In my HTML, I loop thru a PHP / MySQL query result and do something that makes HTML like this as the end result:
loop 1
<p>- user review-</p>
Up Vote
loop 2
<p>- user review-</p>
Up Vote
etc.
Now, when the user clicks "up vote", I simply want an AJAX POST to send to a PHP script that looks like this:
// jQuery / AJAX - separate file linked to `HTML`
$('#upvote').onclick(function() {
var user_id = ??????;
var review_id = ?????;
$.ajax({
url : "search_query.php",
type : "POST",
dataType: "json",
data : {
userId : user_id,
reviewId : review_id
},
success : function(data) {
// do stuff
}
});
// php
<?php
$review_id = $database->escape_value(trim($_POST['reviewId']));
$user_id= $database->escape_value(trim($_POST['userId']));
// Upvote Method
$result = Data::upVoteReview($review_id, $user_id);
// Not discussed in question
$output["result"] = $result;
print(json_encode($output));
?>
My question is: I need to grab two variables from HTML and put in the AJAX POST; as you see above, they are reviewId and userId. (Note the user_id is the logged in user and is actually stored as a global PHP SESSION variable.)
The difficult part is the HTML is dynamic, and each loop will have a different review_id. The user_id will be the same but I am not sure how to get that from a SESSION var to the JavaScript. Note: In each "loop" on the HTML page I do have access to the review_id php variable that I need - just not sure where to place it so I can pick it up in jQuery/AJAX.
Use classes instead of IDs as propper markup there should be only 1 ID of a given name per page.
HTML
loop 1
<p>- user review-</p>
Up Vote
loop 2
<p>- user review-</p>
Up Vote
etc.
JS
// jQuery / AJAX - separate file linked to `HTML`
$('.upvote').on('click', function(e) {
e.preventDefault();
var review_id = this.data('review');
$.ajax({
url : "search_query.php",
type : "POST",
dataType: "json",
data : {
reviewId : review_id
},
success : function(data) {
// do stuff
}
});
PHP
<?php
$review_id = $database->escape_value(trim($_POST['reviewId']));
// Upvote Method
$result = Data::upVoteReview($review_id, $_SESSION['user_id']);
$output["result"] = $result;
print(json_encode($output));
?>
There seem to be quite a few problems in your code, the first couple of ones I've noticed are the following:
The first one:
loop 1
<p>- user review-</p>
Up Vote <------------------------------Here
loop 2
<p>- user review-</p>
Up Vote <-------------------------------Here
etc.
You are missing the opening quotes, i.e. it should be href="#" not href=#"
Second is:
$('#upvote').onclick(function() {
should probably be as jQuery does not have onclick function, it definitely has on function.
$('#upvote').on('click', function() {

Refresh div, but only if there is new content from php file

Background Info
I'm fiddling around with some PHP and AJAX at the moment, to try and get the code working for an auto refreshing div (every 10 seconds), that contains comments.
Here is javascript code I am using to refresh the div..
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$.ajaxSetup({ cache: false });
setInterval(function() {
$('#content_main').load('/feed_main.php');
}, 5000);
});
// ]]></script>
The code that will populate the div called "content_main", which is in feed_main.php, essentially accesses the database and echo's out the latest comments ...
Question
Is it possible, to only load the div "content_main" if the data inside of it, hasn't changed since the last time it was loaded?
My logic
Because I'm relatively new to javascript and AJAX I don't quite know how to do this, but my logic is:
For the first time it is run..
load data from feed_main.php file
Create a unique value (perhaps a hash value? ) to identify say 3 unique comments
Every other time it is run...
load the data from feed_main.php file
create a NEW unique value
check this value with the previous one
if they're the same, don't refresh the div, just leave things as they are, but if they're different then refresh..
The reason why I want to do this is because the comments usually have pictures attached, and it is quite annoying to see the image reload every time.
Any help with this would be greatly appreciated.
I've faced similar problem not too long ago, i assume that you using mysql or something for your comments storage serverside ?
I solved my problem by first adding timestamp integer column to my mysql table, then when i added a new row, i'd just simply use time() to save the current time.
mysql row insert example:
$query = "INSERT INTO comments (name, text, timestamp) VALUES ('". $name ."', '". $text ."',". time() .");";
step two would be to json_encode the data you sending from serverside:
$output = array();
if ($html && $html !== '') { // do we have any script output ?
$output['payload'] = $html; // your current script output would go in this variable
}
$output['time'] = time(); // so we know when did we last check for payload update
$json = json_encode($output, ((int)JSON_NUMERIC_CHECK)); // jsonify the array
echo $json; // send it to the client
So, now instead of pure html, your serverside script returns something like this:
{
"payload":"<div class=\"name\">Derpin<\/div><div class=\"msg\">Foo Bar!<\/div>",
"time":1354167493
}
You can grab the data in javascript simply enough:
<script type="text/javascript"> // <![CDATA[
var lastcheck;
var content_main = $('#content_main');
pollTimer = setInterval(function() {
updateJson();
}, 10000);
function updateJson() {
var request = '/feed_main.php?timestamp='+ (lastcheck ? lastcheck : 0);
$.ajax({
url: request,
dataType: 'json',
async: false,
cache: false,
success: function(result) {
if (result.payload) { // new data
lastcheck = result.time; // update stored timestamp
content_main.html(result.payload + content_main.html()); // update html element
} else { // no new data, update only timestamp
lastcheck = result.time;
}
}
});
}
// ]]> </script>
that pretty much takes care of communication between server and client, now you just query your database something like this:
$timestamp = 0;
$where = '';
if (isset($_GET['timestamp'])) {
$timestamp = your_arg_sanitizer($_GET['timestamp']);
}
if ($timestamp) {
$where = ' WHERE timestamp >= '.$timestamp;
}
$query = 'SELECT * FROM comments'. $where .' ORDER BY timestamp DESC;';
The timestamps get passed back and forth, client always sending the timestamp returned by the server in previous query.
Your server only sends comments that were submitted since you checked last time, and you can prepend them to the end of the html like i did. (warning: i have not added any kind of sanity control to that, your comments could get extremely long)
Since you poll for new data every 10 seconds you might want to consider sending pure data across the ajax call to save substantial chunk bandwidth (json string with just timestamp in it, is only around 20 bytes).
You can then use javascript to generate the html, it also has the advantage of offloading lot of the work from your server to the client :). You will also get much finer control over how many comments you want to display at once.
I've made some fairly large assumptions, you will have to modify the code to suit your needs. If you use my code, and your cat|computer|house happens to explode, you get to keep all the pieces :)
How about this:
<script type="text/javascript">
// <![CDATA[
$(function () {
function reload (elem, interval) {
var $elem = $(elem);
// grab the original html
var $original = $elem.html();
$.ajax({
cache : false,
url : '/feed_main.php',
type : 'get',
success : function (data) {
// compare the result to the original
if ($original == data) {
// just start the timer if the data is the same
setTimeout(function () {
reload(elem, interval)
}, interval);
return;
}
// or update the html with new data
$elem.html(data);
// and start the timer
setTimeout(function () {
reload(elem, interval)
}, interval);
}
});
}
// call it the first time
reload('#content_main', 10000);
});
// ]]>
</script>
This is just an idea to get you going it doesn't deal with errors or timeouts.
Best And Easy Code
setInterval(function()
{
$.ajax({
type:"post",
url:"uourpage.php",
datatype:"html",
success:function(data)
{
$("#div").html(data);
}
});
}, 5000);//time in milliseconds

Categories