Showing content from database without page refresh
CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 6 of 6

Thread: Showing content from database without page refresh

  1. #1
    Join Date
    Jan 2007
    Posts
    2

    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

  2. #2
    Join Date
    Mar 2000
    Location
    Vancouver, BC, Canada
    Posts
    277

    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
    David Meikle
    Quantum Unit Solutions, LLC
    www.quantumunit.com
    FusionSEO RSS Feeds

  3. #3
    Join Date
    Mar 2007
    Posts
    13

    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.

  4. #4
    Join Date
    Mar 2002
    Location
    NY, USA
    Posts
    12,097

    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
    In theory, there is no difference between theory and paractice; 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

  5. #5
    Join Date
    Mar 2007
    Posts
    13

    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!!

  6. #6
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,868

    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
  •  


Azure Activities Information Page

Windows Mobile Development Center


Click Here to Expand Forum to Full Width

This is a CodeGuru survey question.


Featured


HTML5 Development Center