{"id":293,"date":"2013-02-26T10:15:43","date_gmt":"2013-02-25T23:15:43","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=293"},"modified":"2015-05-15T11:15:53","modified_gmt":"2015-05-15T01:15:53","slug":"phpjavascript-what-a-duo","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/phpjavascript-what-a-duo\/","title":{"rendered":"PHP\/Javascript what a duo!"},"content":{"rendered":"
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?<\/p>\n

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!).<\/strong><\/em><\/p><\/blockquote>\n

<\/p>\n

Example 1 of 2:<\/p>\n

You have some PHP which produces HTML like below:<\/p>\n

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

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

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

<\/script><\/p>\n

Example 2 of 2:<\/p>\n

You have some PHP which produces HTML like below:<\/p>\n

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

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

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

<\/script><\/p>\n

Appendix 1 of 2 (PHP writing Javascript) ... :<\/p>\n

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

Appendix 2 of 2 (PHP writing Javascript) ... differentiating:<\/p>\n

<?php<\/p>\n

if (strpos($_SERVER['QUERY_STRING'], \"#\") !== false) {<\/p>\n

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

<\/strong>
\n<\/code>\n<\/div>\n

\"Think

Think you misunderstood me when I said "Get to the root of the problem"?!<\/p><\/div>\n

Did you know …<\/em><\/strong>
\nJavaScript makes a great easy-access Calculator?<\/p>\n

Try typing the lines below into the address bar of your favourite browser:<\/p>\n

Javascript: eval(512 \/ 380);
\nJavascript: eval(512 * 380);
\nJavascript: eval(512 – 380);
\nJavascript: eval(512 + 380);
\nJavascript: eval(512 % 380);<\/p>\n

These days we spend so much time on the Internet it is a much quicker way to get to a calculator!\n<\/p>\n

If this was interesting you may be interested in this<\/a> too.<\/p>\n