PHP load code from file and display in div

Question

Waffles007 -1 Light Poster

14 Years Ago

Hi,

I'm having trouble finding out how to have a link pull a certain id from a single file and display that id's content within a certain div on the page.

I'm trying to cut down on the amount of pages on my site by loading certain critical code into one page, as the code is small, and when a user clicks a link a command would be executed looking for a certain id in the one page with the critical data in it and display it inside a <div> on the same page.

I hope this clear. I heard PHP was good for this kind of work. I hope I'm right in posting in this forum.

Any help would be greatly appreciated.

php

3 Contributors
14 Replies
3K Views
5 Days Discussion Span
Latest Post 14 Years Ago Latest Post by Waffles007

sudeepjd 19 Junior Poster

14 Years Ago

Try this.

PHP Code (getdata.php):

<!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">
<head>
</head>
<body>
<a href="?id=1">Para1</a><br />
<a href="?id=2">Para2</a><br />
<a href="?id=3">Para3</a><br />
<a href="?id=4">Para4</a><br /><br />
<div id="contents" style="border:2px solid #cccccc;width:100px;height:30px;background:#eeeeee;padding:5px;">
	<?php
		$line_id=$_GET['id'];
		if ($line_id!=""){
			$file=file("text.txt");
			echo $file[$line_id-1];
		}
	?>
</div>
</body>
</html>

Text.txt file:

Para 1
Para 2
Para 3
Para 4

I the above code, you can transfer the id from the links to the PHP file using the id. This id would tell the code which line of the text you need to display in the div. The only problem I see here is that the page will have to be reloaded every time you need the text in the div changed. A way around this is to load the text into an array in javascript and then use javascript to put the text into the div (or) use AJAX.

Edited 14 Years Ago by sudeepjd because: Added explanation on code

sudeepjd 19 Junior Poster

14 Years Ago

If you want to us Javascript to do the same thing use the following code. This will use PHP but will also get round the need to refresh the page each time.

PHP Code (getdata.php):

<!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">
<head>
<script type="text/javascript">
var myPara=new Array();
<?php
	$file=file("text.txt");
	$i=0;
	foreach($file as $line){
		$l=trim($line);
		echo "myPara[$i]='$l';\n";
		$i++;
	}
?>

function get_para(id){
	document.getElementById("contents").innerHTML=myPara[id-1];
}
</script>
</head>
<body>
<a href="javascript:get_para(1)">Para1</a><br />
<a href="javascript:get_para(2)">Para2</a><br />
<a href="javascript:get_para(3)">Para3</a><br />
<a href="javascript:get_para(4)">Para4</a><br /><br />
<div id="contents" style="border:2px solid #cccccc;width:100px;height:30px;background:#eeeeee;padding:5px;">
	
</div>
</body>
</html>

Text File (text.txt):

Para1
para2
Para3
Para4

You now have 2 ways to do the same thing. All the best and let me know if you need anything else.

sudeepjd 19 Junior Poster

14 Years Ago

Yes, both are possible. For 2, you just need to store the javascript in an external file and link to it. In the following script, we will be dynamically generating the javascript.

PHP Code (getdata.php):

<!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">
<head>
<script type="text/javascript" src="java.php"></script>
</head>
<body>
<a href="javascript:get_para(11)">Para1</a><br />
<a href="javascript:get_para(12)">Para2</a><br />
<a href="javascript:get_para(13)">Para3</a><br />
<a href="javascript:get_para(14)">Para4</a><br /><br />
<div id="contents" style="border:2px solid #cccccc;width:100px;height:30px;background:#eeeeee;padding:5px;">
	
</div>
</body>
</html>

Javascript File (java.php):

var myPara=new Array();
<?php
	$file=file("text.txt");
	$i=0;
	foreach($file as $line){
		$l=trim($line);
		echo "myPara[$i]='$l';\n";
		$i++;
	}
?>

function get_para(id1){
	for (i=0;i<myPara.length;i++){
		divArray=myPara[i].split("#");
		if (divArray[0]*1==id1){
			divText=divArray[1];
		}
	}
	document.getElementById("contents").innerHTML=divText;
}

Text File (text.txt):

11#para 1
12#Para 2
13#para 3
14#Para 4

Please note that the id numbers for the paragraphs end with a #. The code splits the lines into the id and the text and then loops through to find the correct text to display.

All the best.

Edited 14 Years Ago by sudeepjd because: n/a

Waffles007 commented: Thank you! You are a very smart individual. Keep up the excellent work! +1

sudeepjd 19 Junior Poster

14 Years Ago

Yes you can. There are 2 changes you will have to make to do this.

PHP File (getdata.php):

<a href="javascript:get_para('test1')">Para1</a><br />

Notice the quotes('') around the text. This is used since test1 is a string. We did not need it before since we were using numbers.

Javascript File (java.php):

function get_para(id1){
	for (i=0;i<myPara.length;i++){
		divArray=myPara[i].split("#");
		if (divArray[0]==id1){
			divText=divArray[1];
		}
	}
	document.getElementById("contents").innerHTML=divText;
}

