SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: Ajax CMS Help!

  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ajax CMS Help!

    Hi Sitepointers,

    I am trying to make myself a CMS system as a project i have. What i would like to do however is give the user some options when creating a new content page.

    When the user creates some new content i would like to give them an option to either, create a standard page, a news item or a link. The problem i have is that then the content in the add page needs to change depending on the option selected.

    So if its a standard page it will display some text areas, or if its a link it will display some different text boxes.

    Does anyone know any good tutorials for ajax (or any other language) which would provide this kind of functionality, or would it be easier to simply post back the page itself using onchange in the dropdown box and passing a variable in the url....e.g addcontent.php?type=content, or addcontent.php?type=link and then pull in the information using includes??

    Any information would be fantastic..

    Thank you

    Rodent

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if this is for input only, then you can simply use javascript to show/hide elements as needed. This is a very simple example:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css"></style>
            <script type="text/javascript">
                function handleChange(which) {
                    var p1 = document.getElementById('panel1');
                    var p2 = document.getElementById('panel2');
                    var p3 = document.getElementById('panel3');
                    var p4 = document.getElementById('panel4');
    
                    switch(parseInt(which.options[which.selectedIndex].value)) {
                        case -1 :
                            p1.style.display = 'block';
                            p2.style.display = 'none';
                            p3.style.display = 'none';
                            p4.style.display = 'none';
                        break;
                        case 2 :
                            p1.style.display = 'none';
                            p2.style.display = 'block';
                            p3.style.display = 'none';
                            p4.style.display = 'none';
                        break;
                        case 3 :
                            p1.style.display = 'none';
                            p2.style.display = 'none';
                            p3.style.display = 'block';
                            p4.style.display = 'none';
                        break;
                        case 4 :
                            p1.style.display = 'none';
                            p2.style.display = 'none';
                            p3.style.display = 'none';
                            p4.style.display = 'block';
                        break;
                    }
                }
            </script>
        </head>
        <body>
            
            <select onchange="handleChange(this);">
                <option value="-1">Select</option>
                <option value="2">Text</option>
                <option value="3">Textarea</option>
                <option value="4">Select</option>
            </select>
    
            <div id="panel1">none</div>
            <div id="panel2" style="display: none;"><input type="text" /></div>
            <div id="panel3" style="display: none;"><textarea></textarea></div>
            <div id="panel4" style="display: none;">
                <select>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
            </div>
    
        </body>
    </html>



Bookmarks

Posting Permissions

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