JavaScript Development
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
 
User Name:
Password:
Remember me
 



Go Back   Dev Articles Community ForumsProgrammingJavaScript Development

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Display Modes
 
Unread Dev Articles Community Forums Sponsor:
  #1  
Old May 11th, 2004, 09:08 PM
crazycondor crazycondor is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Apr 2004
Posts: 23 crazycondor User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 54 m 50 sec
Reputation Power: 0
Exclamation 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 !!

Reply With Quote
  #2  
Old May 11th, 2004, 11:50 PM
stumpy's Avatar
stumpy stumpy is offline
May contain nuts.
Dev Articles Regular (2000 - 2499 posts)
 
Join Date: Aug 2002
Posts: 2,056 stumpy User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 5 h 44 m 22 sec
Reputation Power: 0
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.

Reply With Quote
  #3  
Old May 14th, 2004, 04:35 PM
camperjohn64 camperjohn64 is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: May 2004
Posts: 2 camperjohn64 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
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
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 !!

Reply With Quote
  #4  
Old September 5th, 2006, 04:37 PM
panki panki is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Sep 2006
Posts: 1 panki User rank is Just a Lowly Private (1 - 20 Reputation Level) 
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.

Reply With Quote
  #5  
Old September 6th, 2006, 09:11 AM
MadCowDzz's Avatar
MadCowDzz MadCowDzz is offline
I'm Internet Famous
Dev Articles Frequenter (2500 - 2999 posts)
 
Join Date: Jan 2003
Location: Toronto, Canada
Posts: 2,886 MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 1 Week 16 h 19 m 35 sec
Reputation Power: 18
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

Reply With Quote
  #6  
Old April 18th, 2008, 10:15 AM
tdunevent tdunevent is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Apr 2008
Posts: 1 tdunevent User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 4 m 59 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?

Reply With Quote
  #7  
Old April 28th, 2008, 12:47 PM
MadCowDzz's Avatar
MadCowDzz MadCowDzz is offline
I'm Internet Famous
Dev Articles Frequenter (2500 - 2999 posts)
 
Join Date: Jan 2003
Location: Toronto, Canada
Posts: 2,886 MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 1 Week 16 h 19 m 35 sec
Reputation Power: 18
Quote:
Originally Posted by tdunevent
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?


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

Reply With Quote
  #8  
Old January 12th, 2009, 01:51 PM
jam87 jam87 is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Jan 2009
Posts: 3 jam87 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 25 m 52 sec
Reputation Power: 0
IE problems

Hi,

Firstly thanks alot for this, just what i needed I've got everything working well in Firefox, and is working for changing pages without refresh well in IE, but will only send form data in Firefox. Is this a limitation of the code or am i doing somthing wrong, which i expect i am

Heres what i've got:

Code:
######## Header 

<script src="core/js/showpage.js" type="text/javascript"></script>
<script src="core/js/getpage.js" type="text/javascript"></script>

<script language="javascript">
<!--
var state = 'hidden';

function showhide(layer_ref) {

if (state == '') {
state = 'none';
}
else {
state = '';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById && !document.all) {
maxwell_smart = document.getElementById(layer_ref);
maxwell_smart.style.display = state;
}
}
//-->
</script>

##################### Body

<div>
<input name="next_summary" type="button" class="button" onclick="javascript:get(
this.parentNode,
'template/pages/order_summary.php',
'next_summary',
'someotherinfotosend' 
);" value="Next" />
</div>

<div id="next_summary">
test
</div>

##################### End


The order_summary.php file has nothing in it, only "test!".

Thanks and any help much appreciated

Jam87

Reply With Quote
  #9  
Old January 12th, 2009, 01:55 PM
jam87 jam87 is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Jan 2009
Posts: 3 jam87 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 25 m 52 sec
Reputation Power: 0
Fixed

Hi,

Just fixed the problem myself, for anyone else that encounters a problem like this be sure to use a different name than the target div for the submit button! Look for conflicting names/ids.

If you look above youll see the problem

Thanks again and great piece of code

Jam87

Reply With Quote
  #10  
Old January 12th, 2009, 02:55 PM
jam87 jam87 is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Jan 2009
Posts: 3 jam87 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 25 m 52 sec
Reputation Power: 0
Another q :)

Hi again,

was just wandering how i can use the data submitted by the form on the same page? So if I pressed the button it loaded up the page that processes the form in a div using the $_POST or $_GET request to pull data.

Thanks

Jam87

Reply With Quote
  #11  
Old February 16th, 2010, 07:39 PM
fnaaijkens fnaaijkens is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Feb 2010
Posts: 1 fnaaijkens User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 17 m 5 sec
Reputation Power: 0
posted form vars with this method

Quote:
Originally Posted by jam87
Hi again,

was just wandering how i can use the data submitted by the form on the same page? So if I pressed the button it loaded up the page that processes the form in a div using the $_POST or $_GET request to pull data.

Thanks

Jam87


Have you got some follow-up?
I was succesful in following this solution, to the point, that I am not receiving the posted variables.

Also, has anyone tried to UPLOAD files with this approach?

I would be very grateful for further comments!

Reply With Quote
Reply

Viewing: Dev Articles Community ForumsProgrammingJavaScript Development > Update <DIV> Contents Dinamically?


Developer Shed Advertisers and Affiliates


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap