School Assignment? Project Due Tomorrow? Chat LIVE With A Programming Expert!

Welcome to Dream.In.Code
Become an Expert!

Join 300,471 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,755 people online right now. Registration is fast and FREE... Join Now!




Variables in an AJAX app do not match

 

Variables in an AJAX app do not match, The variable passed from the PHP code to the Javascript code do not ma

jweikelinteractive

28 Jun, 2009 - 09:39 AM
Post #1

New D.I.C Head
*

Joined: 16 May, 2009
Posts: 3

Ok, I have toyed with this and cannot figure it out for the life of me. I'm working on an AJAX calendar. Visitors can select a date, fill out a form to request a meeting, and click submit. Here's what's crazy. My calendar has two parts: the top part displays the meetings for each day as well as the form and the bottom part displays the actual calendar. When you click submit, the top part update correctly, but using the same variable, the bottom part is incorrect. After doing some debugging I found that the variable for some reason changes between the php and javascript.

The rest of the code is unimportant because it does not pertain to my question. I have a callback function (show_cal) that uses eval() to parse the javascript built on the server. The getEvents function works without a hitch. The getCalendatMonth does not and here's why: in the php, the echo "alert(\"" . $date . "\");"; shows the correct response (2009-28-09) however the alert(date); in my Javascript only returns a random year (1975, 1976, 2000). Does anyone have any suggestions about why the two alerts would be different?

Here's the code. For obvious reasons I'm not posting all of it, only the parts that pertain to my question.

java script:
CODE

function getCalendarMonth(date)
{
    if(http.readyState ==4)
    {
        alert(date);
        if(date != null)
        {
            var url = 'view_cal.php?date=' + date;
            url += '&rand=' + parseInt(Math.random() * 999999999);
            http.open('get', url, true);
        }
        else
        {
            var url = 'view_cal.php';
            url += '?rand=' + parseInt(Math.random() * 999999999);
            http.open('get', url, true);
        }
        
        http.onreadystatechange = show_cal;
        http.send(null);
    }
    else
    {
        document.getElementById('calendar').innerHTML = "<table><tr><td>Getting Calendar</td></tr></table>";
        setTimeout('getCalendarMonth(' + date + ')', 30);
    }
}


PHP:
CODE

if($error != 1)
{
    $finalstart = $_GET['starthour'] . ":" . $_GET['startminute'] . ":00";
    $finalend = $_GET['endhour'] . ":" . $_GET['endminute'] . ":00";
    
    $inSql = "INSERT INTO events(date, startTime, endTime, name, description) VALUES(" . "'" . $date . "', '" . $finalstart . "', '" . $finalend . "', '" . addslashes($_GET['name']) . "', '" . addslashes($_GET['description']) . "');";
    mysql_query($inSql);
    
    echo "alert(\"" . $date . "\");";
    echo "getEvents(\"" . $date . "\");";
    echo "getCalendarMonth(\"" . $date . "\");";
}


Thanks!

User is offlineProfile CardPM
+Quote Post


moopet

RE: Variables In An AJAX App Do Not Match

28 Jun, 2009 - 09:54 AM
Post #2

D.I.C Regular
***

Joined: 2 Apr, 2009
Posts: 342



Thanked: 32 times
My Contributions
Can we see where the callback to getCalendarMonth() is defined?
User is offlineProfile CardPM
+Quote Post

jweikelinteractive

RE: Variables In An AJAX App Do Not Match

28 Jun, 2009 - 10:40 AM
Post #3

New D.I.C Head
*

Joined: 16 May, 2009
Posts: 3

QUOTE(moopet @ 28 Jun, 2009 - 09:54 AM) *

Can we see where the callback to getCalendarMonth() is defined?


I don't mind showing it but it's not really necessary. Although I did misspeak when talking about the sequence of events so maybe this will clarify things. Ok, processForm() get called in the javascript when you submit the form. This function queries the server for processForm.php which contains the doe you saw. That code executes if there are no errors. There's a call back function in my Javascript, processEvent().

This parses the server response as javascript. I know it works because the alert in the server code as well as my getEvents() function returns the correct response. Notice though that there is also a call to getCalendarEvents() in my server code. Also, notice that in the getCalendarEvents() function contains an alert(). Somehow, between the alert call from the server, and the alert in the getCalendarEvents function the variable changes.

So here it is:
This calls the PHP code you saw.
CODE
function processForm()
{
    if(http.readyState == 4)
    {
        params = '?date=' + document.getElementById('form_date').value;
        params += '&name=' + document.getElementById('name').value;
        params += '&phone=' + document.getElementById('phone').value;
        params += '&email=' + document.getElementById('email').value;
        params += '&starthour=' + document.getElementById('starthour').value;
        params += '&startminute=' + document.getElementById('startminute').value;
        params += '&endhour=' + document.getElementById('endhour').value;
        params += '&endminute=' + document.getElementById('endminute').value;
        params += '&description=' + document.getElementById('description').value;
        params += '&rand=' + parseInt(Math.random() * 999999999);
        http.open('get', 'processeventform.php' + params, true);
        http.onreadystatechange = processEvent;
        http.send(null);
    }
    else
    {
        document.getElementById('event_errors').innerHTML = "<p>Processing Form</p>";
        setTimeout('processForm()', 30);
    }
}


This retrieves the repsonse and parses it as java script:
CODE
function processEvent()
{
    if(http.readyState == 4)
    {
        if(http.status == 200)
        {
            document.getElementById('event_errors').innerHTML = eval(http.responseText);
        }
    }
    else
    {
        document.getElementById('event_errors').innerHTML = "<p>Processing Form</p>";
    }
}


Note that it receives this response, which contains a call to getCalendarMonth(). Keep in mind that the alert here shows the correct response and that getEvents() works correctly.
CODE

echo "alert(\"" . $date . "\");";
echo "getEvents(\"" . $date . "\");";
echo "getCalendarMonth(\"" . $date . "\");";


However, for some reason when it gets to this point, the alert shows the wrong thing and the function does not respond correctly.
CODE
function getCalendarMonth(date)
{
    if(http.readyState ==4)
    {
        alert(date);
        if(date != null)
        {
            var url = 'view_cal.php?date=' + date;
            url += '&rand=' + parseInt(Math.random() * 999999999);
            http.open('get', url, true);
        }
        else
        {
            var url = 'view_cal.php';
            url += '?rand=' + parseInt(Math.random() * 999999999);
            http.open('get', url, true);
        }
        
        http.onreadystatechange = show_cal;
        http.send(null);
    }
    else
    {
        document.getElementById('calendar').innerHTML = "<table><tr><td>Getting Calendar</td></tr></table>";
        setTimeout('getCalendarMonth(' + date + ')', 30);
    }
}


That should covers any requests. There are no global variables besides http and I set a random parameter when request things from the server so cache should not be an issue. Keep in mind my question is, why would the two alerts show something different even though they are virtually called back to back.
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic

Time is now: 11/8/09 02:52AM

Live Help!

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter Fan Us On Facebook

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month