Ajax, PHP, Javascript... having trouble getting simple function to work.

there are actually a lot of different ways you can do this, but a few solutions could be:

1) use JavaScript and limit each names with a semi-colon for example, then send the list through a hidden input form, delimiting the string afterward in PHP.

<script>
...
var names = "";
function addName(name) {
    names += name + ";";
}
function submitMe() {
    name_list.value=names;
}
...
</script>
...
<form onSubmit="submitMe();">
<input type="hidden" name="name_list" />
</form>
...

2) use AJAX and PHP (with a database, like MySQL) with a temporary database table to add / remove names.

for every names added, do an INSERT INTO temp_names and return the record key in the XMLHTTP response text. make sure to include an identifier (session key, user id, etc.) for all of these temporary records.
for every names removed, do a DELETE FROM temp_names WHERE id = <the record key>.

on submit, SELECT * temp_names WHERE identifier = <identifier key> and move them to the actual permanent table.


Hope that helps,

Andrew

The temporary database seems like a nice idea. I need to learn more about AJAX, but from what I understand I can use it to link to a PHP page with the appropriate function to add names into this temporary database and return them to display on the page without having to reload the page?

oh no, $session_id must be session_id() .. sorry about that and for any other typos unaccounted for (if there are still some left). I was too excited to submit the code. =))

Hope that helps,

Andrew

Looks about right! I'll give it a go, you pointed me in the right direction.

thank you, points well appreciated. i'm glad to have helped.

Andrew

I am another question for you! My temporary database will have the fields 'id' (auto increment), 'ident' for the session id of current user, and 'name' for the name added. On the add.php page we are going to echo the insert id, where does this echo to? I guess I'm not understanding javascript that well yet, I am assuming that we want to capture that id and use it as an identifier for the name that is displayed on the page.

Since I am new to AJAX and javascript, perhaps you could give me a quick "order of operations". I understand the code, I am just not following the path of processing. I would really appreciate it!

Thanks

well, the echo statement just acts like printf, or the sort. so basically we need that information to relay to the JavaScript side of things, which is taken from request.responseText (which actually contains any output of the add.php, so for example if php had an internal error or sorts, the responseText would contain them, or if you want to load another HTML page dynamically on JavaScript, you can try replacing add.php to another page and do a document.write(request.responseText)), this is how AJAX basically works.

for the order of operations, well:

1) you should have the input box for the name and an add button
2) the add button would receive the event to call addNew(input.value)
3) the addNew function send the POST request with the name to the add.php
(this is very similar to submitting a form with a POST action, only this one is done in the background, JavaScript style)
4) add.php will output the corresponding ID for the record, or -1 for an error
5) we then use the ID to build a dynamic remove button, having the pre-made remove(ID) function
6) once remove(ID) is called (or remove button is pressed), we will then again send a POST request to remove.php, this time requesting to delete the ID sent on the request
7) remove.php will then output 1 for success, -1 for an error
8) and there you have it, after all add/removes are done, simply move all the records with the same session identifiers to the permanent database table

Hope that helps,

Andrew

Great. That helps a lot. Thanks again.

With pleasure. Good luck on that.

Andrew

I have been working through the code you explained to me and I am having some trouble. If you wouldn't mind helping me out again.

In this addNew function I doesn't the request.open and request.send need to come before the request.responseText? I see that the idea is to establish the communication state at ready with AJAX then we want to get the id number of the value we just entered into the temporary database, then add the name to the page with a remove button next to it. Am I correct?

Oh, and i call the addName function like this, <a href="" onclick="addName(personName.value);">add</a> where personName is the id of the input field.. is this correct? Thanks

function addNew(name) {
 
        var request =  new XMLHttpRequest();
        request.onreadystatechange = function() {
                if(request.readyState == 4 && request.status == 200) {
 
                        // grab the ID in (request.responseText)
                        // and add the corresponding fields here
                        // (dynamic div's, remove link, etc.)
 
                }
        };
        request.open("POST", "add.php");
        request.send("name=" + name);

Select allOpen in new window

request.onreadystatechange is actually an event handler. we check the readyState and the status to make sure everything is loaded in the responseText (or it has finished the transaction successfully). if it's not working, try to remove the condition request.status == 200, this may be because you are testing locally on opened HTML files.

yes, the other inquiries are correct.