PDA

View Full Version : Ajax Tabs Content Script - conflict with countdown script?



nitroblood
05-11-2011, 03:50 AM
1) Script Title: Ajax Tabs Content Script (v 2.2)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/

3) Describe problem: I am using Keith Wood's jQuery countdown script to display timers in the div. So far, the countdown timers work perfectly when fetched through an external page via iframe or just display as inline content. But the timers do not show up when fetched through an external page via Ajax. Is there a way to resolve this? Thanks~

Countdown script URL: http://keith-wood.name/countdown.html

jscheuer1
05-11-2011, 04:38 AM
Ordinarily javascript on an AJAX imported page doesn't run. However, if you go to:

http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/ajaxtabs_suppliment3.htm

and scroll down a bit you will find a section called Main script function and methods syntax with a table called 'ddajaxtabs() constructor function and methods'. The very last entry in that table is:


instance.onajaxpageload=function(pageurl){
//custom code here
}

Its description is:


A custom event handler you can use to execute your own code whenever a tab with content fetched via Ajax is clicked on. See the section on "Nesting Ajax Tabs (http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/ajaxtabs_suppliment2.htm)" for more info.

It can be used to run your countdown code. As it says at that quoted link:


the code to invoke it needs to be moved to the main page instead and called via the "onajaxpageload" event handler

That means that your style and external script tags for jQuery Countdown, example:


<style type="text/css">
@import "css/jquery.countdown.css";

#defaultCountdown { width: 240px; height: 45px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.countdown.js"></script>

need to be in the head of the 'top' page, the page with Ajax Tabs on it.

Once you have that - say your tab instance is like:


<script type="text/javascript">

var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>

You could add the highlighted as shown:


<script type="text/javascript">

var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

countries.onajaxpageload=function(pageurl){
if (pageurl.indexOf("externalcountdown.htm")!== -1){
var newYear = new Date();
newYear = new Date(newYear.getFullYear() + 1, 1 - 1, 1);
$('#defaultCountdown').countdown({until: newYear});
}
}

</script>

where externalcountdown.htm is the name of the page with the defaultCountdown span or div on it.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

nitroblood
05-11-2011, 05:08 AM
What I have been trying to accomplish is to retrieve a series of date/time from database, compare them with current date/time and start counting down.


test URL : http://test.insurancesg.com/view-sales

