0

It's a little bit confuse the code ( I think ) but I hope you understand it, ( And yes I know that my Mysql API isn't the best, but I will change when I have time (It's a large script ))

Well, I have a PHP script that runs every 5 seconds, that does a notification in Jquery if exists any row in the friend_requests table with the user_id of the user, and if exists runs a jquery notification ( something like facebook ) saying that a User has sended a friend request to him.

But the problem is that the PHP script runs every 5 seconds, but the Jquery function inside the script that says to open the notification box in the screen , just runs once.. If I had a row with the user_id of the user, just runs the notification if is the first time running the php code, (If the first 5 seconds have passed, if the row just comes after that 5 seconds, the notification box don't appears), just if the row comes in the first 5 sec. ( But the rest of the PHP code runs perfectly )

friend_request_notification.php

<?php include_once("includes/head.php"); ?>
<?php require_once("includes/connect/connect.php"); ?>
<?php require_once("includes/functions.php"); ?>
<?php require_once("includes/jquery.php"); ?>
<?php login_validation();

function friend_request_notification()
{
    global $db;
    global $userid;  

    $query_id_see = "SELECT user_id FROM friend_requests WHERE user_id={$userid}";
    $result_set3 = mysql_query($query_id_see, $db) or die(mysql_error());

    if ($id_requests = mysql_fetch_array($result_set3))
    {
        $select_requester_id = "SELECT user_id_requester FROM friend_requests WHERE user_id={$userid}";
        $result1=mysql_query($select_requester_id);

        $row = mysql_fetch_assoc($result1);
        $requester_id = $row['user_id_requester'];

        $select_requester_name = "SELECT * FROM members WHERE id={$requester_id}";
        $result2=mysql_query($select_requester_name);

        $row = mysql_fetch_assoc($result2);
        $requester_fname = $row['first_name'];
        $requester_lname = $row['last_name'];

        echo '
        <html>
        <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

       <link rel="stylesheet" type="text/css" href="style2.css" />
       <script src="jquery.facebookBeeper.js" type="text/javascript"></script>
       </head>
       <body>

       <div id="BeeperBox" class="UIBeeper">
         <div class="UIBeeper_Full">
            <div class="Beeps">
               <div class="UIBeep UIBeep_Top UIBeep_Bottom UIBeep_Selected" style="opacity: 1; ">
                  <a class="UIBeep_NonIntentional" href="#">
                     <div class="UIBeep_Icon">
                        <i class="beeper_icon image2"></i>
                     </div>
                     <span class="beeper_x">&nbsp;</span>
                     <div class="UIBeep_Title">
                        <span class="blueName"> ' . $requester_fname . ' ' . $requester_lname . '</span> has send you a friend request <span class="blueName">coise</span>.
                     </div>
                  </a>
               </div>
            </div>
         </div>
       </div>

       </body>
       </html>';

       $insert_table = "INSERT INTO friend_requests_notificated SELECT * FROM friend_requests WHERE user_id={$userid} ";
$delete_table = "DELETE FROM friend_requests WHERE user_id={$userid}";
$change_table1 = mysql_query($insert_table) or die(mysql_error());
$change_table2 = mysql_query($delete_table) or die(mysql_error());

    }
    else
    {

    }   
}

friend_request_notification();
?>

jquery.facebookBeeper.js

$(document).ready(function () {
// set the time for the beeper to be displayed as 5000 milli seconds (5 seconds)
var timerId, delay = 5000;
var a = $("#BeeperBox"),
    b = $("a.control");;
//function to destroy the timeout


function stopHide() {
    clearTimeout(timerId);
}
//function to display the beeper and hide it after 5 seconds


function showTip() {
    a.show();
    timerId = setTimeout(function () {
        a.hide();
    }, delay);

}
    showTip();
//function to hide the beeper after five seconds


function startHide() {
    timerId = setTimeout(function () {
        a.hide();
    }, delay);
}
//display the beeper on cliking the "show beeper" button
b.click(showTip);
//Clear timeout to hide beeper on mouseover
//start timeout to hide beeper on mouseout
a.mouseenter(stopHide).mouseleave(startHide);

$('.beeper_x').click(function () {
    //hide the beeper when the close button on the beeper is clicked
    $("#BeeperBox").hide();
});

showTip();
});

notifications.js

window.setInterval(function(){
    $('#notifications').load('friend_request_notification.php');


}, 5000);

3 Answers 3

2

Looks fine, but I guess there's a caching issue, like JavaScript getting the same file from the cache. Add a timestamp, so that each time, a new file is requested.

window.setInterval(function(){
    $('#notifications').load('friend_request_notification.php?' + (new Date()).getMilliseconds());
}, 5000);

This will force the browser to download a new file, each time the request is sent.

3
  • @DavideGonçalves It was my mistake. It should be .getMilliseconds() and not getMilliseconds. Thanks. The ()s made the mistake. Apr 14, 2013 at 13:30
  • 1
    I've tried with my old script and added some random text to echo before the notification ( just to test ) and the text just runs without + (new Date()).getMilliseconds()); Apr 14, 2013 at 13:31
  • Dude, then that will be cached! Apr 14, 2013 at 13:38
0

I haven't tested this, but I'm guessing it loads only once because it loads it the first time and caches the file. So, it doesn't inherently run the second time.

This makes sense, otherwise the person's cache would have a hundred copies of the same file which is not useful.

Make it so when the interval runs, it runs the function that is in the javascript file.

window.setInterval(function(){
    $('#notifications').load('friend_request_notification.php');

    showTip() 
}, 5000);

or similar. You shouldn't be trying to load a javascript file over and over again in a script like this. That JS should be in the top page.

3
  • I can't make that, because I want to showTip() just if a new row in the table exists.. Apr 14, 2013 at 13:29
  • So then do a check in showTip. Or make the notifications load so that there is a <script type="text/javascript">showTip()</script> at the end of the body. Apr 14, 2013 at 13:30
  • load is asychronous, showTip() will run before new data loaded
    – charlietfl
    Apr 14, 2013 at 14:05
0

It is important to realize that document.ready has already occured in the main page you are loading new content into.

This means when you load new script it will fire immediately, and in this case will fire before the html it is referencing exists.

Placing the script after the html in friend_request_notification.php will assure that the html gets loaded into the DOM before the script fires.

Structurally you might consider just wrapping all the code in jquery.facebookBeeper.js into a function contained in notifications.js and instead of making a new request for that script file every 5 seconds, run your function within complete callback of load.

window.setInterval(function(){
    $('#notifications').load('friend_request_notification.php',function(){
          /* new content now exists in page, run code here*/
     });

    showTip() 
}, 5000);

Should also be aware that when you declre var a = $("#BeeperBox"), on page load, then replace that element with new html, var a will not be a reference to the new version of eleemnt with same ID.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.