Here notice that I removed the "*1" after the divArray[0]. The reason is that previously we were comparing to a number. So to convert the number transfered from the file to a number we multiplied it by 1. Removing it keeps the text nature of the transfered string.

Waffles007 commented: Awesome! +1

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Thank you! You are a very smart individual. Keep up the excellent work!

chrishea 182 Nearly a Posting Virtuoso · Answer 1 · 2010-11-11T03:12:45+00:00

You should be able to do this using an include. You can put an If ahead of the include and decide which module to include based upon your specific criteria.

Waffles007 -1 Light Poster · Answer 2 · 2010-11-11T03:26:56+00:00

I could do that if I wanted to add the whole file right? If so that's not exactly what I was thinking. If someone clicks a link to a page, instead of loading that page, I want the action of clicking the link to find a certain line in the page and display only that line within <div id=content>Content here</div>

Like:

<a href="http://www.example.com/text.txt">This link will display paragraph 1 in text.txt down below</a>
<a href="http://www.example.com/text.txt">This link will display paragraph 2 in text.txt down below</a>
<a href="http://www.example.com/text.txt">This link will display paragraph 3 in text.txt down below</a>
<a href="http://www.example.com/text.txt">This link will display paragraph 4 in text.txt down below</a>

<div id="content">
Paragraph 1 of text.txt or
Paragraph 2 of text.txt or
Paragraph 3 of text.txt or
Paragraph 4 of text.txt
</div>

I hope that helps to see what I'm looking for.

Thanks for the reply.

sudeepjd 19 Junior Poster · Answer 3 · 2010-11-11T08:50:43+00:00

There are 2 ways of doing this

Without PHP: You can use XML to store the paragraphs and then use javascript to include the required paragraphs into the div tag. Check out http://www.w3schools.com/Xml/xml_parser.asp for more information how this can be done.

With PHP: Us the PHP file() function to pull the contents of the target file to an array, then use PHP to echo the required contents onto the page. Check out http://php.net/manual/en/function.file.php for the syntax of this command via PHP.

Please let me know if you have difficulty with the code.

Waffles007 -1 Light Poster · Answer 4 · 2010-11-11T10:27:55+00:00

I see, I can understand how the file() function works so I'll give it a try.

Thank you very much for the information, sudeepjd.

I'll let you know if I am successful.

Waffles007 -1 Light Poster · Answer 5 · 2010-11-11T10:47:21+00:00

Ok, I'm lost... I'm not to sure how to implement the file() into a link so that when you click the link it will pull up the proper $text.

Index.php

<?php
$lines = file('text.txt');
echo $paragraph1
?>

Text.txt:

$paragraph1 = "Paragraph 1"

I don't think the code is proper though. As well I would like the paragraph that is clicked to replace whatever is currently in the div.

I can't seem to grasp XML. It seems alien to me.

Thanks.

Waffles007 -1 Light Poster · Answer 6 · 2010-11-11T22:21:58+00:00

Hi Sudeepjd,

Wow these codes work very well. Thank you. I am wondering if it's possible to do two things with the Javascript example.

1. Is there a way for the code to pull up text by id and not by line?

Example;

Say I had wanted to add a new third paragraph and simply imputed the new line between Para2 and Para3, making the old Para3 into Para4. I'd have to rewrite my code to account for the line change.

Whereas if I were to have it search by ID i wouldn't need to worry about rewriting the code because the ID is unique and not line based.

2. Is it possible to have the code in the header to drop or close the document it loads after the function is complete? So it isn't displayed in source?

Thank you very much for your help.

Waffles007 -1 Light Poster · Answer 7 · 2010-11-12T13:32:22+00:00

Thanks again sudeepjd.

That did it for me! I can't thank you enough. I am now able to finish my project!
I am very grateful for your help. Thank you!

Waffles007

Waffles007 -1 Light Poster · Answer 8 · 2010-11-12T13:32:37+00:00

Sudeepjd,

You have saved me from creating 1000's of new php files by allowing me to create one single file that will hold all the data I need to link to.

I can't thank you enough!

I wish you well in your studies.

Take care my friend,

Waffles007

Waffles007 -1 Light Poster · Answer 9 · 2010-11-16T13:14:16+00:00

Hi Sudeepjd,

I'm having issues with the code here.

var myPara=new Array();
<?php
	$file=file("text.txt");
	$i=0;
	foreach($file as $line){
		$l=trim($line);
		echo "myPara[$i]='$l';\n";
		$i++;
	}
?>

function get_para(id1){
	for (i=0;i<myPara.length;i++){
		divArray=myPara[i].split("#");
		if (divArray[0]*1==id1){
			divText=divArray[1];
		}
	}
	document.getElementById("contents").innerHTML=divText;
}

I was wondering if the ID it pulls can be text instead of numbers.

Example: javascript:get_para(test1) instead of javascript:get_para(1)

I tried simply adding the text but its not loading the line. Is this possible?
I was hoping to name the ID's instead of numbering them.

Sorry for troubling you about this. This is the last thing I was hoping could be done.

Waffles007 -1 Light Poster · Answer 10 · 2010-11-16T19:44:32+00:00

Hi Sudeepjd,

That worked! Wow, you're the greatest.

Thanks so much!