jscheuer1
05-11-2011, 02:35 PM
The way you have it is fine and by far is easier than using AJAX for this kind of thing. Is it just that you have some aversion to iframe? If you want to switch to AJAX and continue using Ajax Tabs (jQuery has its own AJAX functions, these might be able to pull in your scripts and execute them see - http://api.jquery.com/load/ and http://api.jquery.com/jQuery.ajax/, but that will still be much more complex than iframe), you will probably have to do it as outlined in my previous post.

Please keep in mind that AJAX doesn't import the page, only the content on the page. Most scripts and styles are ignored.

One good thing about jQuery though generally, if you do something like:


$("#ks0").whatever()

and there is no element with that id, nothing will be done and there will generally be no error.

But basically what you would need to do is pull the info from your database to the view-sales page to here (addition highlighted):


<ul id="countrytabs" class="shadetabs">
<li><a href="http://test.insurancesg.com/wp-content/plugins/KiasuSales/ending.php" rel="countrycontainer" class="selected">Ending</a></li>
<li><a href="http://test.insurancesg.com/wp-content/plugins/KiasuSales/starting.php" rel="#iframe">Starting</a></li>
<li><a href="http://test.insurancesg.com/wp-content/plugins/KiasuSales/expired.php" rel="countrycontainer">Expired</a></li>
</ul>

<div id="countrydivcontainer" style="border:1px solid gray; width:97%; margin-bottom: 1em; padding: 5px"></div>

<script type="text/javascript">
var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

countries.onajaxpageload=function(pageurl){
if (pageurl.indexOf("starting.php")!== -1){
$("#ks0").countdown({until: new Date("2011/05/13 22:03:00"), onExpiry: liftOff})
function liftOff() {
window.location.href="http://test.insurancesg.com/90/test-time-2";
}
}
}
</script>

Part or all of the red would come from the database. That depends upon what you are currently getting from the database on starting.php. Since it's no longer iframe though, window.location.href = would need to be changed to some sort of AJAX call:


$('#countrydivcontainer').load('http://test.insurancesg.com/90/test-time-2');

The jQuery .load() function also allows for an optional callback if you need to initialize timers on the page it imports (the countries.onajaxpageload function is the optional callback for Ajax Tabs).

You could have else if statements to follow for other pages. Possible example of one:


<script type="text/javascript">
var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

countries.onajaxpageload=function(pageurl){
if (pageurl.indexOf("starting.php")!== -1){
$("#ks0").countdown({until: new Date("2011/05/13 22:03:00"), onExpiry: liftOff})
function liftOff() {
$('#countrydivcontainer').load('http://test.insurancesg.com/90/test-time-2', function(){/* optional callback code */});
}
} else if (pageurl.indexOf("some_other.php")!== -1){
$("#ks0").countdown({until: new Date("2011/06/19 10:30:00"), onExpiry: liftOff})
function liftOff() {
$('#countrydivcontainer').load('yet_another_page', function(){/* optional callback code */});
}
}
}
</script>

These scripts and style and any others required by AJAX imported pages should be on the view-sales page (the 'top' page):


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://test.insurancesg.com/wp-content/plugins/KiasuSales/js/jquery.countdown.js"></script>
<style type="text/css">
@import "http://test.insurancesg.com/wp-content/plugins/KiasuSales/css/jquery.countdown.css";
#ks0 { width: 240px; height: 45px; }
</style>

But, as I say, iframe is so much easier, why not just use it?

nitroblood
05-11-2011, 05:09 PM
Basically this is what I have in the starting.php


<?php global $wpdb,$ksdb,$root_dir;
$now=date('Y-m-d H:i:s');
$wpdb->show_errors();
$ks_view = $wpdb->get_results("SELECT * FROM $ksdb WHERE (start_date>'$now' && exp_date>'$now') ORDER BY start_date ASC");
$i=0;
?>
<!-- #Countdown Timer starts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo $root_dir.'/wp-content/plugins/KiasuSales/js/jquery.countdown.js';?>"></script>
<!-- #Countdown Timer End-->
<style type="text/css">
@import "<?php echo $root_dir.'/wp-content/plugins/KiasuSales/css/jquery.countdown.css';?>";
<?php for ($rows=0;$rows<count($ks_view);$rows++){?>
#ks<?php echo $rows;?> { width: 240px; height: 45px; }
<?php }?>
</style>
<?php foreach($ks_view as $ks) {
$post=get_post(intval($ks->postid));
$author = get_userdata(intval($post->post_author));
echo "<a class='tabtitle' href=".get_permalink(intval($ks->postid)).">".$post->post_title."</a> by ".$author->display_name."<br>";
$start_date=preg_replace('/-/','/',$ks->start_date);
echo "Sales starting in";
?>
<script type="text/javascript">
$(function () {
$("#ks<?php echo $i;?>").countdown({until: new Date("<?php echo $start_date;?>"), onExpiry: liftOff})
});
function liftOff() {
window.location.href="<?php the_permalink() ?>";
}
</script>
<div id="ks<?php echo $i;?>"></div><br>
<?php $i++; }?>

Due to some previous bad experiences with iframe, I would rather not use it. However, since I'm not familiar with jQuery, it seems to be the easier way out for me. Nonetheless, I will keep on trying until I run out of all possible options, before switching to iframe~ Thanks~

jscheuer1
05-12-2011, 05:12 AM
My PHP is probably just marginally if at all better than your jQuery. I have no experience with databases.

If <?php the_permalink() ?> is different for each countdown (looks like it is from the served source code of ending.php), I can see one problem right away. Even with starting.php as is, as a standalone page, if there are more than one countdowns on it, the last:


function liftOff() {
window.location.href="<?php the_permalink() ?>";
}

will overwrite all the others, so any/all countdowns, once they expire, would go to the last one's 'the_permalink()'. To fix that, you would either need to establish javascript scope for the onExpiry function, or come up with unique names (as you have for the divisions' ids) for each liftOff function.

I'd go with javascript scope, change:


<script type="text/javascript">
$(function () {
$("#ks<?php echo $i;?>").countdown({until: new Date("<?php echo $start_date;?>"), onExpiry: liftOff})
});
function liftOff() {
window.location.href="<?php the_permalink() ?>";
}
</script>

to:


