12 Replies - 4181 Views - Last Post: 09 June 2009 - 11:51 AM Rate Topic: -----

#1 jw2k_fr  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 04-April 06

Changing text on a page without page refresh?

Post icon  Posted 08 June 2009 - 07:11 PM

Hi all

I am a complete PHP noob and whilst I have done some HTML and CSS, I am not even sure if PHP is the best way of doing what I want to do. I am also not sure of the correct way of phrasing what I am trying to do, so unsurprisingly, I haven't found anything in the forums or on the web.

I want to avoid using Javascript if at all possible.

Here is my sample code:

<table width="660" border="0" align="center" cellpadding="0" cellspacing="0" >
	<tr>
		<td>
			<table width="100%" border="0" cellspacing="0" cellpadding="0">
				<tr valign="top">

					<td>
						<div id="sidebar">
			<h2>What people are saying</h2>
			<ul>

				<li><a href="#">First update link</a></li>
				<li><a href="#">Second update link</a></li>
				<li><a href="#">Third update link</a></li>

						</ul>
						</div>
					</td>

					<td id="content">

						<h2>Update the text in the next paragraph.</h2>
						<p>that would be here</p>

					</td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td></td>
	</tr>
</table>



As hinted at in the above code, when one of the unordered list items is clicked, it should update the body text below, either with a couple of paragraphs of text stored in a variable in the page, or maybe stored in a separate text file, I don't mind which.

My biggest aim is not to need a page refresh to update the text, followed closely by not using Javascript.

Is This A Good Question/Topic? 0
  • +

Replies To: Changing text on a page without page refresh?

#2 ShaneK  Icon User is offline

  • require_once("brain.php"); //Fatal error :/
  • member icon

Reputation: 240
  • View blog
  • Posts: 1,224
  • Joined: 10-May 09

Re: Changing text on a page without page refresh?

Posted 08 June 2009 - 07:13 PM

Unfortunately, you can't change a page without refreshing it without using Javascript.

Yours,
Shane~
Was This Post Helpful? 0
  • +
  • -

#3 jw2k_fr  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 04-April 06

Re: Changing text on a page without page refresh?

Posted 08 June 2009 - 07:28 PM

View PostShaneK, on 8 Jun, 2009 - 06:13 PM, said:

Unfortunately, you can't change a page without refreshing it without using Javascript.


Thanks Shane.
What about dynamic menus? Something where you can explode items in a list

ie:

List Item 1
List Item 2
List Item 3



After clicking on List item 1 becomes:

List Item 1
   This is the text regarding list item 1.  It might go on for several lines...
List Item 2
List Item 3



And then after clicking on List item 2 becomes:

List Item 1
List Item 2
   This is some different text for list item 2.  It might also go on for several lines...
List Item 3




I have seen some examples of this done through javascript, does anyone know how to do this without it?

Thanks

This post has been edited by jw2k_fr: 08 June 2009 - 07:29 PM

Was This Post Helpful? 0
  • +
  • -

#4 CTphpnwb  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 2889
  • View blog
  • Posts: 10,001
  • Joined: 08-August 08

Re: Changing text on a page without page refresh?

Posted 08 June 2009 - 08:01 PM

It can't be done in PHP because the user doesn't see anything until PHP is done executing. Changes on the client end need to be done with client side software.

