Using JS to change the content of a DIV

killinspre · November 11, 2013

I'm trying to create a ten button menu that will change the content of a DIV. I have a smaller version as follows:

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<link href="include/layout.css" type="text/css" rel="stylesheet" /> 
<script> 
function changeContent() 
{ 
document.getElementById('myTable').innerHTML=document.getElementById('showTable').innerHTML; 
} 
</script> 
<script type="text/html" id="showTable"> 
    <?php See2(); ?> 
</script> 
</head> 

<body> 
        <div class="signup"> 
            <form> 
                <input type="image" src="images/BECOME_A_MEMBER.png" border=0 width=150 height=150 onClick="changeContent();return false;" value="Change content"> 
            </form> 
        </div> 
    </div> 
    <div class="content" id="myTable"> 
    <?php See1(); ?> 
    </div> 
</body> 
</html> 
<?php 
function See1() 
{echo "See One";} 

function See2() 
{echo "See Two";} 
?>

I would like a similar script like this:

index.php

<?php 
include'func.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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 
<link href="include/layout.css" type="text/css" rel="stylesheet" /> 
<script> 
function changeContent(func) 
{ 
document.getElementById('myTable').innerHTML=document.getElementById('showTable').innerHTML; 
} 
</script> 
<script type="text/html" id="showTable"> 
if (func=='HomePage') {<?php Homepage(); ?>} 
if (func=='Messages') {<?php Messages(); ?>} 
if (func=='Notifications') {<?php Notifications(); ?>} 
if (func=='MyStuff') {<?php MyStuff(); ?>} 
if (func=='Community') {<?php Community(); ?>} 
if (func=='LiveAction') {<?php LiveAction(); ?>} 
if (func=='WhatsHot') {<?php WhatsHot(); ?>} 
if (func=='RatePics') {<?php RatePics(); ?>} 
if (func=='Upload') {<?php Upload(); ?>} 
if (func=='IMessanger') {<?php IMessanger(); ?>} 
</script> 
<body> 

<a class="home_out" href="index.php" onClick="changeContent(HomePage);return false;" value="Change content" title="HomePage"></a> 
<a class="email_out" href="index.php" onClick="changeContent(Messages);return false;" value="Change content" title="Messages"></a> 
<a class="notify_out" href="index.php" onClick="changeContent(Notifications);return false;" value="Change content" title="Notifications"></a> 
<a class="mine_out" href="index.php" onClick="changeContent(MyStuff);return false;" value="Change content" title="My Stuff"></a> 
<a class="comm_out" href="index.php" onClick="changeContent(Community);return false;" value="Change content" title="Community"></a> 
<a class="live_out" href="index.php" onClick="changeContent(LiveAction);return false;" value="Change content" title="Live Action"></a> 
<a class="hot_out" href="index.php" onClick="changeContent(WhatsHot);return false;" value="Change content" title="What's Hot"></a> 
<a class="rate_out" href="index.php" onClick="changeContent(RatePics);return false;" value="Change content" title="Rate Pics"></a> 
<a class="upload_out" href="index.php" onClick="changeContent(Upload);return false;" value="Change content" title="Upload Pics/Vids/Audio"></a> 
<a class="im_out" href="index.php" onClick="changeContent(IMessanger);return false;" value="Change content" title="Instant Messanger"></a> 

    <div class="content" id="myTable"> 
    <?php HomePage(); ?> 
    </div> 
</body> 
</html>

func.php

<? 
function HomePage() 
{echo"HomePage";} 

function Messages() 
{echo"Messages";} 

function Notifications() 
{echo"Notifications";} 

function MyStuff() 
{echo"MyStuff";} 

function Community() 
{echo"Community";} 

function LiveAction() 
{echo"LiveAction";} 

function WhatsHot() 
{echo"WhatsHot";} 

function RatePics() 
{echo"RatePics";} 

function Upload() 
{echo"Upload";} 

function IMessanger() 
{echo"IMessanger";} 
?>

I get nothing displayed besides the background with the way index.php is. And if I remove the second script ID'd as showTable, I get a Fatal error: Call to undefined function HomePage() even tho its in func.php that was included at the start of index.php

.josh · November 12, 2013

you are trying to mix php and javascript in a way that can't be done. php is server-side and is evaluated on the server. Once the script is executed, php then passes the output to the client (your browser). javascript functions and code is just plain text as far as the server and php is concerned. Then in your browser, as far as javascript is concerned, php and your server no longer exist. So you can't call a php function from javascript because it doesn't exist to javascript.

If you want to bridge the gap, then you need to look into using AJAX. Basically the idea is to use javascript to make a request to the server, passing a value (e.g. the function name) and then have your php script execute the specified function based on the value passed. php runs the function, outputs the results, and those results are returned to javascript and you can do something with them.

But it's important to understand that you cannot directly execute php code with javascript or visa versa. You're simply passing text along in the request and receiving text as a response and it's up to the other end to do something with it. Setup a switch or a bunch of if..else, or just output the code and run it through eval() to be executed as code (note: do NOT do this - HUGE security risk).

TL;DR: next step: find a basic AJAX tutorial (there are tons).

Sign In

Using JS to change the content of a DIV

Recommended Posts

killinspre

Link to comment

Share on other sites

.josh

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information