<script type="text/javascript">
$(function () {
$("#ks<?php echo $i;?>").countdown({until: new Date("<?php echo $start_date;?>"), onExpiry: function(){
window.location.href="<?php the_permalink() ?>";
}})
});
</script>

That still doesn't get us much closer to using the page with AJAX though.

For that, do as I suggest. If you want starting.php to still work on its own, you can leave it (with the one change I suggested above) alone. Even if you don't want it to work on its own, it would still need that portion of the PHP code that's required to generate the markup. Either way, put this:


<?php global $wpdb,$ksdb,$root_dir;
$now=date('Y-m-d H:i:s');
$wpdb->show_errors();
$ks_view = $wpdb->get_results("SELECT * FROM $ksdb WHERE (start_date>'$now' && exp_date>'$now') ORDER BY start_date ASC");
$i=0;
?>
<!-- #Countdown Timer starts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo $root_dir.'/wp-content/plugins/KiasuSales/js/jquery.countdown.js';?>"></script>
<!-- #Countdown Timer End-->
<style type="text/css">
@import "<?php echo $root_dir.'/wp-content/plugins/KiasuSales/css/jquery.countdown.css';?>";
<?php for ($rows=0;$rows<count($ks_view);$rows++){?>
#ks<?php echo $rows;?> { width: 240px; height: 45px; }
<?php }?>
</style>

on the top page (view-sales). And on that same page, where you have:


<script type="text/javascript">
var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>

do:


<script type="text/javascript">
var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
countries.onajaxpageload=function(pageurl){
if (pageurl.indexOf("starting.php")!== -1){
<?php foreach($ks_view as $ks) {
$start_date=preg_replace('/-/','/',$ks->start_date);
?>
$("#ks<?php echo $i;?>").countdown({
until: new Date("<?php echo $start_date;?>"),
onExpiry: function(){
$('#countrydivcontainer').load('<?php the_permalink() ?>', function(){/* optional callback code */});
}
});
<?php $i++; }?>
}
}
</script>

Note: I've gone over this pretty thoroughly but have no way of testing it. Much of it relies upon the fact that your current code appears to work. It doesn't take into account things for which you might not have tested your current code for. And it may be subject to typos and/or misunderstanding on my part. You can backup what you have and try it, if there are PHP errors, those should be reported in some way, hopefully one that will be easy to understand and correct. If there are javascript problems, give me a link to the new page and I'll see what I can find out.

nitroblood
05-12-2011, 06:18 AM
Hi John, I tried your solutions but unfortunately, the outcome is still the same.

Maybe I should just dropped the idea of using ajax and external files. Instead, I should have focus on using this tab content script(http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm) and find a way to refresh the tab contents whenever a tab is clicked~

jscheuer1
05-12-2011, 02:54 PM
Hi John, I tried your solutions but unfortunately, the outcome is still the same.

Post a link to the example where you've tried what I suggested in my last post. It may just need some tweaking.


Maybe I should just dropped the idea of using ajax and external files. Instead, I should have focus on using this tab content script(http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm) and find a way to refresh the tab contents whenever a tab is clicked~

Unless you're willing to refresh the page each time a tab is clicked, that way is AJAX or iframe. So your stuck with the same issue again.

nitroblood
05-12-2011, 06:03 PM
Hi John,

The URL is still http://test.insurancesg.com/view-sales. I amended it for the purpose of trying out tab contents script and I guessed you are right, I added 'location.reload()' to the js file and it refreshes the whole page.

this.tabs[i].onclick=function(){
tabinstance.expandtab(this)
location.reload()
tabinstance.cancelautorun() //stop auto cycling of tabs (if running)
return false
}

By the way, you had also pointed out one of my mistakes. I didn't realised that the permalink had changed, it is suppose to return to the view-sales page whenever a countdown timer reaches 0, acting like a refresh.

Will focus on ending.php since it has more time counters with similar functions and codes.

nitroblood
05-12-2011, 07:06 PM
Ok John, it seems that the declaration for the timers width & height disappear when I do a re-test on your suggestion. That should be the reason why I didn't see the timers during the first run.

I managed to cut and paste from my backup and your script and voila! It works!

However, new problem arises soon after:

When a timer reaches 0, the content refreshes and all the timers disappear again~ I have to click on the 'view sales' again or refreshes the whole page to get them back, clicking on the 'ending' tab does NOT help at all. I checked the source code and everything seems to be intact~

