Jump to content

[SOLVED] in place editing

B34ST

By B34ST
in Javascript Help

 Share

Recommended Posts

B34ST Member

B34ST

Posted
Posted

hi, i found an article showing me how to implement in place editing:

 

it has a main page:

 

<html>
<head>
<title>Flick-Like Editing Test</title>

<style>
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 createRequestObject() {
    var ro;
    var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer"){
        ro = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        ro = new XMLHttpRequest();
    }
    return ro;
}

var http = createRequestObject();

function sndReq(action) {
    http.open('get', action);
    http.onreadystatechange = handleResponse;
    http.send(null);
}

function handleResponse() {
    if(http.readyState == 4){
        if(http.responseText=="name ") {
            var replaceText = document.getElementById('person_name').value;
            document.getElementById('name_rg_display_section').innerHTML = replaceText;
            document.getElementById('name_rg').style.display = '';
            document.getElementById('name_hv').style.display = 'none';
        }
        else if(http.responseText=="email ") {
            var replaceText = document.getElementById('email_value').value;
            document.getElementById('email_rg_display_section').innerHTML = "<b>Email:</b> " + replaceText;
            document.getElementById('email_rg').style.display = '';
            document.getElementById('email_hv').style.display = 'none';
        }
        else if(http.responseText=="phone ") {
            var replaceText = document.getElementById('phone_value').value;
            document.getElementById('phone_rg_display_section').innerHTML = "<b>Phone:</b> " + replaceText;
            document.getElementById('phone_rg').style.display = '';
            document.getElementById('phone_hv').style.display = 'none';
        }
    }
}
        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";
$email = "john.doe@gmail.com";
$phone = "555-555-1234";
?>



