Loading...
 
Gmail / Facebook Style Chat Application


Posted: Wednesday 3rd of October 2012

Live edit of Information 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...



Views Today: 0
Total Views: 931

Comments
0
OUR OBJECTIVE

Our objective is to reach a place where our services will be highly regarded by businesses from various industrial domains for building their innovative busines solutions with our cutting-edge technological expertise, interactive designs and uncompromised quality.

OUR MISSION

We aspire to help businesses ranging from startups to enterprises, who reach out to us with their requirements, in achieving great lengths, expanding their reach, upscaling their products, and generate a large user-base with our outstanding and cost-effective services.

Copyright © 2011 - 2024 | All Rights Reserved