Update <DIV> Contents Dinamically?

Dev Articles Community Forums Sponsor:

Stop making mediocre tutorials.The best tutorials are video! Camtasia Studio makes it easy to create engaging, buzz-building screen videos at any size, in any popular format. Download the free trial!

May 11th, 2004, 08:08 PM

crazycondor

Registered User

Join Date: Apr 2004

Posts: 23

Time spent in forums: 54 m 50 sec
Reputation Power: 0

Update <DIV> Contents Dinamically?

Hello,

My question this time is the following. Is it possible to update the contents of a <DIV> using a PHP script without reloading the whole

page. What i wanna do is: (1) place a form in the <DIV>, (2) collect the user data, (3) process the data with PHP and (4) update

the contents of the DIV accordingly without reloading the whole page. The problem is that from the aforementioned i cannot achieve

(4). Any ideas? innerHTML probably? I don't know. Please help me !!

May 11th, 2004, 10:50 PM

stumpy

May contain nuts.

Dev Articles Regular (2000 - 2499 posts)

Join Date: Aug 2002

Location: Sydney, AU

Posts: 2,058

Time spent in forums: 5 h 6 m 11 sec
Reputation Power: 8

I think you might be confused as to exactly how PHP works. PHP is a server-side language - all processing is done server-side, the result of which is an plain HTML file, which is sent to the client. It is not possible for any interaction to occur between PHP and the user agent (browser).

Just submit the form as usual, or, as a last resort, use frames.

__________________
DevArticles Moderator
BlueSix - Web Development and Consulting

May 14th, 2004, 03:35 PM

camperjohn64

Registered User

Join Date: May 2004

Posts: 2

Time spent in forums: < 1 sec
Reputation Power: 0

What I did was this:

1) Make a hidden inline frame on your initial form <IFRAME>
2) When you want to get an update, set innerHTML="newdata.php?someparameters=xxx".
3) My new form loads in the background, and I have several <input type=text> fields.
4) On the new form loaded, do and onLoad=somefunction() that puts all the new fields from above back onto your main
form. document.parent.get element by ID = document.whatever...

The user never sees anything, and you can get just about any new data from your server without reloading the page (instead, you're just reloading the hidden page and poasting the results onto the main page once its loaded).

JM
www.sonicspeedsters.com
www.nakedchicksonbikes.com

Quote:

Originally Posted by crazycondor

September 5th, 2006, 03:37 PM

panki

Registered User

Join Date: Sep 2006

Posts: 1

Time spent in forums: 15 m 53 sec
Reputation Power: 0

Use Ajax

Do this:

first you need a the ajax scripts:

getPage.js

Code:

   var http_request = false;
   var localWhereToPut = "";
   
   function makePOSTRequest(url, parameters, whereToPut) {
      http_request = false;
      if (window.XMLHttpRequest) { // Mozilla, Safari,...
         http_request = new XMLHttpRequest();
         if (http_request.overrideMimeType) {
         	// set type accordingly to anticipated content type
            //http_request.overrideMimeType('text/xml');
            http_request.overrideMimeType('text/html');
         }
      } else if (window.ActiveXObject) { // IE
         try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
            try {
               http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
         }
      }
      if (!http_request) {
         alert('Cannot create XMLHTTP instance');
         return false;
      }
      localWhereToPut = whereToPut;
	  http_request.onreadystatechange = alertContents;
      http_request.open('POST', url, true);
      http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      http_request.setRequestHeader("Content-length", parameters.length);
      http_request.setRequestHeader("Connection", "close");
      http_request.send(parameters);
   }

   function alertContents() {
      if (http_request.readyState == 4) {
         if (http_request.status == 200) {
            //alert(http_request.responseText);
            result = http_request.responseText;
            document.getElementById(localWhereToPut).innerHTML   = result;            
         } else {
            alert('There was a problem with the request.');
         }
      }
   }
   
   function get(obj, whichPage, whereToPut, whatToPost) {
	 makePOSTRequest(whichPage, whatToPost, whereToPut);
   }

Code:

showPage.js

var xmlHttp
var localWhereToPut

function showPage(pageToFetch,whereToPut)
{ 
	xmlHttp=GetXmlHttpObject()
	if (xmlHttp==null)
		{
			alert ("Sorry you cannot run AJAX Applications.")
			return
		} 
	var url=pageToFetch
	localWhereToPut = whereToPut
	//url=url+"?q="
	//url=url+"&sid="+Math.random()
	xmlHttp.onreadystatechange=stateChanged
	xmlHttp.open("GET",url,true)
	xmlHttp.send(null)
}

function stateChanged() 
{ 
	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
		{ 
			document.getElementById(localWhereToPut).innerHTML  =xmlHttp.responseText
			localWhereToPut = ""

		} 
} 

function GetXmlHttpObject()
{ 
	var objXMLHttp=null
	if (window.XMLHttpRequest)
		{
			objXMLHttp=new XMLHttpRequest()
		}
	else if (window.ActiveXObject)
		{
			objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
		}
	return objXMLHttp
}

Then, you need to include your scripts on the page you want updated:

Code:

<script src="ajax/showPage.js"></script>
<script src="ajax/getPage.js"></script>

then you need a place to insert your form, and the data:

Code:

<div id="putFormHere"></div>

then you need to load the actual form

Code:

<body onLoad="showPage('objects/pageThatHasTheForm.php','putFormHere')">

and now the magic: get rid of the submit button, and write this instead:

Code:

<input name="button" type="button" onclick="javascript:get(
  
  	 this.parentNode,
  	 'thisIsThePageThatWillProcessTheForm.php',
	 'putFormHere',
	 'someOtherDataYouWanttoSendToThePage' 
  );" value="Send" />

And that's it. Youll get the form and the data once pressed the button on the page without reload.

September 6th, 2006, 08:11 AM

MadCowDzz

I'm Internet Famous

Dev Articles Frequenter (2500 - 2999 posts)

Join Date: Jan 2003

Location: Toronto, Canada

Posts: 2,890

Time spent in forums: 1 Week 16 h 4 m 48 sec
Reputation Power: 8

heh, a two-year-old thread gets an updated answer...
Very thorough explanation panki.

I'll insert my obligatory warning about AJAX... I don't believe AJAX is necessary in all situations and might becomes crippling to your site if the clients don't enable Javascript.

Be aware of how your site looks and acts with Javascript disabled!

Comments on this post

Annie79 agrees!

__________________
Daryl's Homepage | My Blogroll | My Profile | Firefox supporter!
DevArticles Forum Moderator

"The net is a waste of time, and that's exactly what's right about it." -- William Gibson

April 18th, 2008, 09:15 AM

tdunevent

Registered User

Join Date: Apr 2008

Posts: 1

Time spent in forums: 3 m 34 sec
Reputation Power: 0

This was very helpful, thanks! I have a question - I want to place 2 <div>s on my page but when I do only one of them displays. It's always the second one that I try to load. Does anyone have any ideas?

April 28th, 2008, 11:47 AM

MadCowDzz

I'm Internet Famous

Join Date: Jan 2003

Location: Toronto, Canada

Posts: 2,890

Time spent in forums: 1 Week 16 h 4 m 48 sec
Reputation Power: 8

Quote:

Originally Posted by tdunevent

Make sure the ID's are unique...

After a quick glance at the code above, I think you'd eed to change these lines:

Code:

<body onLoad="showPage('objects/pageThatHasTheForm.php','putFormHere');showPage('objects/pageThatHasTheOtherForm.php','putFormHere2')">

<div id="putFormHere2"></div>

Note, this isn't tested... so use discretion

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: