Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Thanked 0 Times in 0 Posts

    json_encode array and innerHTML

    I'm trying to rewrite some existing code to simplify it a bit and am running into a problem passing values. I'm pulling a record from a mySQL DB and putting it into an associative array which is then json_encoded so I can manipulate the values using javascript. The code I have below is a test example so I can get the method and syntax down before coding the whole page.

    I have several places on my page where I need to display either values from the database or input values from a form that are used in more than one place.

    The code below works fine if I comment out the "document.getElementById" statement. The array is created and the alert works, but I can't get the value from the array to display in the div.

    I'm just learning how to do this. What am I missing?

    mysql_connect("mydbip", "username", "password") or
        die("Could not connect: " . mysql_error());
    $result = mysql_query("SELECT * FROM sometable WHERE id='1'");
    $row = mysql_fetch_array($result, MYSQL_ASSOC);
    $myarr = json_encode($row);
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script id="source" language="javascript" type="text/javascript">
    var ar = new Object();
    ar= <?php echo $myarr;?>;
    if(ar["variable1"] > 0) 
    document.getElementById("ar1").innerHTML = ar["variable1"];
    <div id="ar1">0</div>

  2. #2
    Master Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Behind the Wall
    Thanked 561 Times in 555 Posts
    at the point of execution, the element with the ID "ar1" does not exist (is not yet rendered). you need to delay the JavaScript execution until the DOM is ready (or the page has finished loading).
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  3. Users who have thanked Dormilich for this post:

    Fishboy (02-14-2012)

  4. #3
    New to the CF scene
    Join Date
    Feb 2012
    Thanked 0 Times in 0 Posts
    Nevermind...created a function and added onload. Duh.

    This does however lead to a question: is there a better way to do this?

    I'm creating a form to collect several input values, then using javascript to use those values in combination with values pulled from the database to do some calculations and display them on another part of the form page.


Tags for this Thread

Posting Permissions

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