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
    Regular Coder
    Join Date
    Sep 2008
    Posts
    280
    Thanks
    25
    Thanked 9 Times in 9 Posts

    AJAX PHP Problem

    THIS PAGE HERE

    Morning, going to chop my head off if i dont get my head around this soon.
    Found this lil script on the net the other day it was called quick edit, there was no need to refresh page or press a submit button for it to upload. Could Anyone tell me why itt isnt working.


    #index.php
    PHP Code:
    <?php
    include("database_connect.php");
    ?>

    <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>



    <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>
    #updateProfileAjax.php
    PHP Code:
    <?php

        
    include("database_connect.php");
        
            if(
    $loggedIn == 1) {
            
                
    $part mysql_escape_string($_GET['part']);
                
                
    $val mysql_escape_string($_GET['val']);
                
                
    $id $userId;
                
                
                if(
    $part == "name") {
                    
    $array split(" ",$val);
                    
    $firstName mysql_escape_string($array[0]);
                    
    $lastName mysql_escape_string($array[1]);
                    
    $sql "UPDATE `$table` SET firstname = '$firstName', lastname = '$lastName' WHERE id=$id";
                }
                else if(
    $part == "email") {
                    
    $sql "UPDATE `$table` SET email = '$val' WHERE id=$id";
                }
                else if(
    $part == "desc") {
                    
    $sql "UPDATE `$table` SET description = '$val' WHERE id=$id";
                }
                else if(
    $part == "phone") {
                    
    $sql "UPDATE `$table` SET phone = '$val' WHERE id=$id";
                }
                
    mysql_query($sql);
                
                
    mysql_close();
                echo 
    $part;
                
                echo 
    $_GET['part']; 
            }

            

    ?>
    #database_connect.php
    PHP Code:
    <?php

        $sql_username 
    "root";
        
    $sql_password "";
        
    $sql_server "localhost";  //useualy localhost
        
    $sql_database "blogs";
        
        
    $table "demo";
        
        
    $con mysql_connect ($sql_server$sql_username$sql_password);
        
        
    mysql_select_db($sql_database$con);
        
        
    $query mysql_query("SELECT * from `$table` where id='1'");
        
    $array mysql_fetch_array($query);
        
        
    $editingMyOwn $array["user_level"];
        
    $firstName $array["firstname"];
        
    $lastName $array["lastname"];
        
    $email $array["email"];
        
    $phone $array["phone"];


    ?>
    Last edited by snowysweb; 01-07-2009 at 06:09 AM.

  • #2
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,987
    Thanks
    4
    Thanked 2,660 Times in 2,629 Posts
    Java != Javascript.
    Moving to AJAX forum.
    PHP Code:
    header('HTTP/1.1 420 Enhance Your Calm'); 

  • #3
    Regular Coder
    Join Date
    Sep 2008
    Posts
    280
    Thanks
    25
    Thanked 9 Times in 9 Posts
    sorry didnt see the AJAX section!

  • #4
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    the easiest first step towards finding where it is broken is to get a tool like firebug for firefox to monitor the ajax transaction. then you can watch it to see if it's even getting out the door or getting hung in the backend somewhere.

    point being, how far is it making it? just saying it is broken isn't that useful. can you describe its behavior?


  •  

    Posting Permissions

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