jscheuer1
05-13-2011, 01:47 AM
What exactly do you want to have happen when a countdown reaches 0? It seems to me that under the present setup, nothing would be fine, or perhaps removal would be a good idea. What if anything happens in the database when a countdown expires? If a countdown is expired and one loads the page that fetches countdowns from the database, is that one skipped?

In order to tell you with certainty just what to put there, I would need to know the answers to those questions.

That said, try changing:


<script type="text/javascript">
var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
countries.onajaxpageload=function(pageurl){
if (pageurl.indexOf("ending.php")!== -1){
<?php foreach($ks_view as $ks) {
$start_date=preg_replace('/-/','/',$ks->start_date);
?>
$("#ks<?php echo $i;?>").countdown({
until: new Date("<?php echo $start_date;?>"),
onExpiry: function(){
$('#countrydivcontainer').load('<?php the_permalink() ?>', function(){/* optional callback code */});
}
});
<?php $i++; }?>
}
}
</script>

to:


<script type="text/javascript">
var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
countries.onajaxpageload=function(pageurl){
if (pageurl.indexOf("ending.php")!== -1){
<?php foreach($ks_view as $ks) {
$start_date=preg_replace('/-/','/',$ks->start_date);
?>
$("#ks<?php echo $i;?>").countdown({
until: new Date("<?php echo $start_date;?>"),
onExpiry: function(){
$('#ks<?php echo $i;?>').countdown('destroy');
}
});
<?php $i++; }?>
}
}
</script>

That should remove the expired countdown without requiring a refresh of the page and without requiring that the ending.php page be fetched again.

nitroblood
05-13-2011, 07:03 AM
Basically, when a countdown expired, the script should check with the server and get the updated countdown dates. The expired countdown date will be out of the condition set down.

I can't just simply remove the countdown as the other information associated with that countdown will still be around~

Tried changing :

$('#countrydivcontainer').load('<?php the_permalink() ?>', function(){/* optional callback code */});
to:

$('#ks<?php echo $i;?>').countdown('destroy');

Countdown timer removed on expiry, but when I clicked on the 'ending' tab, the first countdown timer becomes 0~

jscheuer1
05-13-2011, 01:33 PM
I don't see any 0~

nitroblood
05-13-2011, 03:24 PM
I don't see any 0~

That's probably solved due to the 'reload' I put in the code.


onExpiry: function(){
location.reload();
}

However, this will caused the page to be reloaded every time a countdown reaches 0, which defeats the purpose of using Ajax.

jscheuer1
05-13-2011, 04:04 PM
I'm still not really clear what you want to have happen. And I'm unsure what happens if a countdown expires and we re-fetch via AJAX the page that has the expired countdown on it. But there's a chance this might work out:


<script type="text/javascript">
var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
countries.onajaxpageload=function(pageurl){
if (pageurl.indexOf("ending.php")!== -1){
<?php foreach($ks_view as $ks) {
$start_date=preg_replace('/-/','/',$ks->start_date);
?>
$("#ks<?php echo $i;?>").countdown({
until: new Date("<?php echo $start_date;?>"),
onExpiry: function(){
$.ajax({
url: 'ending.php',
cache: false,
success: function(data){$('#countrydivcontainer').html(data);}
});
}
});
<?php $i++; }?>
}
}
</script>

Substitute expired.php for ending.php (two places) if desired.

But I'm concerned that this part:


<?php global $wpdb,$ksdb,$root_dir;
$now=date('Y-m-d H:i:s');
$wpdb->show_errors();
$ks_view = $wpdb->get_results("SELECT * FROM $ksdb WHERE (start_date>'$now' && exp_date>'$now') ORDER BY start_date ASC");
$i=0;
?>
<!-- #Countdown Timer starts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo $root_dir.'/wp-content/plugins/KiasuSales/js/jquery.countdown.js';?>"></script>
<!-- #Countdown Timer End-->
<style type="text/css">
@import "<?php echo $root_dir.'/wp-content/plugins/KiasuSales/css/jquery.countdown.css';?>";
<?php for ($rows=0;$rows<count($ks_view);$rows++){?>
#ks<?php echo $rows;?> { width: 240px; height: 45px; }
<?php }?>
</style>

