Showing content from database without page refresh

Hi Everybody

I had been working with some AJAX functions and PHP recently. And right now i am building a web application where I need to update the database and then show that entry immediately in the same page without a page refresh,

Say for example, I will be showing a page with list of members and a small add button would be available on top of the page. when the user clicks on this "Add" button, he would be requested to enter the userdetails(This is actually shown as a DIV). After he enters the userdetails and clicks on submit button, he should be shown the list of users page with this new entry as well without a page refresh.

Thanks
Anand

are you using a 3rd party Ajax framework? there's some free ones out there that have provisions for that.

if you want to hand-code the heck out of your own, here's what to do:

send the information back to the server and have the save-to-db method take care of that and return the new rowID to the calling procedure.

then when you've received the new id result in the client side, create a new div with a unique ID, eg:

var memberContainer=document.createElement("div");
memberContainer.setAttribute("id","member_"+newID);//newID was returned from the server

then you add the member values you sent back to the server:
var name=document.getElementById("name");//from the input form
var email=document.getElementById("email");//from the input form

then you can get your layout happening:
var p=document.createElement("p")
p.innerHTML="name: "+name;
p.appendChild("<br/>");
p.innerHTML+="email: "+email;

then you start adding it to the parent containers:

memberContainer.appendChild(p);

and (for example) assuming your members are all stored within a parent 'members' container div:

document.getElementById("members").appendChild(memberContainer);

and so on. when you need to start removing and re-ordering the display of the members, it gets more complicated, but if you get to that point you start dealing with the parent node:

var member=document.getElementById("member_3");//or whatever the div id is to remove
var parent=member.parentElement;
parent.removeChild(member);
do NOT simply say:
member.innerHTML="";
not only do you still have those in your DOM but you'll see funny rows of space left in their place. this is important when you start using ^ and \/ keys to move them up and down a list
parent.removeChil

But, How load te response text (upload) into the same div with the same id??

Basically you dont want to (show in the same div). You want to create a new div in the background, then remove the old div and insert the new one at the same location.

But,
How I create a new div??
How I generate the new Id??
How I push the new div in the place of the old div??

Please, Help Me!!

To remove an element, use removeChild(). To create new elements you need to use createElement(). To apply attributes, use setAttribute(). To set the element in place, use appendChild();

Code:

---

<script type="text/javascript">
var objToRemove = document.getElementById('id_of_element');
document.removeChild(objToRemove);

var theBody = document.getElementsByTagName('body').item(0);
var newDiv = document.createElement('div');
newDiv.setAttribute('id', 'the_id_you_want');
theBody.appendChild(newDiv);
</script>

---