2

I have a php file that involves a button that toggles visibility

echo "<button onclick = \"toggle('showDetails')\">expand</button>" ;

echo "<script type=\"text/javascript\">";
echo "   function toggle(id) { \n";
echo "       var e = document.getElementById(id)\n";
echo "       if(e.style.display == 'block')\n";
echo "          e.style.display = 'none';\n";
echo "       else\n";
echo "          e.style.display = 'block';\n";
echo "    }";
echo " </script>";

and it works perfectly fine on my php page. But when I go to the html page that calls my php page, the script doesn't work. I tried putting my script in the header of the html page, and the body of the html page, but to no avail. What do I need to do to get my button to work on the html page.

EDIT: Here is the showDetails element:

echo "<div id =\"showDetails\" style=\"display:none\">" ;
echo "<strong>client_address:</strong>" ;
echo $client_address;
echo "<br>" ;
echo "<strong>client_date:</strong>" ;
echo $client_date;
echo "</div>" ;

I also opened up my html page and used the google chrome inspector. When I click on the button on the html page, I get the error in the console:

Uncaught ReferenceError: toggle is not defined

William Roberts
  • 319
  • 2
  • 5
  • 21

1 Answers1

1

When you call this php file via an ajax-style method (using XMLHttpRequest) and inject the response in your existing page with an assignment to innerHTML, the javacscript embedded in script tags will not execute. In your case this means the toggle function will never be defined.

There are several ways to solve this:

  • Define the toggle function in the HTML page that is making this http request. That way the script tag with this function will be there from the start, and executed at page load. It does not matter that the toggle function is just sitting there and doing nothing, up until the moment you call the menu.php file which will send back the button.

  • Use jQuery or similar library which has functions that perform such http requests and execute whatever is in embedded scripttags.

With the second option, you could write:

$("#menuDiv").load("menu.php");

There are several other ways to achieve this, and I refer to the many previous answers to this question.

Note also that there is a semi-colon before the else in the javascript which breaks your if-else construct:

echo "          e.style.display = 'none';\n";

Do instead:

echo "          e.style.display = 'none'\n";
trincot
  • 317,000
  • 35
  • 244
  • 286
  • I'm still getting the same issue. – William Roberts Nov 14 '15 at 02:38
  • When I put all the code you provided in [pdf fiddle light](http://phpfiddle.org/lite), with the fix on the semi--colon, the button works as expected. But what do you mean with "the html page that calls my php page"? Maybe I missed something there, because the `html` is produced by `php`. Maybe you are referring to another `html` page? – trincot Nov 14 '15 at 23:25
  • I have an html page file. And it calls upon a php page as such var menu=new XMLHttpRequest(); menu.onreadystatechange=function(){ if (menu.readyState==4 && menu.status==200){ document.getElementById("menuDiv").innerHTML=menu.responseText; } } menu.open("GET","menu.php",true); menu.send(); – William Roberts Nov 15 '15 at 04:32
  • 1
    Well, that should be information you should have put in your question from the start, because this explains the behaviour you have. Could you add this code to your question? In the mean time I have updated my answer. – trincot Nov 15 '15 at 08:22