on view-sales hasn't changed and can only do so with a reload of view-sales, unless we figure out a way to pull the new values in a usable fashion. Theoretically that can be done with AJAX, but it would be at least a bit complicated.

I'm also thinking though that refreshing view-sales at that point isn't the worst thing in the world. We've avoided iframe, and prevented the need to refresh the page in most cases.

nitroblood
05-13-2011, 06:24 PM
Hi John, sorry for not making myself clear. What I want is simple:

1. Assuming 4 unexpired date/time are retrieve from database, I'll have countdown timers(t1,t2,t3,t4) running,
2. When t1 expires, an ajax request is sent to the server and retrieve the remaining 3, thus I am left with 3 countdown timers(t2,t3,t4) running.
3. If by any chance, new information is inserted into database before t1 expires, I'll be able to retrieve(t2,t3,t4,t5....) when t1 expires, thus having more than 3 countdown timers(t2,t3,t4,t5....) running.

Currently, the reload on expiry is performing exactly what I wanted. Like you said, this is still better than what I had tried before~

Hope that clarify everything :)

Just faced with another problem: when I changed the expiry time of a countdown timer (eg. from 2 days to 3 days), the timer cannot reflect the new changes even after I clicked on any of the 3 tabs. Changes will only appear after a reload~

jscheuer1
05-14-2011, 11:38 AM
In tabcontent.js change:


ddajaxtabssettings.bustcachevar=0 //bust potential caching of external pages after initial request? (1=yes, 0=no)

to:


ddajaxtabssettings.bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)

On view-sales use (instead of the script we had with the PHP in it):


<script type="text/javascript">
var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
countries.onajaxpageload=function(pageurl){
var container = $('#' + this.contentdivid);
$('div[id^=ks]').each(function(){
var ks = $(this);
ks.countdown({
until: new Date(ks.attr('data-start_date')),
onExpiry: function(){
$.ajax({
url: pageurl,
cache: false,
success: function(data){
container.html(data);
countries.onajaxpageload(pageurl);
}
});
}
});
});
};
</script>

On each of the external pages (ending.php, starting.php, etc.) change:


<div id="ks<?php echo $i;?>"></div><br>

to:


<div id="ks<?php echo $i;?>" data-start_date="<?php echo $start_date;?>"></div><br>

That should take care of everything except that, if you change the database, while a tab is displayed, it will not update until it's displayed again. I don't think you even mentioned that as an issue yet though, it might not be important. If it is we can probably set up an interval to update the current tab periodically.

Now, same caveats as before - I have no way to test this and there may be typos or errors in my understanding of the situation. I did test out the stuff I could easily test. So backup what you have that's working so far, and give this a try.

Something to Consider for Later:

I notice you have 2 instances of jQuery on the page. They're both version 1.4.4 but the first is in noConflict mode. They're in different locations, so must load twice. That's wasteful. Once we get things working you should be able to get rid of the first and replace it with the second, which you can remove from its current position on view-sales. Then you just add the highlighted as shown after the theme.js external tag:


<script type='text/javascript' src='http://test.insurancesg.com/wp-content/plugins/buddypress-mobile/themes/default/theme.js?ver=3.1.2'></script>
<script type="text/javascript">
var $ = jQuery;
</script>

nitroblood
05-14-2011, 01:05 PM
Works like a charm! This is exactly what I want!

However, there is still a problem : On expiry, after the expired countdown timer vanished, if I clicked on any of the 3 tabs(ending,starting etc.) all the countdown timers disappear from the contents~

jscheuer1
05-14-2011, 03:34 PM
I'm not sure if this is the cause or not, but you've placed:


<?php global $wpdb,$ksdb,$root_dir;
$now=date('Y-m-d H:i:s');
$wpdb->show_errors();
$ks_view = $wpdb->get_results("SELECT * FROM $ksdb WHERE (start_date>'$now' && exp_date>'$now') ORDER BY start_date ASC");
$i=0;
?>
<!-- #Countdown Timer starts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo $root_dir.'/wp-content/plugins/KiasuSales/js/jquery.countdown.js';?>"></script>
<!-- #Countdown Timer End-->
<style type="text/css">
@import "<?php echo $root_dir.'/wp-content/plugins/KiasuSales/css/jquery.countdown.css';?>";
<?php for ($rows=0;$rows<count($ks_view);$rows++){?>
#ks<?php echo $rows;?> { width: 240px; height: 45px; }
<?php }?>
</style>

