Looking for some AJAX expert advice

tinman486 · July 31, 2008

I am attempting to build a site that dynamically fills a DIV tag with another page from my site. The content that fills the tag will be selected via a drop down menu. The pages to be displayed in the div need to be functional and i would like them to dynamically load and change based on the selection from the drop down.

I have the basics down, and I have a pretty good understanding of AJAX. My only issue is I don't know how to translate my knowledge into a practical site where it performs the functions I listed above.

Id really appreciate it if somone with a bit more knowledge then me could show me in psuedo code how exactly you would handle this situation. For reference here is my html site

<html>
<head>
<script src="ajax.js"></script>

</head>
<body>
<form> 
Select A Report:
<select name="customers"  onChange="reportsnagger(this.value)">
<option value="">--Select A Report--
<option value="value1">choice1
<option value="value2">choice2
<option value="value3">choice3
</select>
</form><p>
<div id="reportspace"><b>Report info will be listed here.</b></div>
</p></body>
</html>

specifically I don't know how to translate the choices made from the drop down menu into a request from the server that displays a page.... I could use frames and the sites I am requesting have static urls i had thought about just hard coding the url into the menu and then just requesting the site via ajax but id like to see how you guys would handle it. Any help is appreciated... I can post my JS if you like but i don't wanna hassle you guys with debugging my code.

RichardRotterdam · July 31, 2008

seems to me that once you selected an option from the select you can use the value to change the url or just a parameter of the page your calling

for example

url="your_serverside_page.php?value="+optionValueFromSelect;

hope that helps

tinman486 · July 31, 2008

see thats what i thought too... however i cannot for the life of me get the page to display in the div tag... ever...

any sort of help here would be appreciated... I could really use a psuedo code example of how you would do it

RichardRotterdam · July 31, 2008

have you tried an ajax tutorial yet? the example posted a few topics back is a pretty descent one

http://www.webpasties.com/xmlHttpRequest/

rigger3 · July 31, 2008

have you tried an ajax tutorial yet? the example posted a few topics back is a pretty descent one

http://www.webpasties.com/xmlHttpRequest/

Good link! Try searching the DB at ajaxatoms.com too they have some pretty good resources or as pinned ajaxfreaks.com above this thread.

tinman486 · August 1, 2008

Those tutorials are immensely helpful however they all deal with pulling data from a database... not specifically requesting a page and displaying it... These are helpful and in fact I used them to write the code I have...

The real issue you see is that i don't know what command to use to ask the server hey can i have this page please.

var request = false;
var response;
var currentObj;

function clearData(reportspace){
document.getElementById(reportspace).innerHTML = '';
}

function loading(reportspace){
document.getElementById(reportspace).innerHTML = "Loading...";
}

function ajaxRequest(url, data, reportspace){
currentObj = obj;
loading(currentObj);
if (window.XMLHttpRequest){
	try{
		request = new XMLHttpRequest();
	}catch(e){
		request = false;
	}
}else if (window.activeXObject){
	try{
		request = new ActiveXObject("Msxml2.XMLHTTP");
	}catch(e){
		try{
			request = new ActiveXObject("Microsoft.XMLHTTP");
		}catch(e){
			request = false;
		}
	}
}
request.onreadystatechange = handleData;
request.open("POST", url, true);
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
request.send(data);

}

function handleData(){
if (request.readyState == 4){
	if (request.status == 200){
		populateData(request);
	}
}
}
function populateData(request){
data = request.responseText;
if (data != null){
	clearData(currentObj);
	document.getElementById(currentObj).innerHTML = data;
}else{
	document.getElementById(currentObj).innerHTML = '';
}
}

dbertels · August 8, 2008

An excellent tutorial that addresses your question can be found at Ibm's DeveloperWorks website at http://www.ibm.com/developerworks/edu/os-dw-os-phpajax-i.html

A short version of this tutorial is this:

1 - On a the PHP server, have a page 'panels-ajax.php' with the one line:

<?php
     require('content/panel-'.$_GET['panel_id'].'.html');
?>

On the same server, have your pages-to-fill-in-the-div-tag in a folder named 'content'.

For now, just stick one page in there, named panel-01.html

(If you have 10 pages, name them panel-0.html to panel-9.html)

The main page goes like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Create a Content Management System with PHP</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">	
<!-- Using span instead of regular anchors -->
span:visited{ text-decoration:none; color:#293d6b; }
span:hover{ text-decoration:underline; color:#293d6b; }
span {color:#293d6b; cursor: pointer}
</style>

<script type="text/javascript">
var request;
var dest;

function processStateChange()
{
    if (request.readyState == 4)
   {
        contentDiv = document.getElementById(dest);
        if (request.status == 200)
{
            response = request.responseText;
            contentDiv.innerHTML = response;
        } 
else 
{
            contentDiv.innerHTML = "Error: Status "+request.status;
        }
    }
}

function loadHTML(URL, destination)
{
    dest = destination;
    if (window.XMLHttpRequest)
    {
        request = new XMLHttpRequest();
        request.onreadystatechange = processStateChange;
        request.open("GET", URL, true);
        request.send(null);
    } 
else if (window.ActiveXObject) 
{
        request = new ActiveXObject("Microsoft.XMLHTTP");
        if (request) 
	{
            request.onreadystatechange = processStateChange;
            request.open("GET", URL, true);
            request.send();
        }
    }
}
</script>
</head>

<body>
<!-- Load Menu buttons: (only one shown) -->
<span onclick="loadHTML('panels-ajax.php?panel_id=0', 'content')">Managing content</span>

<!-- Location where the pages will be shown -->
<div id="content"></div>

</body>
</html>

Sign In

Looking for some AJAX expert advice

Recommended Posts

tinman486

Link to comment

Share on other sites

RichardRotterdam

Link to comment

Share on other sites

tinman486

Link to comment

Share on other sites

RichardRotterdam

Link to comment

Share on other sites

rigger3

Link to comment

Share on other sites

tinman486

Link to comment

Share on other sites

dbertels

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information