Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Using JS/AJAX to change the content of a DIV

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

    PHP Code:
    <!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 Code:
    <?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
    PHP Code:
    <? 
    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

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,762
    Thanks
    23
    Thanked 548 Times in 547 Posts
    You do not have any ajax here at all. Your muddling up JS and PHP. Read this to learn about ajax.
    http://www.w3schools.com/ajax/

    You can call a PHP script that just echos "Upload"; with ajax and your div will change.(if done right.) About the third page into the tutorial is an example of just that.
    Evolution - The non-random survival of random variants.

  • #3
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    The functions I func.php are incomplete and just examples. They will do far more than just echo a word. I did it like that to simplify the question.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,762
    Thanks
    23
    Thanked 548 Times in 547 Posts
    And I'll say this again: You have no ajax here!
    Your title says
    Using JS/AJAX to change the content of a DIV
    All that aside. You don't need php for this. You should use up-to-date doc types. Don't use anchors when you say buttons.
    Please note the single quotes to send info to a JS function. Cut down to it's simplest:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <!--<link href="include/layout.css" type="text/css" rel="stylesheet" />-->
    <script>
    function changeContent(func){
    if (func=='HomePage') {message = "Print this to the home page";}
    if (func=='Messages') {message = "Get a pencil and take some messages";}
    document.getElementById('myTable').innerHTML = message;
    }
    </script>
    
    <body>
    
    <a href="#" onclick="changeContent('HomePage');">HomePage</a>
    <a href="#" onclick="changeContent('Messages');">Messages</a>
    <br />
    <button onclick="changeContent('HomePage');">HomePage</button>
    <button onclick="changeContent('Messages');">Messages</button>
    
    <div id="myTable"></div>
    
    </body>
    </html>
    This should help. Look up switches https://developer.mozilla.org/en-US/...tements/switch
    Evolution - The non-random survival of random variants.

  • Users who have thanked sunfighter for this post:

    killinspre (11-11-2013)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •