0

I have a div that I would like to refresh on page load then auto refresh every 60 seconds after. I have it set now to refresh every 60 seconds but I don't know how to combine that with the first page load. Here is the whole php page:

<script> $(document).ready(function () { var notify = $("#notify"); notify.hide(); notify.click(function(event) { // Handle the click on the notify div so the document click doesn't close it event.stopPropagation(); }); var count = $("#count"); var notifyLink = $("#notify_link"); count.click(showNotification); notifyLink.click(showNotification); function showNotification(event) { $(this).unbind('click', showNotification); $(this).addClass("selected"); loadData(); notify.show(); $(document).click(hideNotification); // So the document doesn't immediately handle this same click event event.stopPropagation(); }; function hideNotification(event) { $(document).unbind('click', hideNotification); notify.hide(); notifyLink.removeClass("selected"); count.removeClass("selected"); notifyLink.click(showNotification); count.click(showNotification); } count.load( "<?php echo $vars['url']; ?>mod/notifications/ajax/livenum.php" ); $.ajaxSetup({ cache: false }); var refreshId = setInterval(function () { count.load( "<?php echo $vars['url']; ?>mod/notifications/ajax/livenum.php" ); }, 60000); $.ajaxSetup({ cache: false }); }); function loadData() { $('#loader').html( '<?php echo elgg_view('ajax/loader',array('slashes' => true)); ?>' ); $("#result").load( "<?php echo $vars['url']; ?>mod/notifications/ajax/data.php", function () { $('#loader').empty(); // remove the loading gif } ); } </script>
Improve this question
13
  • Let's lose the PHP; it's not relevant. Make a testcase. Commented Feb 11, 2012 at 22:53
  • What do you mean "lose the PHP" Commented Feb 25, 2012 at 18:23
  • I mean, get rid of it from your question. Let's deal with just the Javascript that it generates. You should already have done that as part of your debugging. Commented Feb 25, 2012 at 18:45
  • @LightnessRacesinOrbit ok its gone. Commented Feb 26, 2012 at 22:16
  • @LightnessRacesinOrbit I guess I don't get what you mean. why is that important? Commented Feb 27, 2012 at 16:25

3 Answers 3

Reset to default
2

On page load do it once, and then do your setInterval.

function loadCount() { count.load( "<?php echo $vars['url']; ?>mod/notifications/ajax/livenum.php" ); } $(function () { var refreshId = setInterval( function () { loadCount(); }, 60000); $.ajaxSetup({ cache: false }); }

Edited based on suggestion to make the code more maintainable.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

It makes more sense to make it an actual function, call that on page load, then pass the function reference to the setInterval() call. That way you only have to make changes in one place, rather than two, and you're not unnecessarily duplicating code.
@AnthonyGrist disregard last comment. how would I do that?
1

Just call the

count.load( "<?php echo $vars['url']; ?>mod/notifications/ajax/livenum.php" );

on the page load. With jQuery you could do something like this (put the code in a function, as Anthony pointed out):

$(function() { function loadCount() { count.load( "<?php echo $vars['url']; ?>mod/notifications/ajax/livenum.php" ); } // Load on page load (call the function loadCount): loadCount() // Set the refresh interval and call the function loadCount every 60 seconds): var refreshId = setInterval(loadCount, 60000); $.ajaxSetup({ cache: false }); });
Improve this answer

6 Comments

Thanks for the quick response. Good idea! I don't know why but it didn't work. Ive update the question to show all Ive done.
Do you get any error messages or something that can help us to track the problem?
Well, I just tried your code (correction: I tried your code without the PHP tags and I put all your code inside a proper html file), and I do see a hyphen (the link with the ID "notify_link") and nothing else (as expected). When I click on it, the div with the ID "notify" is showing up/hides and the setInterval parts also works. :-)
I have now edited my first code and added a function that is called instead (as Anthony pointed out below).
If it did work, and you first accepted it, why did you unaccept it?
|
-1

Your approach is correct -- using setInterval should work as expected. I wrote a quick test that just uses console.log() and it works. But I think your error is in your .load() function in loadData() -- you aren't using double quotes so '<?php echo elgg_view('ajax/loader',array('slashes' => true)); ?>' gets interpreted as three separate strings. What you want is "<?php echo elgg_view('ajax/loader',array('slashes' => true)); ?>" (surrounded by double quotes).

Improve this answer

3 Comments

@ YXY Ive added the double quotes and it still takes 60 seconds for the div to load. I need it to load immediately on page load and refresh every 60 seconds after.
Ive added the double quotes and it still takes 60 seconds for the div to load. I need it to load immediately on page load and refresh every 60 seconds after.
-1: Utter nonsense. The Javascript and PHP are executed in completely different contexts; there is no way for those quotes to conflict.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.