PHP/Javascript (AJAX?) question.

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
thiscatis
Forum Contributor
Posts: 434
Joined: Thu Jul 20, 2006 11:00 am

PHP/Javascript (AJAX?) question.

Post 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?
DrTom
Forum Commoner
Posts: 60
Joined: Wed Aug 02, 2006 8:40 am
Location: Las Vegas

Post by DrTom »

woops
Last edited by DrTom on Thu Aug 03, 2006 9:08 am, edited 1 time in total.
DrTom
Forum Commoner
Posts: 60
Joined: Wed Aug 02, 2006 8:40 am
Location: Las Vegas

Post 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/
Last edited by DrTom on Thu Aug 03, 2006 9:27 am, edited 2 times in total.
thiscatis
Forum Contributor
Posts: 434
Joined: Thu Jul 20, 2006 11:00 am

Post 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
Post Reply