Page 1 of 1
PHP/Javascript (AJAX?) question.
Posted: Thu Aug 03, 2006 8:32 am
by thiscatis
I wonder if it's possible to do something like this and if you guys could point me
in the right direction.
You have your dynamic page where you get your content from a db.
We retrieve the text:
Code: Select all
$result = mysql_query("SELECT * FROM tblContent WHERE page='$pageid' AND username='$localuser' ")
or die(mysql_error());
while($row = mysql_fetch_array( $result )) {
$contenta = $row['content_a']." ";
$text = substr($contenta,0,1000);
$text = ereg_replace( "\n", "<br>", $text);
somewhere on the page I echo the text.
What i would like to do: Click a button and then you have a textfield with the db text as default value:
Code: Select all
<textarea name="content_a" rows="6" cols="80"><?php echo "$text"?></textarea>
But this without refreshing the page i'm working on.
My goal is to create a system for live editing, you just hit the "edit this page" button and the text becomes editable.
Anyone?
Posted: Thu Aug 03, 2006 8:48 am
by DrTom
woops
Posted: Thu Aug 03, 2006 8:51 am
by DrTom
Yes, you'd need AJAX to do this without refreshing.
Code: Select all
<script type="text/javascript" language="javascript">
//This actually makes an http_request object(the thign we use for ajax
//to the url you passed. This isn't a really cross browser method
//but should work in most, but you should definetly do some checking
//on that before you use this on anything important
function makeRequest(url)
{
var http_request = false;
// Pretty much everyone calls it this except, you know who
if (window.XMLHttpRequest)
{
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType)
{
http_request.overrideMimeType('text/xml');
// See note below about this line
}
}
else if (window.ActiveXObject)
{ // Yeah these guys..
try
{
//This is the newest version so we want that first
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
}
}
}
if (!http_request)
{
//:( NO AJAX OBJECT
return false;
}
//This is where the actual "ajax" takes place. What happens is
//Everytime the "status" changes of the http_request object
//the XMLHttpRequest class will call in this case alertContents with
//the http_request object passed
http_request.onreadystatechange = function() { alertContents(http_request); };
//This makes a simple GET request to the URL. Posts are possible, but
//a little more complicated
http_request.open('GET', url, true);
http_request.send(null);
}
function alertContents(http_request)
{
//the readyState is what state the object is in 1-4
//4 means it's finsihed executing and you can go on
//and process the response
if (http_request.readyState == 4)
{
//Javascript to handle your responseText now
document.getElementById.("MyFormElement").value = http_request.reponseText;
}
}
function submitform()
{
makeRequest("http://www.mysite.com/myphpscriptthatneedstodothings.php");
}
</script>
<form name = "myform" action="javascript:submitform();">
<textarea rows=10 colos=10 id="MyFormElement"></textarea>
</form>
Something like that.. That's not a really good AJAX example but it's a place to start.
Remember AJAX requires javascript which is annoying to a lot of people, so don't make
it a requirement. Also there's TONS of checks that need to occur for browser portability,
mostly when making the XMLHTTPRequest object. There's about a dozen different names,
different browser versions call it different things and it's a mess.
Here's a few good AJAX info
http://www.ajaxtutorial.net/ - not so much a tutorial, but has lots of links/resources
http://www.webpasties.com/xmlHttpRequest/
Posted: Thu Aug 03, 2006 9:03 am
by thiscatis
if you don't know exactly what i'm talking about..
The "quick edit" option for a post in Invision Power Board 2.x is something like that