I have a script that updates information of my website, it loads the date from another page every second and with this i can have a clock on my website that updates ever second. However i want to do the same sort of thing but with another part of my website.

This is the code im using so far:

<script type="text/javascript" charset="utf-8">

    $(document).ready(function() 
    {
        $("#myDiv").load("response.php");
        var refreshId = setInterval(function() 
        {
            $("#myDiv").load('time.php');
        }, 1000);
    });

</script>

and then when i was to display the time i use:

 <div id="myDiv"> </div>

So how could i use it on another part of my website? Would it be wise to code the script and change the '#myDiv' to something else like '#myDiv2' or is there another way i could do it in the same script?

I want to know the best practise for this situation.

Thanks for the time.

I have a script that updates information of my website, it loads the date from another page every second and with this i can have a clock on my website that updates ever second. However i want to do the same sort of thing but with another part of my website.

This is the code im using so far:

<script type="text/javascript" charset="utf-8">

    $(document).ready(function() 
    {
        $("#myDiv").load("response.php");
        var refreshId = setInterval(function() 
        {
            $("#myDiv").load('time.php');
        }, 1000);
    });

</script>

and then when i was to display the time i use:

 <div id="myDiv"> </div>

So how could i use it on another part of my website? Would it be wise to code the script and change the '#myDiv' to something else like '#myDiv2' or is there another way i could do it in the same script?

I want to know the best practise for this situation.

Thanks for the time.

• javascript
• jquery
• html

Share Follow edited Jan 10, 2012 at 15:17 bpeterson76 12.9k66 gold badges5050 silver badges8282 bronze badges asked Jan 10, 2012 at 15:14 ragebunnyragebunny 1,7701010 gold badges3737 silver badges5555 bronze badges 3

• @ragebunny: It wouldn't say it is a good practice to call a page only to have the time, I would say it is better to take the time once and then use javascript to add the time passed. Is this not factible? – netadictos Commented Jan 10, 2012 at 16:19
• @netadictos Yeah that does make sense. Thanks. – ragebunny Commented Jan 10, 2012 at 17:32
• @piskvor I've got it working by code and pasting the original but changing the div, now this works because its a new function, but i was wondering if its good practice or if there is a way better way for me to do it. The time can be done with JS but the other part is something that needs constant refreshing from the database. – ragebunny Commented Jan 10, 2012 at 17:32

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

Personally I prefer a more declarative style, so something like

HTML:

<div data-update="newContent.php" data-refresh-interval="500"></div>

Javascript:

$('[data-update]').each(function() {
  var self = $(this);
  var target = self.data('update');   
  var refreshId =  setInterval(function() { self.load(target); }, self.data('refresh-interval'));
});

This approach means that all information to discern page updates lives in the HTML, it then is (hopefully!) easier to reason about pages when you only have to look in the view to figure out what will happen. It also makes it much easier to add functionality to other pages, since applying the same markup is all that is required.

$("#myDiv").load("response.php");
$("#myDiv2").load("response2.php");
var refreshId = setInterval(function() 
{
    $("#myDiv").load('time.php');
    $("#myDiv2").load('time2.php');
}, 1000);

Like this it should work I think.

In general:
The best practice here would be to store that code in an external js file and load it on every page you need it.

For just an element that shows the time (and uses the markup returned from load.php):
What you can do is insert the #myDiv element with jQuery when the page loads and collect this functionality in a function, as following:

$(document).ready(function() {
    function insert_time_element(id) {
        // Cache the variables. See jQuery best practices
        var $myDiv = $(document).append('<div id="' + id + '"></div>');

        // Your code (slighty altered):
        // Could also be cached.
        $myDiv.load("response.php"); 
        var refreshId = setInterval(function() {
            $myDiv.load('time.php');
        }, 1000);
    }

    insert_time_element('myDiv');
});

For best practices specifically to jQuery, read the NetTuts+ article on jQuery best practices: http://net.tutsplus./tutorials/javascript-ajax/14-helpful-jquery-tricks-notes-and-best-practices/