Update div with jquery without load page like facebook ticker

Question

I am new in java script.

I have facebook style right side bar, which show all new event/post updated by friends. Here I used a ajax to load a individual php inside a div on current page.

Its working well but not work as facebook.

Question 1: I just want its(Ticer div) perpand new event/post if found on indivisual php after 10 second. How to do it.

Question 2: How to show full Event/post on hover of particular event in this ticker like facebook. I used a hover script here which I cannot hide on click anywhere of body.

My ajex for load div:

$.ajaxSetup({ cache: false });
var auto_refresh = setInterval(function() {
    $('#updatetime').load('updateside.php?');
}, 10000); // refresh every 10000 milliseconds

My hover script

$(".upbox1").mouseover(function() {
    var pos = $(this).position();
    var width = $(this).outerWidth();
    $("#menu").css({
        position: "absolute",
        top: pos.top + "px",
        left: (pos.right + width) + "px"
    }).show();
});

php:

$a= mysqli_query // Which find out all followers of me
$b= mysqli_query // which find out all of my activ post/parent id

// Updateside a particular table which add total user all post updates
// So I need a parent id/post which is related with a user activity.

$g = mysqli_query($dbh,"SELECT parent_id FROM updateside WHERE `from_id`='".$followname."' OR `to_id`='".$followerbdid."' OR `from_id`='".$session->username."' OR `to_id`='".$session->bdid."' GROUP BY parent_id DESC") or die(mysqli_error($dbh));
while ($row = mysqli_fetch_array($g)) {
$parent = $row['parent_id'];

$u = mysqli_query($dbh,"SELECT * FROM updateside WHERE `parent_id`='".$parent."' ORDER BY created DESC") or die(mysqli_error($dbh));
while ($row = mysqli_fetch_array($u)) {
$from_id = $row['from_id'];
$parent_id = $row['parent_id'];
$to_id = $row['to_id'];
$sub = $row['sub'];
$detail = $row['detail'];
$img = $row['img'];
$time = $row['created'];

echo"result will be goes here";

score 1 · Accepted Answer · edited May 23 '17 at 12:12

1

You are using ajax polling for getting the updated post and events. So now, you have the post/event you just need to showcase the content using javascript.

Firstly, you can do is check whether there is new post on success of each call, if there is then use .prepend() to prepend the post.

Secondly, Ideally you should delegate to the nearest parent that exists whenever you are dealing with dynamically generated content. Otherwise you script will not work on the dynamically generated content.

$(parent).on("mouseover", ".upbox1",function(){
    ...
});

Thirdly, To create the functionality of hiding it whenever click anywhere except the current post.

create a semi-transparent/transparent div with z-index less than the #menu& greater than 1 with 100% width and 100% height at the same time you hover on the image
Attach a function to this div that is on click it will hide itself as well as #menu.

I am assuming that you have successfully fetching the data via ajax calls and you are using #menu to showcase your post.

To get only new post only, you will need to do following things:-

On the back end, you need to make update.php accept a timestamp parameter in the querystring (you must be storing the timestamp when a post/event is created). When returning data, instead of just returning all of it, make it return everything since the time stamp, if given. Otherwise return everything.
The very first time you load the page, the first thing you should do is make an Ajax call to a new PHP file that returns the current server timestamp. Store the value of that in a global Javascript variable as a Number.
During Ajax polling, increment the value of the timestamp variable by however long it's been since the last fetch (looks like 10000 milliseconds), and feed that to update.php, like url: '/ajax/update.php?timestamp=' + latestFetchTimestamp,
Prepend it to your page.

Selecting the data using multiple condition MySQL:-

$timestamp = date("m/d/Y h:i:s a", time() - 10);
$u = mysqli_query($dbh,"SELECT * FROM updateside
         WHERE `parent_id`='".$parent."'
         AND `datetime` > '".$timestamp."'
         ORDER BY created DESC") or die(mysqli_error($dbh));

Follow this link for elobarate knowledge about MySQL multiple condition select

edited May 23 '17 at 12:12

Community

1
1

answered Dec 16 '14 at 00:05

Gaurav Kalyan

1,897
2
14
21

Thank u sir, I have particular sql table which collect all update information of user & followers. And I able to show all update by JS .load(); after 10sec intervel But I just want collect new data(if) by php and prepend it by JS. How to collect new data only by php. – joy Dec 16 '14 at 06:57
@koch I have updated the answer to get the new data only but you need to store the timestamp when you are creating the new post/event. – Gaurav Kalyan Dec 16 '14 at 13:46
ok, I have date field in Table which format as dec 16 14; 11.50 pm Can I use it as timestrap? And are u give me some example of above please? I am also trying this but I just need a code guideline to work in progress. Thank u. – joy Dec 16 '14 at 18:02
You should use "datetime" or "timestamp" format to save date in database as you can use it to query from databases quite easily as it convert date in mathematical expression (which can be easily compared) and get the post from after a particular date and time. here is an [example](http://stackoverflow.com/a/8359493/3190165). In this example you can delete a post after certain time by mysql command only. In your case you should select all the post after a certain time. – Gaurav Kalyan Dec 16 '14 at 18:27
Thank u so sir.. I am trying. . . In case of Ajax I need a example to add new data in polling by php. – joy Dec 18 '14 at 09:29
adding a new data in polling by php is same as adding data in simple ajax call by php. When you call to server, server respond to your call and provide you the data that you want. I have already explained how to get new data, send the time stamp, access it in php server like this `$_POST['timestamp']`, use mysql command like this `'SELECT FROM table WHERE date > '$_POST["timestamp"]';` now just echo data, then you are done.Use simple ajax call instead of `.load()` because it will replace your the content that is already present in your `#updatetime` element. – Gaurav Kalyan Dec 18 '14 at 11:38
In my php code which edited at above, how to add this 'created >= now() - interval 10 second' In line "SELECT * FROM updateside WHERE parent_id='".$parent."' ORDER BY created DESC" because without parent id I cannot show any result. – joy Dec 18 '14 at 17:23
Thank u so much sir, now my problem is ajax prepand. – joy Dec 19 '14 at 13:25
Is it possible to get ajax request only when a post occurred. – joy Dec 19 '14 at 13:43
That is the technology used by facebook. It is called "comet". Read this awesome [answer](http://stackoverflow.com/a/1086448/3190165) then you will not have any doubts as polling works amazing in small scale. :) – Gaurav Kalyan Dec 19 '14 at 13:48
Thank u so sir. disturb u again. . – joy Dec 19 '14 at 15:19

Update div with jquery without load page like facebook ticker

1 Answers1