Jump to content

[SOLVED] in place editing

B34ST

By B34ST
in Javascript Help

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 = "[email protected]";
$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
https://forums.phpfreaks.com/topic/130813-solved-in-place-editing/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

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.