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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Jul 2006
    Posts
    124
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Edit in Place Example

    Was trying to get this one to work but it seems to be broken and since some people can't get it to work - me included
    http://www.ajaxdaddy.com/flickr-like-edit-in-place.html

    I decided to rewrite it... so I made some modifications in order to make it work... So here you go:
    test.php
    Code:
    <html>
    <head>
    
    <style type="text/css">
    
    </style>
        
    <title>Flick-Like Editing Test</title>
    
    <style>
        body {
            color: white;background: #52616F;
        }
        a { color: white; }
        body {
        color: black;
        }
        input.editMode {
        background-color : #FFFF99;
        }
        textarea.editMode {
        background-color : #FFFF99;
        }
        .savingAjaxWithBackground {
        background-color : #FFFF99;
        }
        .superBigSize {
        font-size: 45px;
        font-weight: bold;
        }
        td.underlinedTD {
        border-bottom:1px #000000 dashed;
        }
        table.infoBox {
        background-color:#F6F6F6;
        border:#999999 double 1px;
        font-size:11px;
        padding:2px;
        }
    </style>
    
    <script type="text/javascript">
    
    function sndReq(action) {
         var xmlhttp;
    
        if (window.XMLHttpRequest) {
          // code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
        } else if (window.ActiveXObject) {
          // code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        } else {
          alert("Your browser does not support XMLHTTP!");
        }
        xmlhttp.onreadystatechange=function() {
            if(xmlhttp.readyState==4) {
                document.getElementById("name_rg_display_section").innerHTML=xmlhttp.responseText;
                document.getElementById("person_name").value=xmlhttp.responseText;
                document.getElementById('name_rg').style.display = 'block';
            }
        }
    
        xmlhttp.open("GET",action,true);
        xmlhttp.send(null);
    }
    
    function flashRow(obj) {
            obj.bgColor = "#FFFF99";
    }
    function unFlashRow(obj) {
            obj.bgColor = "#F6F6F6";
    }
    </script>
    </head>
    <body>
    
    
    <?php
    $editingMyOwn = 1; //Verification code should go here. Set variable to whether user is editing a page they are allowed to.
    $firstName = "John";
    $lastName = "Doe";
    ?>
    
    
    <table cellpadding="2" cellspacing="2" class="infoBox" width="100%">
        <tr id="name_rg">
            <td onMouseOver="flashRow(this);" onMouseOut="unFlashRow(this);" onClick="
                document.getElementById('name_hv_editing_section').style.display = '';
                document.getElementById('name_rg').style.display = 'none';
                document.getElementById('name_hv').style.display = '';
            ">
                <div class="superBigSize" id="name_rg_display_section">
                    <?php echo $firstName . " " . $lastName; ?>
                </div>
            </td>
        </tr>
        <tr id="name_hv">
            <td>
                <div id="name_hv_editing_section" style="display:none">
                    <input type="text" id="person_name" class="superBigSize editMode" 
                        size="<?php $val=strlen($firstName)+strlen($lastName); echo $val;?>"
                        value="<?php echo $firstName . " " . $lastName;?>"
                    />
                    <br />
    
                    <input type="button" value="Guardar" onClick="
                        document.getElementById('name_hv_editing_section').style.display='none';
                        var req = 'updateProfileAjax.php?part=name&val=' + document.getElementById('person_name').value;
                        sndReq(req);"
                    />
                    
                    <input type="button" value="Cancelar" onClick="
                        document.getElementById('name_rg').style.display = '';
                        document.getElementById('name_hv').style.display = 'none';
                    "/>
                </div>
            </td>
        </tr>
    </table>
    </body>
    updateProfileAjax.php
    Code:
    <?php
    
    $part = $_GET["part"];
    $new_value = $_GET["val"];
    
    echo $new_value;
    
    ?>
    Change the stuff on updateProfileAjax to fit your needs, save to database, etc..

    Hope this helps.
    Last edited by davidc2; 07-17-2009 at 10:37 PM.

  • #2
    Regular Coder
    Join Date
    Jul 2006
    Posts
    124
    Thanks
    1
    Thanked 0 Times in 0 Posts
    You may want to add something like this to the Cancel javascript also:

    Code:
    document.getElementById('person_name').value=document.getElementById('name_rg_display_section').innerHTML;


  •  

    Posting Permissions

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