and:


<script type="text/javascript">
var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
countries.onajaxpageload=function(pageurl){
var container = $('#' + this.contentdivid);
$('div[id^=kss]').each(function(){
var kss = $(this);
kss.countdown({
until: new Date(kss.attr('data-start_date')),
onExpiry: function(){
$.ajax({
url: pageurl,
cache: false,
success: function(data){
container.html(data);
countries.onajaxpageload(pageurl);
}
});
}
});
});
$('div[id^=ks]').each(function(){
var ks = $(this);
ks.countdown({
until: new Date(ks.attr('data-exp_date')),
onExpiry: function(){
$.ajax({
url: pageurl,
cache: false,
success: function(data){
container.html(data);
countries.onajaxpageload(pageurl);
}
});
}
});
});
};
</script>

inside the <div id="countrydivcontainer" division.

The first bit, the PHP code, belongs in the head after the meta tags. The second part, the javascript, belongs after the closing </div> tag for countrydivcontainer. If in doubt, it can go right before the closing </body> tag.

nitroblood
05-14-2011, 03:57 PM
The first bit, the PHP code, belongs in the head after the meta tags.

From my understanding, php codings can be placed anywhere though it's a good practice to put in the head section.


The second part, the javascript, belongs after the closing </div> tag for countrydivcontainer. If in doubt, it can go right before the closing </body> tag.

I tried putting the javascript after the closing </div> but the outcome is still the same~

jscheuer1
05-14-2011, 04:10 PM
That might have been because the older version was still cached. Or there could still be a problem. I see you've now added:


location.reload()

That will make it impossible to diagnose via viewing the generated source code, which would have been hard enough, I would have had to wait around until just before something expired and catch it in the act.

However, you said the countrydivcontainer had:


all the countdown timers disappear

was it empty? Or were the links still there?

nitroblood
05-14-2011, 04:21 PM
I was thinking of adding that location.reload as my last resort~


was it empty? Or were the links still there?

Only the countdown timers disappear, the other info are still shown, with empty spaces on the portion where those countdown timers are suppose to be

I'll change the database to make expiries at an interval of 15 mins(ending tab). Hopefully you'll be able to catch them~

jscheuer1
05-14-2011, 05:56 PM
Must be a timezone thing, they all expire 12 or so hours from now. That's OK, I'm usually up at that time. You must be about a quarter of a world away from me, probably to my east, Europe?

Anyways, the fact that the links show up would probably mean that the page is loading:


container.html(data);

but that the:


countries.onajaxpageload(pageurl);

just after that is not firing, or that if it is, it's having some problem. I'll give that one some thought.

jscheuer1
05-14-2011, 06:11 PM
In the meantime you could do:


<script type="text/javascript">
var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
countries.onajaxpageload=function(pageurl){
var container = $('#' + this.contentdivid);
$('div[id^=kss]').each(function(){
var kss = $(this);
kss.countdown({
until: new Date(kss.attr('data-start_date')),
onExpiry: function(){
$.ajax({
url: pageurl,
cache: false,
success: function(data){
//container.html(data);
//countries.onajaxpageload(pageurl);
container.html('<div>Can You See This?</div>');
alert(typeof countries.onajaxpageload);
}
});
}
});
});
$('div[id^=ks]').each(function(){
var ks = $(this);
ks.countdown({
until: new Date(ks.attr('data-exp_date')),
onExpiry: function(){
$.ajax({
url: pageurl,
cache: false,
success: function(data){
//container.html(data);
//countries.onajaxpageload(pageurl);
container.html('<div>Can You See This?</div>');
alert(typeof countries.onajaxpageload);
}
});
}
});
});
};
</script>

That should show:


Can You See This?

in the countrydivcontainer and alert:


function

If not, tell me what it does do.

nitroblood
05-15-2011, 05:59 AM
Must be a timezone thing, they all expire 12 or so hours from now
Oops, forgot about that~


You must be about a quarter of a world away from me, probably to my east, Europe?
I'm further to the east, Asia, Singapore~ ^^


That should show:

Quote:
Can You See This?
in the countrydivcontainer and alert:

Quote:
function

Yup, shown and alerted exactly like what you had mentioned~

