TalkPHP - Updating list without page refresh

TalkPHP (http://www.talkphp.com/forums.php)

- Javascript, AJAX, E4X (http://www.talkphp.com/javascript-ajax-e4x/)

- - Updating list without page refresh (http://www.talkphp.com/javascript-ajax-e4x/2818-updating-list-without-page-refresh.html)

Updating list without page refresh

Hi, using Gareths tutorial (TalkPHP - Simple AJAX with JQuery) I made a script which adds items to a database without having to refresh the page.

Now I want to display the list of the items above the form (which I have managed to do) but I want it to automatically update with the new items, could anybody show me how I would do this?

I would also like to be able to delete and edit the items without having to refresh the page if possible.

Here's what I have so far:

Code:

<?php

session_start();

$UserName = $_SESSION['UserName'];

include("action/restrict.php");

        //Connect to the database

        include("config/connect.php");

        //Include the functions file

        include("config/functions.php");

        //include settings file

        include("config/settings.php");



                $IDQuery = "select UserID from tbl_users where UserName = '$UserName'";

                $IDResult = mysql_query($IDQuery);

                $IDr = mysql_fetch_array($IDResult);

                $UserID = $IDr['UserID'];

?>

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

<html><head>

<title>List</title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

        function add(){

                $.ajax({

                        type: "POST",

                        url: "action/add_item.php",

                        data:         "listtext=" + document.getElementById("listtext").value + 

                                        "&userid=" + document.getElementById("userid").value,

                        success: function(html){

                                $("#response").html(html);

                        }

                });

                

                }

</script>

</head>



<body>

<div id="wrapper">

<div id="header">

<br/><a href="action/logout.php">Logout</a>

</div>

<div id="content">

<table class="listtable">

<?php

                

                $query = "SELECT * from tbl_list WHERE fld_UserID = '$UserID'";

                $result = mysql_query($query);

                $rownum = "0";

                

                while ($row = mysql_fetch_assoc($result)) {

                $rownum = $rownum+1;

                if ($rownum&1) {

                        $rowclass = "row1";

                } else {

                        $rowclass = "row2";

                }

                echo "<tr class=\"$rowclass\">";

                echo '<td>';

                echo "$rownum";

                echo '</td>';

                echo '<td>';

                echo '<img src="images/delete.png" class="listimage"/>';

                echo '</td>';

                echo '<td>';

                echo '<img src="images/edit.png" class="listimage"/>';

                echo '</td>';

                echo '<td>';

                echo $row['fld_listtext'];

                echo '</td>';

                echo '</tr>';

}

?>

</table>



<form action="" method="post">

<input type="text" name="listtext" id="listtext"/>

<input type="hidden" name="userid" id="userid"/>

<input type="button" name="submit" id="submit" value="Add" onclick="add()"/>

</form>



<div id="response"><!-- Our message will be echoed out here --></div>

</div>

</div>

</body>

</html>

can anybody help?

You will have to think about this in the following way:

You have 2 DIV:s

One for containing the list you wish to edit and the other one the form that adds and edits.

And when you add something to the list via a submit in the form, have the JavaScript update the DIV with the list. For the easy approach have a file called for example ajax_list.php that gets loaded into the list DIV each time something needs to be updated.

In that way if you add something new with the form the DIV with the list updates and reflects the changes.

And for the ease of editing have a file called for example ajax_edit.php containing the form code as well the PHP code for adding and saving, as well as for retrieving the data thats been selected in the list DIV and load it into the form.

Think of the to DIV:s as "iframes" that you load ordinary PHP files into with the help of JavaScript and AJAX.

Hope this wasn´t to confusing. :D

Good luck.

/Eye

Thanks for the reply.

I've pretty much got everything I wanted to do done apart from the edit in place.

Because the list page is included (so it can be reloaded without refreshing the page) the edit in place thing wont work. Does anybody know how to get round this?

You can see what I have got done here: List