Why are you against using Javascript? (Personally, I think it's used too often and in unsafe ways, but it does have its uses.)
Was This Post Helpful? 0
  • +
  • -

#5 Core  Icon User is offline

  • using System.Linq;
  • member icon

Reputation: 774
  • View blog
  • Posts: 5,097
  • Joined: 08-December 08

Re: Changing text on a page without page refresh?

Posted 08 June 2009 - 08:08 PM

You are probably looking for AJAX (Asynchronous Javascript And XML), but again, you will have to use Javascript. You won't be able to achieve this by using plain PHP.
Was This Post Helpful? 0
  • +
  • -

#6 jw2k_fr  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 04-April 06

Re: Changing text on a page without page refresh?

Posted 09 June 2009 - 06:38 AM

View PostCTphpnwb, on 8 Jun, 2009 - 07:01 PM, said:

It can't be done in PHP because the user doesn't see anything until PHP is done executing. Changes on the client end need to be done with client side software.

Why are you against using Javascript? (Personally, I think it's used too often and in unsafe ways, but it does have its uses.)


Thanks for all the replies. I was trying to stay away from Javascript because the kind of user who is going to be looking at the site in question is going to be un-tech-savvy. This means (probably) one of two 'profiles' - the clueless "default settings" brigade and the "ohmigod the intarwebs going to eat my computer" brigade who turn security settings up to maximum 'because its safer'.

The former don't pose a problem, but anyone who has javascript disabled would be a problem... which I had assumed happens when you turn security up to max in IE. Have I got the wrong end of the script... I mean stick? :)


Thanks
James

This post has been edited by jw2k_fr: 09 June 2009 - 06:38 AM

Was This Post Helpful? 0
  • +
  • -

#7 RPGonzo  Icon User is offline

  • // Note to self: hmphh .... I forgot
  • member icon

Reputation: 151
  • View blog
  • Posts: 954
  • Joined: 16-March 09

Re: Changing text on a page without page refresh?

Posted 09 June 2009 - 06:56 AM

You could use CSS and a lot of relative/absolute positioning and some other tricks to pull this off but by far the easiest way is to use Javascript ... I have grown fond of JQuery it has a lot of very useful functions already built into it for ease of use ...

The CSS method is doable ... just takes a lot of working and position hacking for IE to make it look smooth and the same across all browsers ...
Was This Post Helpful? 0
  • +
  • -

#8 CTphpnwb  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 2889
  • View blog
  • Posts: 10,001
  • Joined: 08-August 08

Re: Changing text on a page without page refresh?

Posted 09 June 2009 - 07:12 AM

View Postjw2k_fr, on 9 Jun, 2009 - 09:38 AM, said:

... which I had assumed happens when you turn security up to max in IE. Have I got the wrong end of the script... I mean stick? :)

Well, if you're going to code for the worst browser and the most xenophobic users out there, your site isn't going to be very good.

I think all web developers should go in the opposite direction: test for IE and point those users to standards compliant web browsers.

java script:
if(navigator.userAgent.toLowerCase().indexOf('msie') > -1) {
  alert('Your browser does not fully support web standards. Please choose another browser");
}

It might be good to add links to Firefox, Safari, Opera, Camino, Omniweb, Chrome, etc., just to educate users to the fact that there are better browsers available.

This post has been edited by CTphpnwb: 09 June 2009 - 07:13 AM

Was This Post Helpful? 0
  • +
  • -

#9 jw2k_fr  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 04-April 06

Re: Changing text on a page without page refresh?

Posted 09 June 2009 - 07:21 AM

View PostRPGonzo, on 9 Jun, 2009 - 05:56 AM, said:

The CSS method is doable ... just takes a lot of working and position hacking for IE to make it look smooth and the same across all browsers ...

Hmmm okay, I will look elsewhere as I don't need to make this a learning Odyssey!

View PostCTphpnwb, on 9 Jun, 2009 - 06:12 AM, said:

Well, if you're going to code for the worst browser and the most xenophobic users out there, your site isn't going to be very good.

Ha! Better avoid that then :)

View PostCTphpnwb, on 9 Jun, 2009 - 06:12 AM, said:

I think all web developers should go in the opposite direction: test for IE and point those users to standards compliant web browsers.

Unfortunately, I don't think the person I am writing the site for will want me to be bringing my soapbox out at this point :)

View PostRPGonzo, on 9 Jun, 2009 - 05:56 AM, said:

You could use CSS and a lot of relative/absolute positioning and some other tricks to pull this off but by far the easiest way is to use Javascript ... I have grown fond of JQuery it has a lot of very useful functions already built into it for ease of use ...

Okay, I will check it out - thanks for the pointer

I will have to investigate JS and JQuery and see what will involve the least hassle - thanks everyone for very useful and incredibly quick replies. I really like DiC!




View PostCore, on 8 Jun, 2009 - 07:08 PM, said:

You are probably looking for AJAX (Asynchronous Javascript And XML), but again, you will have to use Javascript. You won't be able to achieve this by using plain PHP.


Okay - thanks for this too Core, I will take a look alongside JQuery
Was This Post Helpful? 0
  • +
  • -

#10 CTphpnwb  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 2889
  • View blog
  • Posts: 10,001
  • Joined: 08-August 08

Re: Changing text on a page without page refresh?

Posted 09 June 2009 - 07:33 AM

View Postjw2k_fr, on 9 Jun, 2009 - 10:21 AM, said:

Unfortunately, I don't think the person I am writing the site for will want me to be bringing my soapbox out at this point :)

You could tone it down a little and simply suggest that their browsing experience would be better with a standards compliant browser. The reverse has been done for years, with many sites encouraging people to use IE. I got a notice just the other day while on vonage.com that warned me not to "upgrade" :crazy: to IE 8 because their site wasn't yet compatible. That felt very much like a soapbox to me considering that I'm on a Mac. ;)
Was This Post Helpful? 0
  • +
  • -

