eapro
11-03-2008, 08:40 AM
I found a nice little ajax script that does just what I want, send a value to php via hyperlink wich let's me update a div instantly without reloading page.
But now I want to throw in an input box. I know how to do this in a different way but I'd like the value input box when the link clicked (the one, two, three links). I can't figure out how to modify the script to do that.
there are 3 files:
ajaxswitch.js - the ajax/js script
handle.php - php file to handle serverside
test.php - page with user interface
I won't post handle.php as I don't think it's necessary. Please someone examine this for me, I don't think I'll ever figure this out on my own. In case you're wondering, I got this script from here (http://bonrouge.com/br.php?page=ajaxswitch&content=one).
Here is the ajax/js code:
var request = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
request = false;
}
}
@end @*/
if (!request && typeof XMLHttpRequest != 'undefined') {
request = new XMLHttpRequest();
}
function ajaxSwitch(content) {
/*the name of your page with the content goes here */
var url = "handle.php?showit=" + escape(content);
request.open("GET", url, true);
request.onreadystatechange = go;
request.send(null);
}
function go() {
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseText;
/* 'ajaxcontent' is the name of my div that will contain the info */
document.getElementById("ajaxcontent").innerHTML = response;
}
}
}
function showIt() {
var aTags=document.getElementById('statelinks').getElementsByTagName('a');
for (i=0; i<aTags.length; i++) {
aTags[i].onclick=function() {
var show=this.href.split('content=')[1];
ajaxSwitch(show);
return false;
}
}
}
window.onload=showIt;
and the page code (test.php):
<html>
<head>
<script type="text/javascript" src="ajaxswitch.js"></script>
</head>
<body>
<div id="ajaxswitchcontent">
<ul id="options">
<li><a href="test.php?content=one">one</a></li>
<li><a href="test.php?content=two">two</a></li>
<li><a href="test.php?content=three">three</a></li>
</ul>
<div id="ajaxcontent">
<?php include 'handle.php'; echo $show; ?>
</div>
</div>
</body>
</html>
But now I want to throw in an input box. I know how to do this in a different way but I'd like the value input box when the link clicked (the one, two, three links). I can't figure out how to modify the script to do that.
there are 3 files:
ajaxswitch.js - the ajax/js script
handle.php - php file to handle serverside
test.php - page with user interface
I won't post handle.php as I don't think it's necessary. Please someone examine this for me, I don't think I'll ever figure this out on my own. In case you're wondering, I got this script from here (http://bonrouge.com/br.php?page=ajaxswitch&content=one).
Here is the ajax/js code:
var request = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
request = false;
}
}
@end @*/
if (!request && typeof XMLHttpRequest != 'undefined') {
request = new XMLHttpRequest();
}
function ajaxSwitch(content) {
/*the name of your page with the content goes here */
var url = "handle.php?showit=" + escape(content);
request.open("GET", url, true);
request.onreadystatechange = go;
request.send(null);
}
function go() {
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseText;
/* 'ajaxcontent' is the name of my div that will contain the info */
document.getElementById("ajaxcontent").innerHTML = response;
}
}
}
function showIt() {
var aTags=document.getElementById('statelinks').getElementsByTagName('a');
for (i=0; i<aTags.length; i++) {
aTags[i].onclick=function() {
var show=this.href.split('content=')[1];
ajaxSwitch(show);
return false;
}
}
}
window.onload=showIt;
and the page code (test.php):
<html>
<head>
<script type="text/javascript" src="ajaxswitch.js"></script>
</head>
<body>
<div id="ajaxswitchcontent">
<ul id="options">
<li><a href="test.php?content=one">one</a></li>
<li><a href="test.php?content=two">two</a></li>
<li><a href="test.php?content=three">three</a></li>
</ul>
<div id="ajaxcontent">
<?php include 'handle.php'; echo $show; ?>
</div>
</div>
</body>
</html>