<table  cellpadding="3" cellspacing="2" class="infoBox">
                                    <tr><td align="right" class="underlinedTD"><b>Contact</b></td></tr>
                                    <tr><td></td></tr>
                                    <?php
                                        if($editingMyOwn ==1) { ?>
                                            <tr id="name_rg">
                                            <td onMouseOver="flashRow(this);" onMouseOut="unFlashRow(this);" onClick="
                                            
                                            document.getElementById('name_hv_editing_section').style.display = '';
                                            document.getElementById('name_hv_saving_section').style.display = 'none';
                                            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">
                                                    <input type="text" class="superBigSize editMode" size="<?php $val=strlen($firstName)+strlen($lastName); echo $val; ?>" value="<?php echo $firstName . " " . $lastName; ?>" id="person_name" /> <br /><input type="button" value="Save" onClick="document.getElementById('name_hv_editing_section').style.display='none';document.getElementById('name_hv_saving_section').style.display='';var req = 'updateProfileAjax.php?part=name&val=' + document.getElementById('person_name').value;sndReq(req);" /> Or <input type="button" value="Cancel" onClick="                        
                        document.getElementById('name_rg').style.display = '';
                        document.getElementById('name_hv').style.display = 'none';
                        "/>
                                            
                                            </div>
                                            <span id="name_hv_saving_section" class="savingAjaxWithBackground">
                                            Saving...
                                            </span>
                                            <script type="text/javascript">
                                                document.getElementById('name_hv').style.display = 'none';
                                                document.getElementById('name_hv_saving_section').style.display = 'none';
                                            </script>
                                        </td></tr>
                                        <?php } 
                                        else { ?>
                                        <tr>
                                            <td>
                                            <div class="superBigSize"><?php echo $firstName . " " . $lastName; ?></div>
                                        </td></tr>
                                        <?php } ?>
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        <!--<tr><td align="right" class="underlinedTD">Email</td></tr>-->
                                        
                                        
                                        
                                        
                                        <?php
                                        if($editingMyOwn ==1) { ?>
                                            <tr id="email_rg">
                                            <td onMouseOver="flashRow(this);" onMouseOut="unFlashRow(this);" onClick="
                                            document.getElementById('email_hv_editing_section').style.display = '';
                                            document.getElementById('email_hv_saving_section').style.display = 'none';
                                            document.getElementById('email_rg').style.display = 'none';
                                            document.getElementById('email_hv').style.display = '';
                                            
                                            ">
                                            <div class="" id="email_rg_display_section"><b>Email:</b> <?php echo $email; ?></div>
                                            </td></tr>
                                            
                                            <tr id="email_hv"><td>
                                            <div id="email_hv_editing_section"><b>Email:</b> 
                                                <input type="text" class=" editMode" size="<?php $val=strlen($email); echo $val; ?>" value="<?php echo $email; ?>" id="email_value" /> <br /><input type="button" value="Save" onClick="document.getElementById('email_hv_editing_section').style.display='none';document.getElementById('email_hv_saving_section').style.display='';var req = 'updateProfileAjax.php?part=email&val=' + document.getElementById('email_value').value;sndReq(req);" /> Or <input type="button" value="Cancel" onClick="document.getElementById('email_rg').style.display = '';
                                 document.getElementById('email_hv').style.display = 'none';"/>
                                                
                                            </div>
                                            <span id="email_hv_saving_section" class="savingAjaxWithBackground">
                                            Saving...
                                            </span>
                                            <script type="text/javascript">
                                                document.getElementById('email_hv').style.display = 'none';
                                                document.getElementById('email_hv_saving_section').style.display = 'none';
                                            </script>
                                        </td></tr>
                                        <?php } 
                                        else { ?>
                                        <tr>
                                            <td>
                                            <div class=""><b>Email:</b> <?php echo $email; ?></div>
                                            </td>
                                        </tr>
                                        <?php } ?>
                                        
                                        
                                        
                                        
                                        
                                        
                                            <?php
                                        if($editingMyOwn ==1) { ?>
                                            <tr id="phone_rg">
                                            <td onMouseOver="flashRow(this);" onMouseOut="unFlashRow(this);" onClick="
                                            document.getElementById('phone_hv_editing_section').style.display = '';
                                            document.getElementById('phone_hv_saving_section').style.display = 'none';
                                            document.getElementById('phone_rg').style.display = 'none';
                                            document.getElementById('phone_hv').style.display = '';
                                            
                                            ">
                                            <div id="phone_rg_display_section"><b>Phone:</b> <?php echo $phone; ?></div>
                                            </td></tr>
                                            
                                            
                                            <tr id="phone_hv"><td>
                                            <div id="phone_hv_editing_section"><b>Phone:</b> 
                                                <input type="text" class=" editMode" size="<?php $val=strlen($phone); echo $val; ?>" value="<?php echo $phone; ?>" id="phone_value" /> <br /><input type="button" value="Save" onClick="document.getElementById('phone_hv_editing_section').style.display='none';document.getElementById('phone_hv_saving_section').style.display='';var req = 'updateProfileAjax.php?part=phone&val=' + document.getElementById('phone_value').value;sndReq(req);" /> Or <input type="button" value="Cancel" onClick="document.getElementById('phone_rg').style.display = '';
                                 document.getElementById('phone_hv').style.display = 'none';"/>
                                                
                                            </div>
                                            <span id="phone_hv_saving_section" class="savingAjaxWithBackground">
                                            Saving...
                                            </span>
                                            <script type="text/javascript">
                                                document.getElementById('phone_hv').style.display = 'none';
                                                document.getElementById('phone_hv_saving_section').style.display = 'none';
                                            </script>
                                        </td></tr>
                                        <?php } 
                                        else { ?>
                                        <tr>
                                            <td>
                                            <div class=""><b>Phone:</b> <?php echo $phone; ?></div>
                                            </td>
                                        </tr>
                                        <?php } ?>
                                
                                        
</table>
</body>

 

which calls for a second page to insert the data into the db:

 

<?php
    //NOTE: some lines are commented out because saving is turned off for the demo
    $loggedIn = 1;
        if($loggedIn == 1) {
        
            $part = mysql_escape_string($_GET['part']);
            
            $val = mysql_escape_string($_GET['val']);
            
            $id = '1';
            
            
            //include 'database_connect.php';
    $dbhost = 'localhost';
    $dbuser = 'myusername';
    $dbpass = 'mypassword';
    $dbname = 'mydb';

    $conn = mysql_connect($dbhost, $dbuser, $dbpass);
    
            
            if($part == "name") {
                $array = split(" ",$val);
                $firstName = mysql_escape_string($array[0]);
                $lastName = mysql_escape_string($array[1]);
	$sql = "INSERT INTO mydb (title, body) 
		VALUES ('$firstName', '$lastName')";
		mysql_query($sql);
          
            }
            else if($part == "email") {
	$sql = "INSERT INTO mydb (title, body) 
		VALUES ('$val', 'test')";
		mysql_query($sql);
            }
            else if($part == "phone") {
                $sql = "UPDATE mydb SET title='$val' WHERE id=1";
	mysql_query($sql);

            echo $part;
            }
            
        }

?>

 

when I edit it a field and then click save the script appears to be working however the data does not get inserted into the database

 

Can anyone see where I am going wrong?

 

Thanks for any help

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.