precedence for my ajax and javascript

Hi there,

I have a class that calls a dynamic countdown on my webpage.
when I call the class it looks like this.

Expand|Select|Wrap|Line Numbers

 
<script type='text/javascript'>

var futuredate=new cdtime("contain","April 21, 2011 12:55:55")

                    futuredate.displaycountdown("days", formatresults)

</script>

A quick explanation: 'contain' is the div in which the class appears, and "April 21, 2011 12:55:55" is the future date set for countdown.
the 'days' and 'formatresults' is just the format that the countdown is displayed in.

now ideally what I am trying to do is instead of hard-coding my dates into my class like this, I want to pull the date from my database as a variable using Ajax. that function looks like this.

Expand|Select|Wrap|Line Numbers

 
<script type='text/javascript'>

var myret;

function get_bid(div_id)
 
{

if (div_id == 'contain')

{

var pass = 'apple_01';

} 

else if (div_id == 'contain2')

{

var pass = 'mp3_01';

}

else if (div_id == 'contain3')

{

var pass = 'car_01';

}

else if (div_id == 'contain4')

{

var pass = 'blackberry_01';

}

var xmlhttp;

if (window.XMLHttpRequest)

  {// code for IE7+, Firefox, Chrome, Opera, Safari

  xmlhttp=new XMLHttpRequest();

  }

else

  {// code for IE6, IE5

  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

xmlhttp.onreadystatechange=function()

  {

  if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {
 
    var get_data = document.getElementById('test');

    myret = xmlhttp.responseText;

    get_data.innerHTML = myret;
 
    }
 
  }

xmlhttp.open("GET","bid_data.php?q="+pass,true);

xmlhttp.send(null);
 
}
 
</script>

the variable myret contains the date variable that I want to use in my countdown class. i.e. I want to replace the hard-coded date with myret.

Expand|Select|Wrap|Line Numbers

 
var futuredate=new cdtime("contain",myret)

                    futuredate.displaycountdown("days", formatresults)

I know myret is returning the correct information cos I just inserted it into a test div.

but when I use it in my countdown class, it returns 'not defined' on my web page.

Please could someone help me, I have been trying to use firebug to see what is being called when but I am super confused!!
Thank you so much for your help

Avatar19

Apr 20 '11 #1

Subscribe Post Reply

✓ answered by JKing

Try giving myret a default value and see what happens. If the default value is displayed and not the pulled date then the ajax is finishing after the javascript has been processed.

1845

Avatar19

can anyone give me any thoughts/ help????

Apr 22 '11 #2

JKing

1,206

Expert 1GB

Do you have a link to the page in question? Having something to work with may be more helpful.

Apr 25 '11 #3

Avatar19

I can't give a link as far as I know cos it's not live on the web, I am developing on my laptop, but here is the actual file and a screen shot of whats returned.

The information you need is btwn lines 219-236.
lines 146,147,187,188 hold the divs that display the countdowns.
I can include the countdown class if needs be, just let me know.

Expand|Select|Wrap|Line Numbers

 
<?
 
require('database/login_check.php');

require('collect_sessioncvars.php');

$_SESSION['url'] =  curPageURL();
 
//echo $logged_in.'<br>',$logged_incorrect.'<br>',$username.'<br>',$credits.'<br>',$email.'<br>' ;
 
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Zebra Spots</title>

<link rel="stylesheet" href="css/index.css" type="text/css" />

<script type='text/javascript' src = 'http://localhost/zebra/database/js/win.js'>

</script>

<script type='text/javascript' src = 'http://localhost/zebra/database/js/handler.js'>

</script>
 
<script type='text/javascript' src = 'http://localhost/zebra/database/js/cdclass.js'>//countdown

</script>
 
<script type='text/javascript'>
 
function toggle_website()

{
 
var login = document.getElementById('regbar');

var incorrect = document.getElementById('inc_loginmsg');

var login_form = document.getElementById('loginform');

var login_info = document.getElementById('login_info');
 
if ('<? echo $logged_in?>' =='true' )

{

login.style.display = 'none';

login_form.style.display = 'none';

login_info.style.display = '';
 
}

else if ('<? echo $logged_in?>' == 'false')

{

login.style.display = '';

}

if ('<? echo $logged_incorrect?>' == 'false')

{

incorrect.style.display = 'none';

}

}

</script>
 
<script type='text/javascript'>

function raise_alert()

{

alert("You must be logged in to bid!!!");

}

</script>
 
</head>
 
<body  onload = "toggle_website()">
 
<div id="container">

    <div id="header">

        <h1><a href="index.php">Zebra Spots</a></h1>

        <h2>bid spotting at it's best</h2>

        <div class="clear"></div>

    </div>
 
    <div id="nav" >

    <ul>

            <li class="selected"><a href="index.php">Home</a></li>

            <li><a href="buyspots.php">Buy Spots</a></li>

            <li><a href="help.php">Help</a></li>

            <li><a href="contact.php">Contact</a></li>

            <span id ='regbar' style = 'display:' ><li ><a href="registration.php">Register</a></li></span>

            </ul>

    </div>

    <div id="body" style='display:'>
 
        <div id = 'loginform' style = 'display:'>

        <form action = "database/login.php" method ="POST" name = 'loginform' >

        <b>email</b>&nbsp <input size = "15px" type="text" onfocus="if(this.value=='Your email')this.value='';" value="Your email" name="email">&nbsp 

        <b>password</b>&nbsp <input type = "password" onfocus="if(this.value=='*********')this.value='';" name = "password" value = '*********' size = "15px" />&nbsp 

        <input  type = "submit" value = "Login"  />        

        <form/>    

        </div>

        <p></p>
 
        <div id = 'login_info' style = 'display:none' align = ''>

        <h2>    Welcome,&nbsp   <? echo $username ?> &nbsp&nbsp&nbsp  <span style=color:green><? echo $credits ?> credits </span>&nbsp&nbsp&nbsp <a href='database/logout.php'>logout</a> </h2> 
 
        <p></p>

        </div>
 
        <div id ='inc_loginmsg'>

        <span  ><h2 style=color:red>Incorrect Email or Password</h2><a href = 'password_forgot.php'>forgot password?</a></span>

        <p></p>

        </div>
 
            <div id="content">

                <h1><center>Current bids</center></h1>

                <div class="box">
 
                <table>

                    <tr>
 
                        <div id='auction1_price'><td align='center'><div id='auction1retail'></div></td></div>

                        <div id='auction2_price'><td align='center'><div id='auction2retail'></div></td></div>
 
                    </tr>
 
                    <tr>
 
                        <div id='auction1_price'><td align='center'><div id='auction1name'></div></td></div>

                        <div id='auction2_price'><td align='center'><div id='auction2name'></div></td></div>
 
                    </tr>
 
                    <tr>
 
                        <div id='auction1'><td align='center'><div id='auction1picture'><img src ="images/ipad2.jpg" width = "180px"/></div></td></div>

                        <div id='auction2'><td align='center'><div id='auction2picture'><img src ="images/coby-mp-3.jpg" width = "180px"/></div></td></div>
 
                    </tr>
 
                    <tr>
 
                        <td align='center'><div id='contain'></div></td>

                        <td align='center'><div id='contain2'></div></td>
 
                    </tr>
 
                    <tr>
 
                        <td align='center'><div id = 'username_auction1'>Michell2</div></td>

                        <td align='center'><div id = 'username_auction1'>Assent</div></td>    
 
                    </tr>
 
                    <tr>
 
                        <td align='center'><div><input type = 'button' value = "bid now" id = "auction1_button" onclick="raise_alert()"></div></td>

                        <td align='center'><div><input type = 'button' value = "bid now" id = "auction2_button" onclick="raise_alert()"></div></td>
 
                    </tr>
 
                    <tr>
 
                        <div id='auction1_price'><td align='center'><div id='auction3retail'></div></td></div>

                        <div id='auction2_price'><td align='center'><div id='auction4retail'></div></td></div>
 
                    </tr>

                    <tr>
 
                        <div id='auction1_price'><td align='center'><div id='auction3name'></div></td></div>

                        <div id='auction2_price'><td align='center'><div id='auction4name'></div></td></div>
 
                    </tr>
 
                    <tr>
 
                        <div id='auction3'><td align='center'><div id='auction3picture'><img src ="images/blackberry8110.jpg" width = "180px"/></div></td></div>

                        <div id='auction4'><td align='center'><div id='auction4picture'><img src ="images/cars_07.jpg" width = "180px"/></div></td></div>
 
                    </tr>
 
                    <tr>
 
                        <td align='center'><div id='contain3'></div></td>

                        <td align='center'><div id='contain4'></div></td>
 
                    </tr>
 
                    <tr>
 
                        <td align='center'><div id = 'username_auction4'>Avatar19</div></td>

                        <td align='center'><div id = 'username_auction1'>Kraken34</div></td>    
 
                    </tr>
 
                    <tr>
 
                        <td align='center'><div><input  type = 'button' value = "bid now" id = "auction3_button" onclick="raise_alert()"></div></td>

                        <td align='center'><div><input type = 'button' value = "bid now" id = "auction4_button" onclick="raise_alert()"></div></td>
 
                    </tr>
 
                    <tr><td><div id = 'test'></div></td></tr>
 
                </table>
 
                </div>
 
            </div>

        <script type ='text/javascript'>
 
                </script>

                <script>    

                    get_bid('contain2');        

                    //var futuredate=new cdtime("contain","April 22, 2011 13:10:00")

                    var futuredate=new cdtime("contain",myret)

                    futuredate.displaycountdown("days", formatresults)
 
                </script>

                <script>

                    var futuredate=new cdtime("contain2","April 28, 2011 12:55:55")

                    futuredate.displaycountdown("days", formatresults)

                </script>

                <script>

                    var futuredate=new cdtime("contain3","April 25, 2011 19:00:22")

                    futuredate.displaycountdown("days", formatresults)

                </script>

                <script>

                    var futuredate=new cdtime("contain4","April 25, 2011 19:00:05")

                    futuredate.displaycountdown("days", formatresults)

                </script>

        <div class="sidebar">

            <ul>    
 
                <li>

                   <center> <h4>About Zebra Spots</h4></center>

                    <ul>

                        <li>

                            <p style="margin: 0;"><strong>Zebra Spots</strong> is a online bidding Site developed for people who sre willing to acquire cutting edge technology and goods for a fraction of the price.

                            As a company we pride ourselves in delivering a service that is both secure and accesible to users, so that you can have peace of mind while while enjoying our online service</p>

                        </li>

                    </ul>

                </li>
 
                <li>

                    <center><h4>Zebra on the net</h4></center>

                    <ul>

                        <li><a href="#" title="Blogger"><strong>Check out our blog</strong></a> - All the people whom Zebra spots have made<strong> big winners</strong>, you could be next!!</li>

                        <li><a href="#" title="Youtube"><strong>Our youtube adventure</strong></a> - Testify<strong> about your experience</strong></li>

                        <li><a href="#" title="Youtube"><strong>Tweet your experience</strong></a> - Tweet <strong>yah or nah!!</strong></li>

                    </ul>

                </li>
 
            </ul> 

        </div>

        <div class="clear"></div>

    </div>

    <div id="footer">

        <div class="footer-content">
 
                <span class="sitename">Zebra Spots</span>

                    <p class="footer-links">
 
                    <a href="#container" class="backtotop">Back to top</a>

                    </p>

        </div>

        <div class="footer-bottom">

            <p>&copy; Zebra Spots 2011. Website Design by &nbsp <a href="http://www.spyka.net">Free CSS Templates</a> | <a href="http://www.justfreetemplates.com">Free Web Templates</a></p>

         </div>
 
    </div>

</div>

</body>

</html>

thanks for any help, if I need to include anything else for further reference please let me know. I might be able to put this up on the server so you can see but I am not sure when.

Apr 25 '11 #4

JKing

1,206

Expert 1GB

I can't really offer too many suggestions. You need to debug it.

First off I would do the following:
Is the value of myret correct?
Is the format of the value of myret correct?

If both of those checkout I would move on to how it is being handled by your cdtime class. Likely the error will be here if not in the former.

Apr 25 '11 #5

Avatar19

perhaps you can offer some advice on a more focused question.
I have included a pdf attachment of what I am explaining.

I believe the problem lies with the fact that my countdownclass is using the variable myret before it can be set. which is confusing me. Both my ajax func that collects my database info and my cd class are placed in my header. My ajax looks like

Expand|Select|Wrap|Line Numbers

 
<script type='text/javascipt'>

var myret;

function get_bid(div_id)
 
{

if (div_id == 'contain')

{

var pass = 'apple_01';

} 

else if (div_id == 'contain2')

{

var pass = 'mp3_01';

}

else if (div_id == 'contain3')

{

var pass = 'car_01';

}

else if (div_id == 'contain4')

{

var pass = 'blackberry_01';

}

var xmlhttp;

if (window.XMLHttpRequest)

  {// code for IE7+, Firefox, Chrome, Opera, Safari

  xmlhttp=new XMLHttpRequest();

  }

else

  {// code for IE6, IE5

  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

xmlhttp.onreadystatechange=function()

  {

  if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {
 
    var get_data = document.getElementById('test');

    myret = xmlhttp.responseText;

    get_data.innerHTML = myret;
 
    }
 
  }

xmlhttp.open("GET","bid_data.php?q="+pass,true);

xmlhttp.send(null);
 
}

</script>

As you can see in this part of my ajax

Expand|Select|Wrap|Line Numbers

 
var get_data = document.getElementById('test');

    myret = xmlhttp.responseText;

    get_data.innerHTML = myret;

I have set a test div = the value of myret whatever that is. In this case it is a date time stamp that is stored in my db.
So what really confuses me is that the 'test' div that I use to check if the value is correct outputs exactly want I want

Expand|Select|Wrap|Line Numbers

get_data.innerHTML = myret;

but when I use myret in the body of my page it appears as 'undefined'.
This is how I am calling it on my page.

Expand|Select|Wrap|Line Numbers

 
<script type='text/javascript'>

var futuredate=new cdtime("contain",myret)                    futuredate.displaycountdown("days", formatresults)

</script>

and this is how a normal call of the same instance would look without using the variable myret.

Expand|Select|Wrap|Line Numbers

 
<script>

var futuredate=new cdtime("contain","April 28, 2011 12:55:55")            futuredate.displaycountdown("days", formatresults)

</script>

Thanks for the help you are giving JKing, I have tried to use firebug to see whats happening but I still have no clue!

Attached Files

webpage.pdf (19.2 KB, 223 views)

Apr 26 '11 #6

JKing

1,206

Expert 1GB

What order are you placing all of these in the header?

Apr 26 '11 #7

Avatar19

the ajax 'function get_bid()' is placed after the cdclass 'http://localhost/zebra/database/js/cdclass.js'
my head looks like this:

Expand|Select|Wrap|Line Numbers

 
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Zebra Spots</title>

<link rel="stylesheet" href="css/index.css" type="text/css" />
 
<script type='text/javascript' src = 'http://localhost/zebra/database/js/win.js'>

</script>

<script type='text/javascript' src = 'http://localhost/zebra/database/js/handler.js'>

</script>
 
<script type='text/javascript' src = 'http://localhost/zebra/database/js/cdclass.js'>//countdown

</script>
 
<script type='text/javascipt'>

var myret;

function get_bid(div_id)
 
{

if (div_id == 'contain')

{

var pass = 'apple_01';

} 

else if (div_id == 'contain2')

{

var pass = 'mp3_01';

}

else if (div_id == 'contain3')

{

var pass = 'car_01';

}

else if (div_id == 'contain4')

{

var pass = 'blackberry_01';

}

var xmlhttp;

if (window.XMLHttpRequest)

  {// code for IE7+, Firefox, Chrome, Opera, Safari

  xmlhttp=new XMLHttpRequest();

  }

else

  {// code for IE6, IE5

  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

xmlhttp.onreadystatechange=function()

  {

  if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {
 
    var get_data = document.getElementById('test');

    myret = xmlhttp.responseText;

    get_data.innerHTML = myret;
 
    }
 
  }

xmlhttp.open("GET","bid_data.php?q="+pass,true);

xmlhttp.send(null);
 
}

</script>

<script type='text/javascript'>
 
function toggle_website()

{
 
var login = document.getElementById('regbar');

var incorrect = document.getElementById('inc_loginmsg');

var login_form = document.getElementById('loginform');

var login_info = document.getElementById('login_info');
 
if ('<? echo $logged_in?>' =='true' )

{

login.style.display = 'none';

login_form.style.display = 'none';

login_info.style.display = '';
 
}

else if ('<? echo $logged_in?>' == 'false')

{

login.style.display = '';

}

if ('<? echo $logged_incorrect?>' == 'false')

{

incorrect.style.display = 'none';

}

}

</script>
 
<script type='text/javascript'>

function raise_alert()

{

alert("You must be logged in to bid!!!");

}

</script>
 
</head>

with countdown class above my ajax
and then with the countdown class being called in my body as i showed in previous posts.

Apr 26 '11 #8

JKing

1,206

Expert 1GB

Are there any errors being shown in firebug?

Also you are missing an 'r' in your script tag type="text/javascript"

Expand|Select|Wrap|Line Numbers

 
<script type='text/javascipt'>

var myret;

function get_bid(div_id)

Apr 26 '11 #9

Avatar19

oh thanks, but thats jus a lil error in pasting it here, its fine in my file.
When I run it through firebug, it jus says that var myret is undefined, this is at the location that you pasted in your post. but as for errors, I can't see any

Apr 26 '11 #10

JKing

1,206

Expert 1GB

Try giving myret a default value and see what happens. If the default value is displayed and not the pulled date then the ajax is finishing after the javascript has been processed.

Apr 26 '11 #11

Avatar19

OK so I set myret = "April 28, 2011 12:55:55" like so"

Expand|Select|Wrap|Line Numbers

 
<script type='text/javascript'>
 
var myret "April 28, 2011 12:55:55";

function get_bid(div_id)
 
{

if (div_id == 'contain')

{

var pass = 'apple_01';

} 

else if (div_id == 'contain2')

{

var pass = 'mp3_01';

}

else if (div_id == 'contain3')

{

var pass = 'car_01';

}

else if (div_id == 'contain4')

{

var pass = 'blackberry_01';

}

var xmlhttp;

if (window.XMLHttpRequest)

  {// code for IE7+, Firefox, Chrome, Opera, Safari

  xmlhttp=new XMLHttpRequest();

  }

else

  {// code for IE6, IE5

  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

xmlhttp.onreadystatechange=function()

  {

  if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {

    var myret = xmlhttp.responseText;

    var get_data = document.getElementById('test');
 
    get_data.innerHTML = myret;
 
    }
 
  }

xmlhttp.open("GET","bid_data.php?q="+pass,true);

xmlhttp.send(null);
 
}

</script>

and when i used it like so:

Expand|Select|Wrap|Line Numbers

 
<script>
 
                    var futuredate=new cdtime("contain3",myret)

                    futuredate.displaycountdown("days", formatresults)
 
                </script>

it works exactly how want it to except now it is a static value which is not coming form my db.
what can I do to make sure my xmlhttp.responseText is used as this value and not this static string???
thanks for your help again btw!!!

Apr 27 '11 #12

Avatar19

Hey JKIng just posting here to say that I solved my problem!, the solution looked like this:
I made two ajax functions controlling my bids, one was set to run on page load which would initialize my timers ad one was set as an onclick condition in my bid buttons.
I placed everything in my head and it worked great!!

Expand|Select|Wrap|Line Numbers

 
<script type='text/javascript'>// countdown function
 
function get_bid(div_id)

{

var pass = div_id;

var xmlhttp;

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

        xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

        xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

        myret = xmlhttp.responseText;

        var futuredate=new cdtime(div_id,myret)

        futuredate.displaycountdown("days", formatresults)
 
}
 
}

xmlhttp.open("GET","bid_data.php?q="+pass,true);

xmlhttp.send(null);
 
}
 
function update_bid(div_id)

{

{

var pass = div_id;

var xmlhttp;

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

myret = xmlhttp.responseText;

var futuredate=new cdtime(div_id,myret)

futuredate.displaycountdown("days", formatresults)

}
 
}

xmlhttp.open("GET","update_bid.php?q="+pass,true);

xmlhttp.send(null);
 
}
 
}
 
</script>
 
<script type='text/javascript'>// countdowns

    get_bid('apple_01');

    get_bid('mp3_01');

    get_bid('car_01');

    get_bid('blackberry_01');    

</script>

I would just like to say thanks so much for the effort you put in to help me solve the issue, I appreciate it! :) If you want check the working product , you can visit
http://sats.cs.wits.ac.za/~382956
although unless you check it within the next 9 hrs, the timers will run out an you won't be able to see it in action.

Apr 30 '11 #13

precedence for my ajax and javascript

✓ answered by JKing

Similar topics