#11 RPGonzo  Icon User is offline

  • // Note to self: hmphh .... I forgot
  • member icon

Reputation: 151
  • View blog
  • Posts: 954
  • Joined: 16-March 09

Re: Changing text on a page without page refresh?

Posted 09 June 2009 - 07:47 AM

+1 IE sucks ... lol one one of my more casual gaming websites i have in the lower corner "Your IE browser sucks please don't use it k thx! UPGRADE NOW!" and it includes a link to FF but only if they are using IE of course ;)...

But back on topic the JQuery has a built in AJAX feature ... they have a all the documentation on their site of course ;)
Was This Post Helpful? 0
  • +
  • -

#12 jw2k_fr  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 04-April 06

Re: Changing text on a page without page refresh?

Posted 09 June 2009 - 10:58 AM

View PostCTphpnwb, on 9 Jun, 2009 - 06:33 AM, said:

You could tone it down a little and simply suggest that their browsing experience would be better with a standards compliant browser.

I shall see whether we can incorporate this as v1.1 :) I use FF for my every day browser and IE for compatibility verification

View PostRPGonzo, on 9 Jun, 2009 - 06:47 AM, said:

But back on topic the JQuery has a built in AJAX feature ... they have a all the documentation on their site of course ;)

Can you give me any pointers towards which commands I might need? Reading through the documentation is proving to be quite a lot to take in for one stupid webpage ;)

This post has been edited by jw2k_fr: 09 June 2009 - 10:58 AM

Was This Post Helpful? 0
  • +
  • -

#13 RPGonzo  Icon User is offline

  • // Note to self: hmphh .... I forgot
  • member icon

Reputation: 151
  • View blog
  • Posts: 954
  • Joined: 16-March 09

Re: Changing text on a page without page refresh?

Posted 09 June 2009 - 11:51 AM

Here i was bored and made you a test ... you should be able to figure out whats going on and how

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

	<head>
		<meta http-equiv="Content-Language" content="en-us"/>
		<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
		<title>AJAX Example Using JQuery</title>
		
		<script src="http://code.jquery.com/jquery-latest.js"></script>

		<script>
		$(document).ready(function(){ // dont do anything until the DOM is ready for it
			$("body").css("width", "800px"); // example of changing css with JQuery
			$("div#answerField").fadeTo("slow", 0.4); // This should set the opacity back to 40% on load
			
			$("div#answerField").hover(function(){
				$(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
			},function(){
				$(this).fadeTo("slow", 0.4); // This should set the opacity back to 40% on mouseout
			});
			
			$("button#formSubmit").click(function () {
				if ($("input#yourName").val() == "" || $("input#yourAge").val() == "") { // make sure they have something there
					alert("All fields are required to be able to generate a response");
					return false;
				} else {
					$.post("process.php", { // using the AJAX post through JQuery to process.php
					yourName: $("input#yourName").val(), // form input name
					yourAge: $("input#yourAge").val() // form input age
					},
					function(data){
						$("div#answerField").html(data);
					});
					
					return false;
				}
			});
		});
		</script>
		
		<style type="text/css">
			* { margin: 0 auto; padding: 0; }
			html { background-color: #333; }
			body { background-color: #EFEFE4; height: 500px; padding: 50px 20px 10px 20px; }
			#answerField { background-color: #666; color: #000; height: 200px; width: 80%; }
		</style>
		
	</head>

<body>
	<h1>AJAX Test Form</h1>
	<form>
		<label>Your Name:</label><input type="text" name="yourName" id="yourName" value=""/><br/>
		<label>Your Age:</label><input type="text" name="yourAge" id="yourAge" value=""/><br/>
		<button name="formSubmit" id="formSubmit">Submit Form</button>
	</form>
	
	<br/><br/><br/>
	
	<h3>Hover and watch me fade :)/></h3>
	<div id="answerField"></div>
</body>
</html>



and the php

<?php
	// now we process the information using php
	
	if (isset($_POST['yourName']) && isset($_POST['yourAge'])) {
		$name = trim($_POST['yourName']);
		$age  = trim($_POST['yourAge']);
		
		if ($name == "" && $age == "") {
			echo "<center><h1>I'm sorry it looks like you left some fields blank.</h1></center>";
			return;
		}
		
		echo "<center><h1>Hello $name, your a youngster at $age!!</h1></center>";
	}
	
?>



:) hope it helps :P i named the first one test.php but it could be HTML as well

Attached File(s)


This post has been edited by RPGonzo: 09 June 2009 - 11:52 AM

Was This Post Helpful? 1
  • +
  • -

Page 1 of 1