jscheuer1
05-15-2011, 12:12 PM
OK, let's try a different approach - using Ajax Tabs own function to reload the content:


<script type="text/javascript">
var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
countries.onajaxpageload=function(pageurl){
var container = $('#' + this.contentdivid);
$('div[id^=kss]').each(function(){
var kss = $(this);
kss.countdown({
until: new Date(kss.attr('data-start_date')),
onExpiry: function(){
setTimeout(function(){countries.loadajaxpage(pageurl);}, 0);
}
});
});
$('div[id^=ks]').each(function(){
var ks = $(this);
ks.countdown({
until: new Date(ks.attr('data-exp_date')),
onExpiry: function(){
setTimeout(function(){countries.loadajaxpage(pageurl);}, 0);
}
});
});
};
</script>

nitroblood
05-15-2011, 12:50 PM
Amazing! It works!! John! Really appreciate for your time & effort~ :)

jscheuer1
05-15-2011, 03:17 PM
That's Great! There could be one other slight problem though. If you want this to work out across timezones, jQuery Countdown should use its serverSync property. See serverSync on:

http://keith-wood.name/countdownRef.html

Also, don't forget about what I mentioned earlier as regards using only one jQuery for the page.

Another thing I notice is all this business about:


<style type="text/css">
@import "<?php echo $root_dir.'/wp-content/plugins/KiasuSales/css/jquery.countdown.css';?>";
<?php for ($rows=0;$rows<count($ks_view);$rows++){?>
#ks<?php echo $rows;?> { width: 240px; height: 45px; }
<?php }?>
</style>

could probably be dropped. jQuery Countdown adds a class to all countdown elements, hasCountdown. So you could just use:


<style type="text/css">
@import "<?php echo $root_dir.'/wp-content/plugins/KiasuSales/css/jquery.countdown.css';?>";
</style>

and edit countdown.css at the beginning:


/* jQuery Countdown styles 1.5.9. */
.hasCountdown {
border: 1px solid #ccc;
background-color: #eee;
width: 240px;
height: 45px;
}
.countdown_rtl {
direction: rtl;
}
.countdown_holding span {
background-color: #ccc;
}
.countdown_row {
clear: both;
width: 10 . . .

nitroblood
05-16-2011, 04:28 AM
If you want this to work out across timezones, jQuery Countdown should use its serverSync property.

I'll probably use this locally, so timezone is not an issue~


Also, don't forget about what I mentioned earlier as regards using only one jQuery for the page.

Another thing I notice is all this business about:

Code:
<style type="text/css">
@import "<?php echo $root_dir.'/wp-content/plugins/KiasuSales/css/jquery.countdown.css';?>";
<?php for ($rows=0;$rows<count($ks_view);$rows++){?>
#ks<?php echo $rows;?> { width: 240px; height: 45px; }
<?php }?>
</style>
could probably be dropped. jQuery Countdown adds a class to all countdown elements, hasCountdown. So you could just use:

Code:
<style type="text/css">
@import "<?php echo $root_dir.'/wp-content/plugins/KiasuSales/css/jquery.countdown.css';?>";
</style>
and edit countdown.css at the beginning:

Code:
/* jQuery Countdown styles 1.5.9. */
.hasCountdown {
border: 1px solid #ccc;
background-color: #eee;
width: 240px;
height: 45px;
}
.countdown_rtl {
direction: rtl;
}
.countdown_holding span {
background-color: #ccc;
}
.countdown_row {
clear: both;
width: 10 . . .

Yup, already changed that~ thanks~

jscheuer1
05-16-2011, 03:37 PM
One thing I forgot to mention was that I did (two places):


setTimeout(function(){countries.loadajaxpage(pageurl);}, 0);

on a hunch, wanting to save a step, thinking there might be other things that needed a chance to execute in javascript before we reloaded the content, and/or give the server a millisecond or more (however long the other javascript processes take) to catch up before being asked for the updated content. This might not be required. If you're interested you could try it as just:


countries.loadajaxpage(pageurl);

If that works, it's more efficient. On the other hand, if the server indeed needs time to catch up, perhaps a longer timeout would be better:


setTimeout(function(){countries.loadajaxpage(pageurl);}, 300);

nitroblood
05-16-2011, 05:03 PM
Code:
countries.loadajaxpage(pageurl);

That's seems to be working fine too~ thanks~