Update a form without refreshing the entire page?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Chewie71
Forum Newbie
Posts: 3
Joined: Fri Mar 03, 2006 3:55 pm

Update a form without refreshing the entire page?

Post by Chewie71 »

I'm working on a form (PHP & HTML) that needs to query the user for some information, and then update the form with new information based on their response. I'd like to be able to do this without having to refresh the whole page every time they change options.

Basically something that does this...(the purpose is to allow instructors to modify their courses in an online learning system)

1) Instructor arrives at the page and is shown a list of terms in which they are teaching a section.
2) Instructor selects a term (e.g. Fall 06) and the sections they are teaching in that term appear.
3) Instructor selects a specific section number from that term, and a slew of information then appears in a form allowing them to customize that section in the online learning system. (Activate the course, extend it's length, assign co-instructors/TAs, etc...)

All the backend stuff interfacing with our LDAP directory and the online learning system is in place and works. I just don't know how to implement this without refreshing the page EVERY time they pick a different section number...or sending them to a new page with all the section modification stuff there...and then they have to go back to the original page to do something to a different course.

What I'd like is a couple of selection boxes probably for the term and section choices...and then a table/form below that, that appears (or is filled in) when they choose the section. Or I could have a default section selected and the data already filled in on the form for the default selection. Either way, I'd like for them to be able to submit the form with their changes, or choose a new section (that updates the form)...without messing with refreshing the whole page.

I've got a basic implementation in place that works, but it's not very pretty, and it needs to do a lot more...and to do that I've got to get fancier and either update the page dynamically, or open a new page where they can do their section mods.

Is this possible with PHP...dynamically update parts of a page?

Thanks,
Matt
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Sounds like a job for Ajax or worst case, preloading of all that data stored into Javascript or the HTML and Javascript injecting or switching visibilities.
Chewie71
Forum Newbie
Posts: 3
Joined: Fri Mar 03, 2006 3:55 pm

Post by Chewie71 »

Where's the best place to start learning about AJAX?

Matt
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

We've got a bunch of threads about Ajax here, including a tutorial by Burrito, and a snippet by d11wtq on a basic usage. They've both had several threads where they mention Ajax as well.
Chewie71
Forum Newbie
Posts: 3
Joined: Fri Mar 03, 2006 3:55 pm

Post by Chewie71 »

feyd | Please use

Code: Select all

and

Code: Select all

tags where appropriate when posting code. Read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url][/color]


OK...a VERY basic mockup here...I threw in some AJAX code that I got off some articles at IBM.  My other functions are all written in PHP.  I'm not sure how to move further.  Do I need to put my functions in other files so that AJAX can use request.open("GET",url,true) to make requests to the functions, or can it make requests to functions in the current file?  I'm assuming I can mix javascript and PHP functions in the same file?  Sorry if these are dumb questions...I'm pretty new to most of this stuff.

Thanks,
Matt

Code: Select all

<html><head><title>Section Activation Page</title></head><body>

<script language="javascript" type="text/javascript">
  var request = false;
  try {
    request = new XMLHttpRequest();
  } catch (trymicrosoft) {
    try {
      request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (othermicrosoft) {
      try {
        request = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (failed) {
          request = false;
        }
      }
    }

  if (!request)
    alert("Error initializing XMLHttpRequest!");
</script>

<?php
function getLdapInfo(someVars)
{}

function doSomethingElse(someVars)
{}
?>

<?php

// Build some html to present the data to users

//Look up their terms...
getLdapInfo();

//User selects a term and is presented with their sections in that term (via AJAX so page is not refreshed?)
request.open("GET", A_URL_HERE?, true);
request.onreadystatechange = updatePage;
request.send(null);

//User selects a section and the modification form is built (using AJAX again?)

//User activates or modifies their section, and submits the information to be sent to the online course system.
//(AJAX updates the form with new information and also presents the response back from the online course system)

?>
Chewie71 | Sorry...I went back in to edit this post with code tags, but your fingers must have been faster
because your edits happened and mine didn't. I'll do better next time...


feyd | Please use

Code: Select all

and

Code: Select all

tags where appropriate when posting code. Read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url][/color]
Post Reply