-
January 2nd, 2007, 12:57 AM
#1
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
-
January 25th, 2007, 07:06 PM
#2
Re: Showing content from database without page refresh
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
-
April 9th, 2007, 12:53 PM
#3
Re: Showing content from database without page refresh
But, How load te response text (upload) into the same div with the same id??
Last edited by wilz04; April 9th, 2007 at 12:59 PM.
-
April 9th, 2007, 01:06 PM
#4
Re: Showing content from database without page refresh
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.
TheCPUWizard is a registered trademark, all rights reserved. (If this post was helpful, please RATE it!)
2008, 2009,2010
In theory, there is no difference between theory and practice; in practice there is.
* Join the fight, refuse to respond to posts that contain code outside of [code] ... [/code] tags. See here for instructions
* How NOT to post a question here
* Of course you read this carefully before you posted
* Need homework help? Read this first
-
April 9th, 2007, 02:28 PM
#5
Re: Showing content from database without page refresh
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!!
-
April 10th, 2007, 09:33 PM
#6
Re: Showing content from database without page refresh
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>
Last edited by PeejAvery; April 10th, 2007 at 09:35 PM.
If the post was helpful...Rate it! Remember to use [code] or [php] tags.
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|