targeting webatgs for refresh

[duke]

On some of my pages I use this piece of jQuery to update my tubular data:

Code: Select all

(function($)
{
    $(document).ready(function()
    {
        $.ajaxSetup(
        {
            cache: false,
            beforeSend: function() {
                $('#content').hide();
                $('#loading').show();
            },
            complete: function() {
                $('#loading').hide();
                $('#content').show();
            },
            success: function() {
                $('#loading').hide();
                $('#content').show();
            }
        });
        var $container = $("#table_data");
        $container.load("current_table.php");
        var refreshId = setInterval(function()
        {
            $container.load('current_table.php');
        }, 9000);
    });
})(jQuery);

Which works very well but obviously refreshes the whole table. I would like to refresh specific webtags at specific intervals in line with their updated frequency. So I applied an id ("id="10_min") to the <td> for specific tags I wanted to update and pointed the script towards my webtag template but - nothing.

Code: Select all

(function($)
{
    $(document).ready(function()
    {
        $.ajaxSetup(
        {
            cache: false,
            beforeSend: function() {
                $('#content').hide();
                $('#loading').show();
            },
            complete: function() {
                $('#loading').hide();
                $('#content').show();
            },
            success: function() {
                $('#loading').hide();
                $('#content').show();
            }
        });
        var $container = $("#10_min");
        $container.load("./somewhere/cumulustags.php");
        var refreshId = setInterval(function()
        {
            $container.load('./somewhere/cumulustags.php');
        }, 9000);
    });
})(jQuery);

Any guidance greatly appreciated. I assume this is something to do with the script being unable to process the tags template. In my first example when I call 'current_table.php' it is processed at the same time.

[duke]

OK, so I may have posted my query/thoughts a little too hasty before thinking the process through - in the light of day, obvious why that will not work . I'll leave it posted for entertainment purposes.

So, lets assume I have in the page that I want to refresh the variables:

Code: Select all

<td id="wxtemp"><?php echo $WX['temp'] . $WX['tempunit']; ?></td>
<td id="wxapptemp"><?php echo $WX['apptemp'] . $WX['tempunit']; ?></td>

and so on.....

and then in another template I also have the same as above but this second template is refreshed every xx minutes by a cron job.

Is it possible to put all the "id's" (#wxtemp, #wxapptemp, etc) into the jquery to have them replaced by the ones in the second template?

[steve]

You can (in theory, but I haven't tried it) load part of a page like this:

Code: Select all

$( "#wxtemp" ).load( "anotherpage.html #wxtemp" );

But I'm not sure if that's actually what you're trying to achieve. Also, I think that if you have multiple calls like that to get all of the IDs, it may have to load the other page completely each time - or perhaps it caches it.

[duke]

Hi Steve, yes that is exactly what I am after but unfortunately I cannot get your example to work, it just leaves me with an empty <td>.

In the page where I want the data refreshed I have:

Code: Select all

<td id="wxtemp"></td>

and in the 'refreshed data page' I have

Code: Select all

<td id="wxtemp"><?php echo $WX['temp'] . $WX['tempunit']; ?></td>

and for the jQuery I have:

Code: Select all

<script>
(function($)
{
    $(document).ready(function()
    {
        $( "#wxtemp" ).load( "current_table_2.php #wxtemp" );
    });
})(jQuery);
</script>

I've only been looking into jQuery for a few days so excuse me if I have that utterly wrong. I know that the values are in 'current_table_2.php' by viewing the template directly.

The reason I am experimenting with this is because, currently I have one 'div' that contains all the table data, when this is refreshed by my original code it takes a second or two for the 'div' to refresh and during that time the tables obviously disappear leaving the loading gif which looks a bit strange to the average viewer. If I could just reload the data in the webtags the 'div' and the tables would appear unchanged.

[steve]

I created a page page1.html:

Code: Select all

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
	$(document).ready(function(){
		$("#wxtemp").load("page2.html #wxtemp");
	});
</script>
</head>
<body>
	<div id="wxtemp">11.1 &deg;C</div>
</body>
</html>

Note that the HTML shows 11.1 C initially. The jQuery overwrites that with the value from id "wxtemp" in page page2.html. That page looks like this:

Code: Select all

<!DOCTYPE html>
<html>
<head>
<body>
<div id="wxtemp">22.2 &deg;C</div>
</body>
</html>

If you view page1.html here - http://nybbles.co.uk/test/page1.html - the content of the div has been overwritten with the content of the div from the second page. Admittedly, I'm not using PHP in this example, but I don't think that should make any difference. I'm not familiar with that

(function($)
{
...
})(jQuery);

syntax that you're using, but I'm no jQuery expert myself.

[duke]

Steve, thank you for producing that example. That works fine here too.

I think I have now found the problem, I will test further tomorrow and post back.

4 am start tomorrow so no time now!

[duke]

syntax that you're using, but I'm no jQuery expert myself.

Neither am I, far from it, it was only what I begged/burrowed from around the web . I'm only just getting my head around PHP after a few years.

Ok, the problem appears to be that I had an 'id' in a '<td>' (<td id="wxtemp">) and that would not work, however, if I move the 'id' into a 'span', '<td><span id="wxtemp"></span></td> then it works just perfect, thank you.

Now for the next bit,
1/ if I want to add further tags, is it possible to put them in an array somehow or just repeat the original code for each tag?
2/ how do I implement the automated refresh into your code?

[steve]

1/ if I want to add further tags, is it possible to put them in an array somehow or just repeat the original code for each tag?

You can create the array manually:

Code: Select all

var ids = ["item1","item2","item3"];

for (index = 0; index < ids.length; ++index) {
    $( "#"+id[index]).load( "anotherpage.html #"+id[index]);    
}

Or you can give all the items you want to update a class, and then create the array based on the class. That way you don't have to list all of the items explicitly.

Code: Select all

var ids = $('.someclass').map(function() {
    return this.id; 
});

for (index = 0; index < ids.length; ++index) {
    $( "#"+id[index]).load( "anotherpage.html #"+id[index]);    
}

2/ how do I implement the automated refresh into your code?

You could use a timer:

Code: Select all

setInterval(function(){

// the code you want to execute periodically goes in here

},10000);

The interval is in milliseconds, so 10000 is 10 seconds.

Note: All of the above is untried.

[duke]

Thank you Steve, I'll experiment over the next few nights.

[duke]

I have both examples working and it works well, just what I had envisaged. Unfortunately, the one thing I had not considered was the time required to process all those calls to update the webtags. each one takes between 11 and 12 ms which soon adds up.

Even though I will not be using this in my 'live' template it was a good learning curve for me. I will however be using it on my home server

Thanks Steve

[steve]

I have both examples working and it works well, just what I had envisaged. Unfortunately, the one thing I had not considered was the time required to process all those calls to update the webtags. each one takes between 11 and 12 ms which soon adds up.

Yes, I think the problem is that it loads the whole page each time. There must be a more efficient solution somewhere...

[duke]

That is correct Steve, it can be seen in the js console. Ideally, it needs to read the template containing the variables once only to get the values and then place them in the required place.

Nothing is ever quite that simple........

[BCJKiwi]

I have not followed the posts above in detail but it would seem that what is being discussed is what happens on the ajax-dashboard of the Saratoga Template system.

If so, then there is an example of this functionality in the Saratoga Templates.
ajaxCUwx.js reads realtime.txt on a timer set to match the realtime.txt upload frequency.
It has its own timer as discussed above and updates the individual data points in ajax-dashboard.php but only those that have changed since the last cycle (and momentarily changes the colour to indicate the change).

[mcrossley]

I'm not using the Saratoga templates, but the way I tackled this was to create a <span> to hold all the data to be changed, and gave each span an 'id' that matched the Cumulus web tag name.

eg. <span id="rfall"><#rfall></span>&nbsp;mm

As I store all my data for display in a single JS object (called 'cumulus') with an attribute name also matching the web tag name, updating all the spans is just a simple loop...

Code: Select all

//get all the spans on the page
$('span').each(function () {
	id = this.id ? this.id : this.className;
	this.innerHTML = cumulus[id];		//get the cumulus value and set the field text
});

You can see this (with some additional code to enabled timed highlights) on my main index page (it also uses PHP to construct the page rather than raw Cumulus web tags, but you get the idea.).

[duke]

Thanks Mark, I'll take a look at this over the coming weeks.