Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 23
  1. #1
    New Coder
    Join Date
    Nov 2006
    Posts
    48
    Thanks
    3
    Thanked 1 Time in 1 Post

    Question Trying to change <td bgcolor> when ajax posts new data

    I have ajax successfully polling and displaying new data from my database. I would like for the table cells to flash or change color then fade back to normal when there is new data. How would I do this? Please be gentle, I'm still new to javascript.

    Code:
    <?php
    // prevent caching (php)
    header('Cache-Control: no-cache');
    header('Pragma: no-cache');
    header('Expires: ' . gmdate(DATE_RFC1123, time()-1));
    ?>
    <html>
    <head>
    <meta http-equiv='cache-control' content='no-cache'>
    <meta http-equiv='expires' content='0'>
    <meta http-equiv='pragma' content='no-cache'>
    <script type="text/javascript">
    function createRequestObject() {
        var ro;
        var browser = navigator.appName;
        if(browser == "Microsoft Internet Explorer"){
            ro = new ActiveXObject("Microsoft.XMLHttp");
        }else{
            ro = new XMLHttpRequest();
        }
        return ro;
    }
    
    var http = createRequestObject();
    var httpjob = createRequestObject();
    
    function sndReq(action) {
      http.open('get', 'ajax.php');
      http.onreadystatechange = handleResponse;
      http.send(null);
    }
    function handleResponse() {
      if(http.readyState == 4) {
        var response = http.responseText;
        document.getElementById('foo').innerHTML = response;
      }
    }
    
    function jobLog(joblog) {
      httpjob.open('get', 'ajax2.php');
      httpjob.onreadystatechange = handleJoblog;
      httpjob.send(null);
    }
    function handleJoblog() {
      if(httpjob.readyState == 4) {
        var response = httpjob.responseText;
        document.getElementById('bar').innerHTML = response;
      }
    }
    
    setInterval('sndReq()', 5000);
    setInterval('jobLog()', 10000);
    </script>
    </head>
    <body>
    <table>
    <tr>
    <td id="foo" bgcolor="#009999">
    retrieving data...
    </td>
    </tr>
    <tr>
    <td id="bar" bgcolor="#FF9933">
    retrieving data...
    </td>
    </tr>
    </table>
    </body>
    </html>

  • #2
    New Coder
    Join Date
    Nov 2006
    Posts
    48
    Thanks
    3
    Thanked 1 Time in 1 Post
    Certainly somebody here can show me how to do this.

  • #3
    New Coder
    Join Date
    May 2008
    Posts
    80
    Thanks
    3
    Thanked 3 Times in 3 Posts
    [code]<?php
    // prevent caching (php)
    header('Cache-Control: no-cache');
    header('Pragma: no-cache');
    header('Expires: ' . gmdate(DATE_RFC1123, time()-1));
    ?>

    not sure if header likes your commenting.
    To answer your question:
    document.getElementById('bar').style.color = "red"; will do it

    Code:
    function handleJoblog() {
      if(httpjob.readyState == 4) {
        var response = httpjob.responseText;
        document.getElementById('bar').innerHTML = response;
     document.getElementById('bar').style.color = "red"; will do it
     }
    }

  • #4
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    Code:
    <td id="foo" bgcolor="#009999">
    is very old and outdated way of setting background color. Use CSS.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #5
    New Coder
    Join Date
    Nov 2006
    Posts
    48
    Thanks
    3
    Thanked 1 Time in 1 Post
    Thank you for your help. Now, one last question. How do I set it to only change color when the data is different?

    If data = 2 and on the next response data = 2 then the color stays the same, but on the third response data = 3 then the color changes briefly just to draw attention then fades back to normal.

  • #6
    New Coder
    Join Date
    Nov 2006
    Posts
    48
    Thanks
    3
    Thanked 1 Time in 1 Post
    Okay I was able to make it recognize changes using sessions.

    queries page:
    Code:
    session_start();
    
    //job log entries
    $total_job_log_entries = '0';
    $total_job_log_entries = ceil(mysql_num_rows(mysql_query("SELECT id FROM job_log WHERE id > '1'")));
    if ($total_job_log_entries != $jle_old){
    echo "Total number of job log entries: " . $total_job_log_entries . "<br>";
    }else{
    echo 'noupdate';
    }
    $HTTP_SESSION_VARS["jle_old"] = $total_job_log_entries;
    mysql_close();
    ajax page:
    Code:
    function handleJoblog() {
      if(httpjob.readyState == 4) {
        var response = httpjob.responseText;
    	if(response != 'noupdate') {
        document.getElementById('bar').innerHTML = response;
    	document.getElementById('bar').style.color = "black"
    	}
      }
    }
    Now the only problem is I don't want the page to actually echo "noupdate". Basically I want this:

    if(response = 'noupdate') {
    then echo old number and leave color alone
    }
    if(response != 'noupdate') {
    echos new number and the background fades from one color to another
    }

  • #7
    New Coder
    Join Date
    May 2008
    Posts
    80
    Thanks
    3
    Thanked 3 Times in 3 Posts

    Post

    if(response = 'noupdate') {
    then echo old number and leave color alone
    }
    if(response != 'noupdate') {
    echos new number and the background fades from one color to another
    }
    How about
    switch ($response) {
    case update:
    yadayada;
    break;
    default :
    yadayada;
    }

  • Users who have thanked tfit for this post:

    matthewst (03-22-2010)

  • #8
    New Coder
    Join Date
    Nov 2006
    Posts
    48
    Thanks
    3
    Thanked 1 Time in 1 Post
    Okay, I'm having trouble thinking outside the box today.

    I can make php remember and compare the results from running the same query twice:
    Code:
    session_start();
    
    //job log entries
    $total_job_log_entries = '0';
    $total_job_log_entries = ceil(mysql_num_rows(mysql_query("SELECT id FROM job_log WHERE id > '1'")));
    if ($total_job_log_entries != $jle_old){
    echo "Total number of job log entries: " . $total_job_log_entries . "<br>";
    }else{
    echo "noupdate";
    }
    $HTTP_SESSION_VARS["jle_old"] = $total_job_log_entries;
    mysql_close();
    If the new result ($total_job_log_entries) is different then the previously run query ($jle_old) then echo the new result. If they are the same then echo noupdate. Pretty standard stuff in php. My problem is; How do I make js remember and recognize the difference? Is there an invisible flag I can use? Ex:
    Code:
    session_start();
    
    //job log entries
    $total_job_log_entries = '0';
    $total_job_log_entries = ceil(mysql_num_rows(mysql_query("SELECT id FROM job_log WHERE id > '1'")));
    if ($total_job_log_entries != $jle_old){
    echo "Total number of job log entries: " . $total_job_log_entries . "<br>";
    }else{
    $flag = "HEY JS THIS ONE IS DIFFERENT SO DO SOME CRAZY STUFF!!";
    echo 'noupdate';
    }
    $HTTP_SESSION_VARS["jle_old"] = $total_job_log_entries;
    mysql_close();

  • #9
    New Coder
    Join Date
    Nov 2006
    Posts
    48
    Thanks
    3
    Thanked 1 Time in 1 Post
    I like tfits idea but I can't see how to implement it since I need to echo the response whether it's new or not. I just need js to be able to recognize the diff and act accordingly.

    What I mean to say is I need js to echo the "Total number of job log entries : 1234" even if it's old data. I just want js to acknowledge new data by changing color briefly or by flashing or something.
    Last edited by matthewst; 03-22-2010 at 03:56 PM.

  • #10
    New Coder
    Join Date
    May 2008
    Posts
    80
    Thanks
    3
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by matthewst View Post
    I like tfits idea but I can't see how to implement it since I need to echo the response whether it's new or not. I just need js to be able to recognize the diff and act accordingly.

    What I mean to say is I need js to echo the "Total number of job log entries : 1234" even if it's old data. I just want js to acknowledge new data by changing color briefly or by flashing or something.
    I wouldn't do this on the clientside. The server already has that data so why not evaluate it there. what i meant with the switch statement is that you can create your wanted response and give that response to javascript to echo it.

  • #11
    New Coder
    Join Date
    Nov 2006
    Posts
    48
    Thanks
    3
    Thanked 1 Time in 1 Post
    I agree that it should be done on the server side, but how do I tell js we have new (meaning different then the last time the query was run) data and to not just display (as if the data has not changed) but to also alert the user somehow?

  • #12
    New Coder
    Join Date
    Nov 2006
    Posts
    48
    Thanks
    3
    Thanked 1 Time in 1 Post
    First time: query runs output is "blah 123"
    Second time: query runs output is "blah 123"
    //so js only needs to echo the responses
    Third time: query runs output is "blah 124"
    //here I can make php recognize the difference but since all js sees is "blah 124" how do I make js recognize this is new data?

    I can make php output something different such as "124 is the new blah" but that's not what I need. Js only echos the response it gets from php so how do I get js to acknowledge new (meaning different) data? Is there a variable I can pass between php and js other than "response"?

  • #13
    New Coder
    Join Date
    May 2008
    Posts
    80
    Thanks
    3
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by matthewst View Post
    Code:
    session_start();
    //job log entries
    $total_job_log_entries = '0';
    $total_job_log_entries = ceil(mysql_num_rows(mysql_query("SELECT id FROM job_log WHERE id > '1'")));
    if ($total_job_log_entries != $jle_old){
    echo "Total number of job log entries: " . $total_job_log_entries . "<br>";
    // add this
    $response = "update";
    echo $response;
    }else{
    // remove this line $flag = "HEY JS THIS ONE IS DIFFERENT SO DO SOME CRAZY STUFF!!";
    echo 'noupdate'; // change $response = "noupdate";
    // echo $response;
    }
    $HTTP_SESSION_VARS["jle_old"] = $total_job_log_entries;
    mysql_close();
    It doesn't solve your whole problem, but it might bring it close;
    what if you move your $flag variable inside your if? Because basically your testing if something has changed. Your else remains the same as nothing has changed.

    I got a bit distracted :-). Remove the $flag variable and echo "updated"
    Last edited by tfit; 03-22-2010 at 07:15 PM.

  • Users who have thanked tfit for this post:

    matthewst (03-22-2010)

  • #14
    New Coder
    Join Date
    Nov 2006
    Posts
    48
    Thanks
    3
    Thanked 1 Time in 1 Post
    We are at 99% completion!

    The last step is to go from having js echo "number 123" and "Update! number 124" to echoing "number 123" and "number 124"

    Any ideas?

  • #15
    New Coder
    Join Date
    Nov 2006
    Posts
    48
    Thanks
    3
    Thanked 1 Time in 1 Post
    Basically I'm looking for:
    $response = invisible character;
    echo $response;

    That way the user only sees the color change and not "Update!"


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •