Gmail / Facebook Style Chat Application
Details Live Demo Download


Posted: Wednesday 3rd of October 2012

Live edit of User Info using Ajax and Jquery



This tutorial helps you to edit your information instantly without having to click on save changes button to have your updated information saved.
Ajax and Jquery does these things easily for you without much effort while PHP does the saving of the changes made.
To see how it works, please click on the Demo button below. The script is written in a way that any one can understand and customize.





PHP
<?php
include "database_connection.php";
if(isset($_POST['id']) && isset($_POST['firstname']) && isset($_POST['lastname']) && isset($_POST['email']) && !empty($_POST['id']) && !empty($_POST['firstname']) && !empty($_POST['lastname']) && !empty($_POST['email']))
{
      mysql_query("update `user_details` set `firstname` = '".mysql_escape_string(strip_tags($_POST['firstname']))."', `lastname` = '".mysql_escape_string(strip_tags($_POST['lastname']))."', `email` = '".mysql_escape_string(strip_tags($_POST['email']))."' where `id` = '".mysql_escape_string(strip_tags($_POST['id']))."'");
}
?>

Ajax and Jquery
<script type="text/javascript" src="1.5.2.main.js"></script>
<script type="text/javascript">
function vasplus_live_edit_area(details_id)
{
      $(".vasplus_live_edit_area").css("background-color","#FFF");
      $("#detail_a"+details_id).hide();
      $("#detail_b"+details_id).hide();
      $("#detail_c"+details_id).hide();
      $("#detail_aa"+details_id).show();
      $("#detail_bb"+details_id).show();
      $("#detail_cc"+details_id).show();
      $("#id"+details_id).css("background-color","#F6F6F6");
}
$(document).bind('mouseup', function()
{
      $(".vasplus_hidden_boxes").hide();
      $(".vasplus_live_content").show();
      $(".vasplus_live_edit_area").css("background-color","#FFF");
});
$(document).ready(function()
{
      $(".vasplus_live_edit_area").bind('change', function()
      {
            var details_id = $(this).attr('id').replace('id','');
            var detail_aa = $("#detail_aa"+details_id).val();
            var detail_bb = $("#detail_bb"+details_id).val();
            var detail_cc = $("#detail_cc"+details_id).val();
            var dataString = 'id=' + details_id + '&firstname=' + detail_aa + '&lastname='+detail_bb + '&email='+detail_cc;
            $("#detail_a"+details_id).html('<img src="load.gif" />');
            if(detail_aa != "" && detail_bb != "" && detail_cc != "")
            {
                  $.ajax({
                        type: "POST",
                        url: "save_changes.php",
                        data: dataString,
                        cache: false,
                        success: function()
                        {
                              $("#detail_a"+details_id).html(detail_aa);
                              $("#detail_b"+details_id).html(detail_bb);
                              $("#detail_c"+details_id).html(detail_cc);
                        }
                  });
            }
            else
            {
                  alert('That field can not be completely empty. Please enter some content. Thanks...');
                  return false;
            }
      });
});
</script>

HTML

<div id="id<?php echo $user_id; ?>" style="padding:8px; float:left; cursor:pointer;" class="vasplus_live_edit_area" onClick="vasplus_live_edit_area(<?php echo $user_id; ?>);" align="left">

<div style="width:236px;float:left;">
<span id="detail_a<?php echo $user_id; ?>" class="vasplus_live_content"><?php echo $firstname; ?></span>
<input type="text" value="<?php echo $firstname; ?>" class="vasplus_hidden_boxes" id="detail_aa<?php echo $user_id; ?>" style="display:none;width:180px;" />
</div>

<div style="width:236px;float:left;">
<span id="detail_b<?php echo $user_id; ?>" class="vasplus_live_content"><?php echo $lastname; ?></span>
<input type="text" value="<?php echo $lastname; ?>" class="vasplus_hidden_boxes" id="detail_bb<?php echo $user_id; ?>" style="display:none;width:180px;"/>
</div>

<div style="width:240px;float:left;">
<span id="detail_c<?php echo $user_id; ?>" class="vasplus_live_content"><?php echo $email; ?></span>
<input type="text" value="<?php echo $email; ?>" class="vasplus_hidden_boxes" id="detail_cc<?php echo $user_id; ?>" style="display:none;width:250px;"/>
</div>

</div>




That's it guys...




Comments
0

 

Announcement x
Dear Users and Clients,

This is to inform you that we have recently updated our website generally.

If you experience any problem viewing any part of this website or if you notice that any of our scripts or tutorials are not functioning properly as should be, please click on the Contact Link at the top of this page to report the issue to us.

Our priority is to give you the best of service!


Thank You,
The Vasplus Team

Announcement