PHP/Javascript what a duo!

You have a PHP page that shows some information, but you don’t want to show all the information shown at once. When the user clicks on a link the content of the paragraph associated with the link should appear under the link. How do you approach this?

This is largely a job Javascript could do (if you know everything ahead of time) or PHP will be needed if you don’t know everything until you click. Am going to give you guidelines regarding the first scenario (the second scenario (sort of) only differs in the sense that PHP would do what is “hard-coded” in the discussion below, adding its intelligence along the way … ie. know that PHP can write its own Javascript … very powerful duo!).

Example 1 of 2:

You have some PHP which produces HTML like below:

<a href="#" id='mya' onclick='populatep();'>My Link Makes Things Appear Below ...</a>
<p id='myp' style='display:none;'></p>

... the new Javascript you will need ( put within <head> and </head> ) would look like:

<script type="text/javascript">
function populatep() {
var myst = document.getElementById( "myp" );
myst.innerHTML = myst.innerHTML + "My paragraph appears!";
myst.style.display = "block";
}

</script>

Example 2 of 2:

You have some PHP which produces HTML like below:

<a href="#" id='mya' onclick='populateselect();'>My Link Makes Things Appear Below ...</a>
<select id='myselect' style='display:none;'></select>

... the new Javascript you will need ( put within <head> and </head> ) would look like:

<script type="text/javascript">
function populateselect() {
var myst = document.getElementById( "myselect");
myst.innerHTML = myst.innerHTML + "<option value='" + "val1" + "'>Value 1</option>";
myst.innerHTML = myst.innerHTML + "<option value='" + "val2" + "'>Value 2</option>";
myst.innerHTML = myst.innerHTML + "<option value='" + "val3" + "'>Value 3</option>";
myst.innerHTML = myst.innerHTML + "<option value='" + "val4" + "'>Value 4</option>";
myst.style.display = "block";
}

</script>

Appendix 1 of 2 (PHP writing Javascript) ... :

<?php
echo '<html>' . "n";
echo '<head>' . "n";
echo '<script type="text/javascript">' . "n";
echo ' function populatep() {' . "n";
echo ' var myst = document.getElementById( "myp" );' . "n";
echo ' myst.innerHTML = myst.innerHTML + "My paragraph appears!";' . "n";
echo ' myst.style.display = "block";' . "n";
echo ' }' . "n";
echo '</script>' . "n";
echo '</head>' . "n";
echo '<body>' . "n";
echo '</body>' . "n";
echo '</html>' . "n";
?>

Appendix 2 of 2 (PHP writing Javascript) ... differentiating:

<?php

if (strpos($_SERVER['QUERY_STRING'], "#") !== false) {

echo '<html>' . "n";
echo '<head>' . "n";
echo '<script type="text/javascript">' . "n";
echo ' function populatep() {' . "n";
echo ' var myst = document.getElementById( "myp" );' . "n";
echo ' myst.innerHTML = myst.innerHTML + "My paragraph appears on the second pass!";' . "n";
echo ' myst.style.display = "block";' . "n";
echo ' }' . "n";
echo '</script>' . "n";
echo '</head>' . "n";
echo '<body>' . "n";
echo '</body>' . "n";
echo '</html>' . "n";
} else {
echo '<html>' . "n";
echo '<head>' . "n";
echo '<script type="text/javascript">' . "n";
echo ' function populatep() {' . "n";
echo ' var myst = document.getElementById( "myp" );' . "n";
echo ' myst.innerHTML = myst.innerHTML + "My paragraph appears!";' . "n";
echo ' myst.style.display = "block";' . "n";
echo ' }' . "n";
echo '</script>' . "n";
echo '</head>' . "n";
echo '<body>' . "n";
echo '</body>' . "n";
echo '</html>' . "n";
}
?>


Think you misunderstood me when I said "Get to the root of the problem"?!

Think you misunderstood me when I said "Get to the root of the problem"?!

Did you know …
JavaScript makes a great easy-access Calculator?

Try typing the lines below into the address bar of your favourite browser:

Javascript: eval(512 / 380);
Javascript: eval(512 * 380);
Javascript: eval(512 – 380);
Javascript: eval(512 + 380);
Javascript: eval(512 % 380);

These days we spend so much time on the Internet it is a much quicker way to get to a calculator!

If this was interesting you may be interested in this too.

This entry was posted in eLearning and tagged , . Bookmark the permalink.

4 Responses to PHP/Javascript what a duo!

Leave a Reply

Your email address will not be published. Required fields are marked *