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.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Feb 2005
    Posts
    663
    Thanks
    5
    Thanked 14 Times in 14 Posts

    Using Prototype and Ajax to display and update tables

    I'm working on a little project, and from the php forums, have learned a little bit about the prototype framework, and Ajax. I've good an decent grasp on php, but how to utilize php with javascript is something still new to me.

    From this post in the php forums Here, I was able to successfully query a database, and display the table/results.

    Then beneath the table, I have form that via Ajax will display the results of the forms inputs.

    Now I'd like to have the table update via ajax on the form submit. Below is the code that I've currently put together.

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
        <title>AJax Testing Script</title>
        <script src="prototype.js" type="text/javascript"></script>
        <script type="text/javascript">
          function liveStuff()
          {
            var ajax = new Ajax.Updater(
                {
                    success: 'results'
                },
                'backside_script.php',
                {
                    parameters: $('myForm').serialize(true)
                }
            );
          }
        </script>
    </head>
    <body>
    <?
    $mysql_hostname    
    'localhost';
    $mysql_username    'username';
    $mysql_password    'password';
    $conn mysql_connect($mysql_hostname$mysql_username$mysql_password) or die('MySQL error: ' mysql_errno() . ' ' mysql_error());

    $test 'test_dual';
    // test for conn
    mysql_select_db($test) or die('MySQL error: ' mysql_errno() . ' ' mysql_error());

    $query mysql_query("SELECT * FROM mydatabases ");
        while (
    $data mysql_fetch_assoc($query)) {
            
    $dataArray[] = $data;
            
    $rows count($dataArray);
        }
      
        if(
    $rows == 0)
        {
            echo 
    'There are no additional tables';
        } else {
            echo 
    '<table border=1>
            <tr>
                <td>ID</td>    
                <td>Database</td>
                <td>Table</td>
                <td>User Field</td>
                <td>Password Field</td>
                <td>Email Field</td>
            </tr>'
    ;
            for(
    $x=0$x $rows$x++){
                echo 
    '<tr>';
                foreach(
    $dataArray[$x] as $key => $value){
                     echo 
    '<td>'.$value.'</td>';
                 }
                 echo 
    '</tr>';
             }    
             echo 
    '<tr><td colspan="6"> Add New Table</td></tr>';
            echo 
    '</table>';
        }
    ?>
        
    <form id="myForm" name="myForm" method="post" action="" onsubmit="liveStuff();return false;">
        <table border='1'>
        <tr><td>Database Name</td><td><input name="input[db_field]" type="text"></input></td></tr>
        <tr><td>Table Name</td><td><input name="input[table_field]" type="text"></input></td></tr>
        <tr><td>User Field</td><td><input name="input[ufield]" type="text"></input></td></tr>
        <tr><td>Password Field</td><td><input name="input[pfield]" type="text"></input></td></tr>
        <tr><td>Email Field</td><td><input name="input[efield]" type="text"></input></td></tr>
        <tr><td colspan="2"><input name="submit" id="submit" type="submit" value="Submit Ajax"></input></td></tr>
        </table>
    </form>

    <div id="results"></div>
    </body>
    </html>

  • #2
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    first step: review your Ajax.Updater syntax as i said in the other thread.... you're trying to use it like Ajax.Request

  • #3
    Regular Coder
    Join Date
    Feb 2005
    Posts
    663
    Thanks
    5
    Thanked 14 Times in 14 Posts
    Ok, I got that completed. Using the function and the revised submit to call the backend script on the mousedown.

    Now, I'm guessing the next step is that the table would be initially be loaded from the backend script, and not from the same page/script that the form is on?

    And then when you hit submit to update, it will access the back end script, perform the update and reload it?

  • #4
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    you could have it make a request to get the info upon loading, but to be honest it's just as easy to make your query with php and display the results. i have to imagine it would load smoother since the query would be done before the page loads instead of after it.


    anyhoo, from there yes you can either have the table rebuilt on your processor page and then redisplayed (the way to go if you have any sort of ordering) or you can append the results with the "insertion" option of Ajax.Updater


    rebuilding the table is easier imo. and like i said, if you're doing ordering you kinda have to. but, if it was a massive table then appending would be faster.

  • #5
    Regular Coder
    Join Date
    Feb 2005
    Posts
    663
    Thanks
    5
    Thanked 14 Times in 14 Posts
    Thanks for the help.

    I think I got it working. And now it got me thinking.....

    Using the prototype (or in general), is it update/change an image file on the page? So if I had image_1.png. I could change it to image_2.png via a call to the back end script?

  • #6
    Regular Coder hinch's Avatar
    Join Date
    Sep 2005
    Location
    UK
    Posts
    923
    Thanks
    25
    Thanked 80 Times in 80 Posts
    you can do image swapping with simple arrays and normal javascript
    A programmer is just a tool which converts caffeine into code

    My work: http://www.fcsoftware.co.uk && http://www.firstcontactcrm.com
    My hobby: http://www.angel-computers.co.uk
    My life: http://www.furious-angels.com

  • #7
    Regular Coder
    Join Date
    Feb 2005
    Posts
    663
    Thanks
    5
    Thanked 14 Times in 14 Posts
    Quote Originally Posted by hinch View Post
    you can do image swapping with simple arrays and normal javascript
    Thanks. But if I want to do a first compare/computation, and then update the image, would it best to do it via some type of Ajax application?

    I have a current game that will update an image after a battle occurs to show how many units they have left. So if I have:

    $x > 5; give me image_5.png
    $x < 5; give me image_1.png

    I would think using the prototype framework, and a backend script, I could compute a battle outcome, and then update the image without a page refresh.

  • #8
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    i've never fiddled with it, but i would think you'd be able to drop <img> tags with the src you want and it would work.


  •  

    Posting Permissions

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